CODEWITHSUNDEEP
phpjavascriptfacebooksocial-networking
JM4
JM4

Reputation: 6788

How does the Facebook 'share' button on Stack overflow work?

I am looking to add social icons to our site, giving customers the ability to "like", tweet and share content on their facebook and twitter profiles. I have noticed to the left of this box, the facebook and twitter icons do exactly what I am trying to accomplish but I am not familiar with how to do this. Looking at the source code, there are JS references to: 

<script type="text/javascript">
  StackExchange.ready(function() {
    var shareUrl = "http%3a%2f%2fstackoverflow.com%2fq%2f7505636%2f337690";
    var shareMsg = "Advice+integrating+Facebook+%27share%27+and+link%2fimage+capabilities+with+our+site";   
    StackExchange.share.facebook($("#fb-share-7505636"), shareUrl, shareMsg);
    StackExchange.share.twitter($("#twitter-share-7505636"), shareUrl, shareMsg);
});
</script>

Our site works this way: While anybody can visit the primary site at any time, individuals can sign up as representatives with their own unique URL that acts as a referrer to give 'credit' on rewards. I have reviewed the facebook developer site and to be honest I am slightly overwhelmed. I want to give our members the ability to click a Facebook icon from within their dashboard, prompting them to post on their wall with a set image, set title, and description. I have read in the documentation this is done by setting meta tags in the head but it does not seem to matter for my site (or I am clearly doing it wrong).

What if the URL facebook is looking for (share URL) is behind a password protected page or an area of the site which would not allow content based on a missing PHP SESSION variable?

Edit

I have also seen a lot on the net which says I have to integrate the Facebook JS SDK but then goes on to talk about authentication/permission to write on walls, etc. Yes the link to the left does not ask for permission to do anything other than to 1) log into the FB account, 2) post on the user's wall. This site is a perfect example

The link above is great but it assumes I need to authorize a 'share' which does not occur on this site.

Upvotes: 3

Views: 2949

Answers (1)

swatkins
swatkins

Reputation: 13630

When you click on the share button, you call a script on facebook.com that will then in turn access the page pointed to in the querystring (?u=xxxxxx).

Facebook will parse that page and grab the first few images it finds, a description and title from the page. That is what it shows to you and allows you to add some additional text (as well as edit the title/description/and choose different images).

If that page contains the specific meta tags that facebook asks you to add to the page, then they'll use those to populate the title/description/image. This allows the webpage author to control how their page shows up in a facebook feed (although the user could still edit it before posting). These meta tags would need to be in that particular page to be used by facebook.

If facebook cannot access the page because it's password protected, etc. - then it cannot parse the meta tags and will then just show the user the URL as the title with no description and thumbnail.

Upvotes: 3

Related Questions