Pinterest Stumbleupon Whatsapp
Ads by Google

featured-like-meGoing viral used to mean a disease epidemic, but now it’s something all content creators crave. You could rely on the quality of your content alone – if it’s good enough, people will share it, right? Maybe. But you could also help things along a little by offering something extra of value to those who do share – a coupon, a download, a smiley face sticker in the mail, or a stock image of a cute kitten. Today I’ll show you how to create your own like/tweet/+1 to unlock system with a little jQuery and the native APIs.

This method is for people who have their own websites and would like the unlock mechanism on there. If you’re looking to do this on your Facebook page, the basic Facebook fan gate tutorial Like To Unlock: How To Build A Basic Facebook Fan Gate Without Paying For Hosting Like To Unlock: How To Build A Basic Facebook Fan Gate Without Paying For Hosting One incredibly effective use of a Facebook hosted brand page is to incentivise people to like the page by creating some secret members-only content; commonly referred to as a "fan gate". Facebook has also partnered... Read More may be more useful.

How It Works

We’ll be loading a set of buttons from the various networks and attaching to their respective events or callbacks to indicate when something was shared. A callback is a function that runs when something else has finished, usually passed in as a parameter to another function. When using jQuery AJAX for example, a success callback is run when the AJAX query has been successful – it does something with the returned data, like acknowledging receipt of form data. We’ll also be using events – which are a little more complex, but out of the scope of this tutorial. We’ll then trigger our own event, which contains the code to reveal one or more secret parts of the page. For our purpose, just hiding a bit of content and revealing it should be sufficient, but you could adjust this to be a little more secure that loads via AJAX or similar.

Requirements:

  • jQuery should already be included and loading in the header of your page. I’m not going to cover that today.
  • You should know how to include Javascript on the page, whether that be through inline script tags or in a separate .JS file linked in the header.

Basic Share Buttons

Let’s start by loading a basic set of share buttons on the page. There are two parts to this, firstly to load the JS for the buttons (we’re using asynchronous version of these to avoid blocking the page load). Here’s the codes from all three networks – you needn’t separate these into little snippets, they can all go together in one JS file.

 
/* Facebook */
(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/all.js";
     fjs.parentNode.insertBefore(js, fjs);
 }(document, 'script', 'facebook-jssdk'));

window.fbAsyncInit = function() {
    // init the FB JS SDK
    FB.init({
      status     : true,                                
      xfbml      : true                                 
    });
};

/* Twitter */
  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"));

/* Google Plus */
(function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();

Next, place these where you like the buttons to appear:

Ads by Google
<fb:like send="false" width="95" show_faces="true" layout="box_count" font="verdana"></fb:like>
<a href="https://twitter.com/share" data-via="w0lfiesmith" data-count="vertical"></a>
<g:plusone size="tall" callback="plusOned"></g:plusone>

Remember to change the data-via attribute to your own Twitter user. Also, note the presence of a callback parameter on the plusOne button – there is no event to attach to here, just a callback when the button is clicked.

Finally, create a new CSS class definition for “.hidden“, and set the display:none property for it. Anything you want to hide until shared should go in here.

Make sure your buttons are loading at this point.

basic-buttons

Attaching To Share Events

Here’s the real magic. Let’s start with Facebook. After the FB.init function, use FB.Event.subscribe as follows:

 
FB.Event.subscribe('edge.create', function(href, widget) {
        $.event.trigger({
            type: "pageShared",
            url: href
        });
 });

Here we’re asking to listen to the edge.create event (fired when a user likes the page). We’re then triggering our own jQuery event that I’ve called pageShared, and passing in the href value as the URL that was shared. We’ll be checking this later. Your complete Facebook button code should now look like:

 
window.fbAsyncInit = function() {
    // init the FB JS SDK
    FB.init({
      status     : true,                                
      xfbml      : true                                 
    });

    FB.Event.subscribe('edge.create', function(href, widget) {
        $.event.trigger({
            type: "pageShared",
            url: href
        });       
    });
};

Next, Twitter. twttr.events.bind is used here (you can attach to a follow event too if you like), but the important thing to remember is that these all need to be wrapped in the twttr.ready callback. Again, we’re triggering the same jQuery pageShared event, passing in the correct variable to represent URL that was shared.

 
twttr.ready(function (twttr) {
    twttr.events.bind('tweet', function (event) {
        $.event.trigger({
            type: "pageShared",
            url: event.target.baseURI
        });
    });
});

Finally, Google Plus. Remember earlier I explained that there are no events for plusOne, so instead we’ve specified a callback function. Let’s now create that function and trigger the pageShared event from there.

 
function plusOned(obj){
     $.event.trigger({
         type: "pageShared",
         url: obj.href
     });
}

Show Me The Money

Finally, we need to attach to our custom pageShared event as follows:

 
/* Listen for the pageShared event */
$(document).on('pageShared',function(e){
       if(e.url == window.location.href){
                $(".secret").show();
       }
});

Very simply, if the URL passed in is the same as the current page, we show the secret content to the user. In the example I made, a kitten. You lucky people!

unlocked-kitten

I’m Lazy. Can I Download Your Complete Demo?

To download the complete demo file for this tutorial – yep, you guessed it – just share the page using the buttons on the side there and the download link will be magically revealed to you.

Problems with the code? Let me know in the comments, but a liberal dollop of console.log will help you to understand what objects are being passed back to you and the secrets they contain; and be sure to use the exact button codes supplied here, as some formats (like iFrame) don’t work with these events.

  1. tom
    June 28, 2016 at 12:33 pm

    where can i find the download? .... i already liked your page but there's no download visible

    • James Bruce
      June 28, 2016 at 1:29 pm

      This is three years old now, so I'm afraid it no longer works. Apart from which, this practice is now against the terms of service, so you shouldn't use it anyway.

  2. Manny
    June 22, 2016 at 11:16 am

    Can't find the download link

  3. Fazri
    January 19, 2016 at 4:15 am

    how to fanspage like ? to unlock i need it. please
    explain master

  4. Zaheer Hussain
    November 14, 2015 at 5:49 pm

    Where is the downloading link please

  5. Dan
    November 18, 2013 at 1:03 am

    This is an awesome article! I know it's a bit old but I had a quick question, anyway to make all 3 required? Kind of like this company does here : http://superglued.com/masonjennings#_=_

    • James B
      November 18, 2013 at 9:24 am

      Sure. Define three new globals (somewhere at the start of the code), like:

      facebokShared = false;
      googleShared = false;
      twitterShared = false;

      Then inside of each respective share event listener, set those to "true". For example, inside the plus one event, before trigger our custom event, you would put:

      googleShared = true;

      Now, in the custom event coding, replace the URL check statement with

      if(googleShared && twitterShared && facebookShared)

      So the secret.show() funciton will only be called if all of the networks have been shared.

      Got it?

  6. HackYa
    November 12, 2013 at 10:48 am

    You are like the funniest developer I've encountered. (I mean that in a good way.)

  7. SJeev
    November 2, 2013 at 4:38 am

    Hello,

    I don't know if i am missing something, but I can't see the share buttons for this article to get the demo file downloaded. Could any one help me with that?

  8. Brennan
    October 29, 2013 at 8:27 pm

    Hello, I have included the Javascript and everything but my buttons do not appear?
    What would most likely be the problem?

    • James B
      October 29, 2013 at 8:30 pm

      Did you download the demo files and compare to those? That would be the easiest. Otherwise, please post a URL so I can check out the source.

    • Brennan
      October 29, 2013 at 10:36 pm

      Well, that was my bad. I didn't download the demo files and I placed the JavaScript in the wrong location.

      The Twitter and Google + are working fine but the Facebook button doesn't even show up. I even tried coping and pasting the code. What am I missing?

    • James B
      October 30, 2013 at 8:38 am

      Please share a URL where I can check your code and error console. I really can't say what you're doing wrong without seeing anything.

  9. James
    September 22, 2013 at 2:30 pm

    My question in other words... Can I identify a url for the +1 button and a fan page for FB button? I tried to add some tags like "href" for +1 and "data-href" for FB but the result was that the hidden div refused to appear. pls help.

    • James B
      September 23, 2013 at 8:03 am

      This line:

      if(e.url == window.location.href){

      checks if the URL that was shared is the same as the current URL in the browser. So that's why it isn;t showing. You would need to adjust that to either manually specify a URL, or just trust the logic and remove the check completely. So try:

      /* Listen for the pageShared event and ignore URL */
      $(document).on('pageShared',function(e){
      $(".secret").show();

      });

      or

      /* Listen for the pageShared event and check for specific URL as well*/
      $(document).on('pageShared',function(e){
      if(e.url == window.location.href || e.url == "http://yourfacebookfanpageurl.com"){
      $(".secret").show();
      }
      });

      instead.

    • Mahmoud M
      September 23, 2013 at 2:13 pm

      Unfortunately, I tried all codes above but still have the problem

    • James B
      September 23, 2013 at 2:49 pm

      Please share you code, Mahmoud. It's unlikely you have the same problem as this user.

  10. James William
    September 22, 2013 at 2:10 pm

    Too long time to have comments moderated

  11. James William
    September 22, 2013 at 1:49 pm

    Your system hide any html codes! I'll remove the close">" from the following codes
    <g: plusone href="http://refinerypedia.blogspot.com&quot; size="tall" callback="plusOned"
    </g: plusone
    <fb: like data-href="https://www.facebook.com/Refining&quot; send="false" width="95" show_faces="true" layout="box_count" font="verdana"
    </fb: like

  12. James William
    September 22, 2013 at 1:26 pm

    Good job! But I just want to edit the buttons Google + and Facebook to be
    <g:plusone href="http://refinerypedia.blogspot.com&quot; size="tall" callback="plusOned"</g:plusone
    <fb:like data_href="https://www.facebook.com/Refining&quot; send="false" width="95" show_faces="true" layout="box_count" font="verdana"" from the codes to pass your security system.

  13. James William
    September 22, 2013 at 1:21 pm

    Good job! But I just want to edit the buttons Google + and Facebook to be

    Every time I try to make those little changes, the hidden Div refuses to appear. Any idea?

    • James B
      September 22, 2013 at 1:39 pm

      Can you paste your code somewhere? Kind of difficult to tell you whats wrong without actually seeing it.

  14. Nurlan
    August 15, 2013 at 6:24 pm

    You are a liar!!!

  15. Nurlan
    August 15, 2013 at 6:23 pm

    You are a liar!!! (test.html)

    • MakeUseOf TechGuy
      August 15, 2013 at 6:58 pm

      Excuse me? Care to elaborate on what you're having issues with before you start throwing abuse my way?

  16. Salim B
    July 13, 2013 at 11:25 am

    the test.html file is corrupt it is 144 bytes only and an empty html file

    • MakeUseOf TechGuy
      July 13, 2013 at 12:00 pm

      You're right, sorry - reuploaded, should be fine now.

    • Mehul
      July 17, 2013 at 4:54 am

      No James. still it is "0" byte file. please re check. thanks

    • MakeUseOf TechGuy
      July 17, 2013 at 6:53 am

      Gyyaaaa, sorry - that's the CDN cached copy! Try now, I've cleared the cache...

  17. TechnoAngina
    July 12, 2013 at 7:48 pm

    Wow, this is actually really surprisingly useful! Thanks!

Leave a Reply

Your email address will not be published. Required fields are marked *