:::: MENU ::::

Tweet post or Facebook like to unlock the content using jQuery

jQuery Social Locker Plugin

Yesterday, I was looking my facebook news feed. Then one of my friend liked Social Locker for WordPress cost $21 per license! So, I thought to implement this simple plugin myself.

tweet-like-to-unlock

Ideas to implement this plugin.

  • Create page with content.
  • Hide important content with hidden div and overlay it with social icons.
  • Once user click one of them, store unique identifier of those hidden content into cookie or localstorage.
  • Show the hidden content.
  • Incase user comeback to page, just read that unique identifier cookie or localstorage and show hidden content to them.

Implementation Social Locker Plugin.

Sample HTML with hidden content

Plugin Initialization

Above code will initialize SocialLocker plugin with hidden <div id=”locked”>

Now init() [i.e. construction private] function

This function will show hidden content if user already twitted or liked the content. If not, It’ll lock the content and bind Facebook and Twitter api events that trigger after user twitted on twitter or like on facebook.

Finally Button overlay code.

So, final jQuery Plugin would be

Download this code – here (don’t forget to change Facebook appid and grant site access to make facebook like button work)

 


7 Comments

  • Reply BHARGAVA |

    hi sir it is supers
    but i didnt know where to install (i.e paste) the code in google blogspot,
    can u please mention in brief where to install the code ,send to my mail ID:[email protected]
    iam eagerly waiting for ur replay ,
    Thanking you sir,.

    • Reply vikaskbh |

      Hi,
      Google Plus button provides data-callback=”callback_function_name” attribute and linkedin button provides data-onSuccess=”callback_function_name” attribute for callback. Try to explore them. Wouldn’t be that tough to plug them in above code.

      Thanks

    • Reply vikaskbh |

      Clear localstorage if you already clicked like button
      ————————————————
      F12 -> Resources -> Local Storage -> domain -> code.vikaskbh.com -> find key share-to-unlock-paragraph-1 and delete

So, what do you think ?

  •