CODEWITHSUNDEEP
wordpressfacebookshareuser-tracking
Sam Skirrow
Sam Skirrow

Reputation: 3697

Track when website users share page on facebook and allocate them points

I've had an idea for my site that I ned some initial direction on as I don't know where to tart looking.

I'm developing a subscription based site, where users can share the site on facebook and tally up points for each share. When they reach a certain number of points, they recieve discount on their subscription.

The site is a wordpress multisite, users have their own account area on my main site where they subscribed - this is where I want to keep a tally of their score (i.e. not on the wordpress admin dashboard).

Can someone please point me in the right direction as to how I track when users share a page and how I would allocate them points each time.

Upvotes: 0

Views: 555

Answers (1)

Sahil Mittal
Sahil Mittal

Reputation: 20753

If you'll be needing a user identifier, i.e. user_id you have to use the Graph API and the user should authenticate your app first to allow publishing on their behalf.

<script>

 window.fbAsyncInit = function() {
 FB.init({
    appId      : '{app-id}',
    status     : true, // check login status
    cookie     : true, // enable cookies to allow the server to access the session
    xfbml      : true  // parse XFBML
  });

FB.getLoginStatus(function(response) {
  if (response.status === 'connected') {
    share(response.authResponse.userID);
  } else if (response.status === 'not_authorized') {
    login();
  } else {
    login();
  }
 });

};

(function(d){
   var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
   if (d.getElementById(id)) {return;}
   js = d.createElement('script'); js.id = id; js.async = true;
   js.src = "//connect.facebook.net/en_US/all.js";
   ref.parentNode.insertBefore(js, ref);
  }(document));


  function login()
  {
    FB.login(function(response) {
      if (response.authResponse) {
         FB.api('/me', function(response) {
            share(response.id);
         });
       } else {
         console.log('User cancelled login or did not fully authorize.');
       }
     },{scope: "publish_stream"});
  }

  function share(id)
  {
     FB.api(
        "/me/feed",
        "POST",
        {
          "object": {
            "message": "This is a test message",
            "link": "{your-website-link}"
          }
        },
        function (response) {
          if (response && !response.error) {
            //make an ajax call and save the update the points wrt userId
          }
        } 
     );
 }
 </script>

<div id="fb-root"></div>

I guess the code is self explanatory.

References: FB.login, FB.getLoginStatus, /me/feed

If you have a user identifier already, you dont need to use the Graph API, instead you can use the Feed Dialog to share that can be done without user authenticating your app.

<script>

window.fbAsyncInit = function() {
    FB.init({
       appId      : '{app-id}',
       status     : true, // check login status
       cookie     : true, // enable cookies to allow the server to access the session
       xfbml      : true  // parse XFBML
     });

   FB.ui({
       method: 'feed',
       link: "{your-website-link}"
   }, function(response){
       // share successful
       //ajax call here to save points
   });

};

(function(d){
  var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
  if (d.getElementById(id)) {return;}
  js = d.createElement('script'); js.id = id; js.async = true;
  js.src = "//connect.facebook.net/en_US/all.js";
  ref.parentNode.insertBefore(js, ref);
 }(document));
</script>
<div id="fb-root"></div>

It had pasted quite a code here since your question was broad. Let me know if you find any difficulty with this.

Upvotes: 1

Related Questions