Twitter and facebook share with callbacks?

16
votes

I have implemented facebook and twitter share to my website. The users are redirected to the following URLs when they click on the twitter or facebook share button.

http://www.facebook.com/sharer.php?u='+encodeURIComponent(location)+'&t='+encodeURIComponent(text)

http://twitter.com/share?url='+location+'&text='+text

I want to store the username and tweet link if possible in my database when someone the content through twitter and I want to store facebook profile url and name when someone shares it through facebook. Is it possible to retrive that data when someone has successfully completed the share process?

4
facebooktwitter
For twitter look at stackoverflow.com/questions/4947825/… – Edgar Kenji Tanaka
Hello there ! is there any solution found for callback of twitter tweet ? – Mayur Kukadiya

4 Answers

19
votes

The facebook javascript API allows you to share and gives you a callback

http://developers.facebook.com/docs/reference/javascript/FB.ui/

FB.ui(
   {
     method: 'feed',
     name: 'Facebook Dialogs',
     link: 'http://developers.facebook.com/docs/reference/dialogs/',
     picture: 'http://fbrell.com/f8.jpg',
     caption: 'Reference Documentation',
     description: 'Dialogs provide a simple, consistent interface for applications to interface with users.',
     message: 'Facebook Dialogs are easy!'
   },
   function(response) {
     if (response && response.post_id) {
       alert('Post was published.');
     } else {
       alert('Post was not published.');
     }
   }
 );

To use this you need to have set up a facebook application and put the following code directly after the opening body tag 

<div id="fb-root">
</div>
<script src="http://connect.facebook.net/en_US/all.js" type="text/javascript"></script>
<script type="text/javascript">
    FB.init({
        appId: YOUR_API_KEY,
        status: true,
        cookie: true,
        xfbml: true
    });
    FB.Canvas.setAutoResize();
</script>

If you ask for basic permissions, you could then get the users facebook id and use this to store which users had shared.

15
votes

For Twitter call with callback, that is how I did it in Javascript:

// Include the Twitter Library
window.twttr = (function (d,s,id) {
  var t, js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return; js=d.createElement(s); js.id=id;
  js.src="https://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs);
  return window.twttr || (t = { _e: [], ready: function(f){ t._e.push(f) } });
}(document, "script", "twitter-wjs"));

// On ready, register the callback...
twttr.ready(function (twttr) {
    twttr.events.bind('tweet', function (event) {
        // your callback action here...
    });
});

The twitter link is like this:

      <a href="https://twitter.com/intent/tweet?url=URLTOBESHARED">Share on Twitter</a>

Reference: https://dev.twitter.com/docs/intents/events

0
votes

Once you open the FB share window, is up to the user to publish the content or not. There is no callback function and it's not possible to know if he has completed the proccess.

You may want to implement a FB connect and create your own form to publish into the user's wall once he has filled the fields (and also you have the option to save them in your DB).

I don't know if Twitter offers the feature that you are requesting, but I would go for the same solution as above.

0
votes

For Facebook, there is an updated Share Dialog with callback (Source: https://developers.facebook.com/docs/sharing/reference/share-dialog)

https://www.facebook.com/dialog/share?
 app_id=145634995501895
 &display=popup
 &href=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2F
 &redirect_uri=https%3A%2F%2Fdevelopers.facebook.com%2Ftools%2Fexplorer

You must provide an app_id, and the redirect_uri must be whitelisted in your App domains.