CODEWITHSUNDEEP
facebook-graph-apifacebook-social-pluginssocialshare
Ankur Lathiya
Ankur Lathiya

Reputation: 174

Why image is not showing up in facebook share?

Why image is not showing up in facebook share? Here is my code, please tell me where I have done wrong my code is in localhost

<html>
<head>
<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : '1474558775911287',
      xfbml      : true,
      version    : 'v2.8'
    });
    FB.AppEvents.logPageView();
  };

(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_US/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>

  <title>Your Website Title</title>
  <meta property="og:url"         content="http://pypolo.com/" />
  <meta property="og:type"        content="website" />
  <meta property="og:title"       content="Hello" />
  <meta property="og:description" content="Your description" />
  <meta property="og:image"    content="http://avnavu.com/wp-content/uploads/2014/09/Usay-Mein-Yaad-Aata-Hoon-shayari.jpg" />
<!-- You can use Open Graph tags to customize link previews.
Learn more: https://developers.facebook.com/docs/sharing/webmasters -->
</head>
<body>
  <!-- Load Facebook SDK for JavaScript -->
  <div id="fb-root"></div>

  <!-- Your share button code -->
  <div class="fb-share-button" data-href="http://pypolo.com/" data-layout="button_count">
  </div>

</body> 
</html>

Upvotes: 2

Views: 5026

Answers (1)

JayNCoke
JayNCoke

Reputation: 1091

When dealing with what the Facebook share button sees, try using the Sharing Debugger tool here: https://developers.facebook.com/tools/debug/sharing

I tried entering the URL you put in there: http://pypolo.com

It will show you results of Facebooks's crawler when it looks at your meta tags. Apparently your og:image is not set on that domain.

You say that your code is running on your localhost. Facebook can't read from your computer at all. Also, your share button in the code is pointing to http://pypolo.com and not your machine. Even if you did try to point it to your machine, you'd have to have your machine setup basically like a real life server and open it to the world. Not something you typically want to do. So basically what I'm saying is that although you have the og:image in your code, that is not being sent at all to Facebook through the Facebook share button.

What you'll need to do is upload your code to the server that pypolo.com is running on. This way Facebook's crawler can see that image. Then retry the URL in the Sharing Debugger and you should see the image in the post at that point.

Upvotes: 2

Related Questions