CODEWITHSUNDEEP
javascripthtmlwordpressfacebookfacebook-opengraph
Deimantas Brandišauskas
Deimantas Brandišauskas

Reputation: 1772

Facebook OG not displaying (when sharing a post)

I've this site page - http://1k.lt/mamos-ismintys/, which is when I'm trying to share it via the FB share button bellow, it just show my old WordPress theme image and basic site data.

Long story short, I've uploaded static HTML/CSS/JS to WordPress site folder (via Filezilla) and it directs from WordPress post to this static HTML template. Final URL of the page - http://1k.lt/mamos-ismintys/

enter image description here

So now, when I'm trying to share it, it just shows an old image from default WordPress template.

I've tried to debug it via https://developers.facebook.com/tools/debug/og/object/ and it's showing everything correctly.

This is the content of my index.html file: 

<!DOCTYPE html>
<html >
   <head>
      <meta charset="UTF-8">
      <meta property="og:url"                content="http://1k.lt/mamos-ismintys/" />
      <meta property="og:type"               content="article" />
      <meta property="og:title"              content="Mamos išmintys" />
      <meta property="og:description"        content="...." />
      <meta property="og:image"              content="http://1k.lt/wp-content/uploads/2017/03/koveris-2.jpg" />
      <title>Mamos išmintys</title>
      <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
      <link rel="stylesheet" href="css/style.css">
   </head>
   <body>
      <div id="fb-root"></div>
      <script>(function(d, s, id) {
         var js, fjs = d.getElementsByTagName(s)[0];
         if (d.getElementById(id)) return;
         js = d.createElement(s); js.id = id;
         js.src = "//connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.8&appId=(this is my fb app id)";
         fjs.parentNode.insertBefore(js, fjs);
         }(document, 'script', 'facebook-jssdk'));
      </script>
      <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
      <a href="http://www.1k.lt" ><img src="css/logooo.png" style="width: 140px; padding: 16px;" /> </a>
      <div class="container">
      <div id="content">
         <p id="title" style="margin-top: 0px;"><b>Mamos išmintys</b></p>
         <div id="center" style="margin-top:0px;">
            <button id="gen" onclick="genQuote()">Prašyk išminties</button> <br/>
            <!-- <p id="question">What you say?</p> -->
            <div class="answer" style="margin-top: 61px;">
               <img src="css/ellipse.png" style="width: 66px; padding-top: 40px;"/>
               <p id="quote" style="padding-left: 1em; margin-top: 15px;">Spausk "Prašyk išminties"<br/>- <em>Mama</em></p>
               <p></p>
            </div>
            <div data-h
               ref="http://1k.lt/mamos-ismintys" data-size="large" data-mobile-iframe="true"><a class="fb-xfbml-parse-ignore" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2F1k.lt%2F&amp;src=sdkpreparse"><img src="fb-share.png" style="width: 190px;" /></a></div>
         </div>
      </div>
      <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script src="js/index.js"></script>
   </body>
</html>

Appreciate any help.

EDIT:

I just ran with https://developers.facebook.com/tools/debug/sharing/?q=http%3A%2F%2F1k.lt%2Fmamos-ismintys%2F and it says: The 'fb:app_id' property should be explicitly provided, Specify the app ID so that stories shared to Facebook will be properly attributed to the app. Alternatively, app_id can be set in url when open the share dialog.

Upvotes: 0

Views: 339

Answers (1)

Raunak Gupta
Raunak Gupta

Reputation: 10809

Add this to your <head> tag to overcome with the error: Share App ID Missing.

<meta property="fb:app_id" content="YOUR_APP_ID" />

Hope this helps!

Upvotes: 1

Related Questions