CODEWITHSUNDEEP
javascripthtmlfacebook
tomek278
tomek278

Reputation: 51

Facebook share button not showing image etc from og tags on localhost

I've got problem with Facebook social share button. After click on share button when popup shows up, it doesn't display image provided in og:image tag, and also title and description from og:title and og:description tag. This is problem with my project served on localhost:3000.

I've also tried to copy and paste code from facebook site (https://developers.facebook.com/docs/plugins/share-button/) and just run separate index.html in browser, but even that doesn't work as expected (only showing url of site)

So what's the problem even with official code and how can I fix it, so my images, description and title will show up in popup?

Here is the code from Facebook Doc

<html>
<head>
  <title>Your Website Title</title>
    <!-- You can use Open Graph tags to customize link previews.
    Learn more: https://developers.facebook.com/docs/sharing/webmasters -->
  <meta property="og:url"           content="https://google.pl" />
  <meta property="og:type"          content="website" />
  <meta property="og:title"         content="Your Website Title" />
  <meta property="og:description"   content="Your description" />
  <meta property="og:image"         content="http://javascript.info/article/call-apply-decorators/decorator-makecaching-wrapper.png" />
</head>
<body>

  <!-- Load Facebook SDK for JavaScript -->
  <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 = "https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.0";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));</script>

  <!-- Your share button code -->
  <div class="fb-share-button" 
    data-href="https://google.pl" 
    data-layout="button_count">
  </div>

</body>
</html>

Upvotes: 0

Views: 2340

Answers (2)

Orange Orange
Orange Orange

Reputation: 1981

  1. data-href must be the same as og:url
  2. from my experience i can tell that og:image should be .jpg otherwise it happens you get errors with images
  3. as @luschn said, your image should be on the web of course and not localhost
  4. i recently had a loooot of issues with fb share button so i prefer to use fb share link and customize the element with some css to make it look like a button or whatever

Upvotes: 0

andyrandy
andyrandy

Reputation: 73974

This is problem with my project served on localhost:3000

OG Tags cannot work on localhost, Facebook needs to be able to reach the URL. Put your project on a public webserver to test OG tags.

Upvotes: 1

Related Questions