The simplest explanation of integrating a Facebook share button with dynamic content

Question

This is not rocket science. It seems like it should be SO SIMPLE and I've followed the docs explicitly and modified it 100 different ways. But I can't for the life of me get all the right moves in all the right places and every tutorial or SO post I can find is now deprecated.

I have a Facebook app set up.

I have this at the opening of my body:

<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : '722388634521999',
      xfbml      : true,
      version    : 'v2.2'
    });
  };

  (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>

I have every meta tag you can imagine.

I have the share button code where I want my share button:

<div class="fb-share-button" data-href="http://gd-web.brooklynunited.com" data-layout="button"></div>

I only have Facebook share on two templates, but one shares the explicit page the user is on (individual blog posts) and the other shares the global site url (ie NOT the page the user is on). The user should be able to click the FB share button and get the title, description and image that I populate in the meta tags to post to their profile. Right?!

I feel like I'm taking crazy pills.

Of note, want this in a modal.

And what I have will activate share, but doesn't pull any meta. No description, no image, nada. Sorry, should have offered a more thorough explanation.

Any help is MUCH appreciated and you are a BFD (big effing deal) on the internet, PLEASE make this a blog post or go work for Facebook and help them write their docs.

The end.

Answer 1

I believe the problem is that Facebook is treating your development site as a redirect to the production site. When the FB crawler hits the og:url meta tag, it immediately heads to that URL and looks for further information about the content object.

I'm confident that if you change that og:url to your development URL, sharing will work as expected. A great tool to track down issues like this is the Facebook Object Debugger .

Answer 2

UPDATE: The og:url change had to be made on the page being shared (index.html), not the page I was on. Then, per @chris's comment above, cleared cached data within Facebook on the base URL and the two template URLs. None of this would work locally, only on a live URL.

Also had to change the FB admin ID to my own personal ID, not the organization's ID, for some totally unknown reason.

I am going to make this an explicit blog post myself. So much wasted time.

Thanks, all!