Why is Facebook share button pulling parameters from the meta tags instead of my specified ones?

Question

I used to have share buttons in a dynamically created page that shared specific content from the page:

<a class="share" onclick="window.open('http://www.facebook.com/sharer.php?s=100&amp;p[title]=TITLE&amp;p[summary]=SUMMARY&amp;p[url]=http://www.facebook.com&amp;&amp;p[images][0]=imageurl', 'newwindow', 'width=555, height=315'); return false;"></a>

This resulted in a share window with the content that was specified in the parameters inside the above code (TITLE, SUMMARY, IMAGEURL, URL, etc). It seems, however, that recently Facebook deprecated this code and now what's happening is that when you try to share, you see my specified parameters but once you post them on Facebook different content shows up!

Instead of seeing my specified parameters, it seems like Facebook crawls the page that's specified in the URL and looks for the information inside the meta tags on that page. This means that all my share buttons on the page are now posting the same meta tag.

Anyone know how I can fix this or basically share custom content?

Alo Sarv Alo Sarv · Accepted Answer · 2013-12-20T14:29:05

You can create a file on your server that serves a valid HTML file with the correct meta tags.

shared.php?title=Hello&description=FooBar&image=URL&link=LINKURL

<html><head>
  <meta property="og:title" value="<?php echo $_GET['title'] ?>" />
  <meta property="og:description" value="<?php echo $_GET['description'] ?>" />
  <meta property="og:image" value="<?php echo $_GET['image'] ?>" ?>
  <script type='text/javascript'>
     setTimeout(function() { 
        document.location = "<?php echo $_GET['link'] ?>"; }, 500
     );
  </script>
</head></html>

Now just pass this file with the sharer.php, passing all your parameters into this, like so:

<div 
    class="fb-share-button" 
    data-href="http://YOURSERVER.com/shared.php?title=Hello&amp;description=FooBar&amp;image=URL&amp;link=LINKURL" 
    data-type="button_count">
</div>

Or with your original JS code:

<a class='share' onclick="window.open('https://www.facebook.com/sharer/sharer.php?app_id=YOURAPPID&sdk=joey&u=http%3A%2F%2Fyourserver.com%2Fshared.php%3Ftitle%3DHello%26description%3DFooBar%26image%3DURL%26link%3DLINKURL&display=popup', 'newwindow', 'width=555, height=315'); return false;"></a>

When facebook comes crawling your URL, since it passes along the same URL parameters, the same meta tags will be created every time.

A slight delay in the Javascript URL redirect is required to avoid Facebook crawler following through the redirect to the final destination; users clicking on the link in Facebook feed will still get redirected to the final location.

Why is Facebook share button pulling parameters from the meta tags instead of my specified ones?

2 Answers