shareIt.js – Create a Social Content Locker in Blogger Blog

If you are wondering how to create a social content locker for blogger blog then you have landed on right website because in this Article I will write about How to Create a Social Content Locker in Blogger Blog.

Some of my readers are facing problem in adding shareIt.js Social Content Locker in their Blogger blog and they requested to create a separate tutorial on how to add this Social Content Locker in their Blogger blog.

If you don’t know about shareIt.js, then let me introduce you. It’s a Social Content Locker jQuery Plugin. With shareIt, you can lock anything in your Blog Content and the Content will be automatically unlocked when user shares your Content on Social Media using any of the social buttons.

View Demo

ShareIt has helped me to boost my Social Presence and has Increased my Social Media Followers to a very good extent. You can also make your blogger blog go Viral. Your users need to share your Content to access your Premium Contents.

http://www.youtube.com/watch?v=XzWKz0lzsYA

Features of shareIt.js

Here’s the list of features shareIt gives you:

  1. It is Free to Use. Yes! shareIt.js is completely free Social Content locker.
  2. Facebook Like Button. You can add Any URL to like button. For Example: You can use your Facebook Page URL to get real Followers.
  3. Facebook Share Button. You can use your Blog Post URL to make it viral.
  4. Twitter Follow Button. You can use your Twitter Username to Increase your Twitter Followers.
  5. Twitter Tweet Button. You can use your Blog Post URL to make it trending topic on twitter.
  6. LinkedIn Share Button.
  7. Google +1 Button.
  8. Social Share Counter with Each Social Button. Except Twitter tweet button, because twitter has disabled its tweet counter api.

Things Required

You can Read the Official shareIt.js Tutorial to know about the Required Things, such as Facebook App Id, Google API Key.

Add Social Content Locker in Blogger

First of all You need to Go to your Blogger Template Editor  to add the shareIt.js script and stylesheet.

Step #1: Login to Your Blogger Dashboard.

Step #2: Select Your Blog(From the Given list).

Step #3: Click on Template menu from the Left side of Menu Panel.

Step #4: Click on Edit HTML next to Customize Button below Your Template Thumbnail.

Now, as you came to your Blog Template Editor, follow the below step to Add the Social Content Locker in your Blogger Blog.

Step #1: Search for </head> in the HTML Code.

Step #2: Add the Below JavaScript and CSS Code just above </head>.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript">
//<![CDATA[
(function($){$.fn.shareIt=function(options){var HTMLtoHide=false;var rand=Math.floor((Math.random()*1000)+1);var settings=$.extend({title:"Share/Like/Follow to Download",id:Math.floor((Math.random()*1000)+1),text:"Choose Any Social Social Network from below to share our content and Download it.",buttons:["facebook_like","facebook_share","twitter_follow","twitter_tweet","googleplus","linkedin"],linkedIn:{url:window.location.href},facebook:{appId:676027382527018,pageId:"https://www.facebook.com/MyCodingTricks",url:window.location.href},twitter:{via:"mycodingtricks",url:window.location.href,text:document.title},googleplus:{apikey:"AIzaSyD_H_TgxVsG0jMy6dMTKjkhHilxIk_bQBk",url:window.location.href},count:{twitter:{tweets:0,follower:rand},facebook:{likes:0,share:0},googleplus:{circledByCount:0},linkedIn:{shares:0}},timeout:0,close:false,cookie:true,cookieExpiry:30,},options);this.settings=settings;this.each(function(){if(getCookie("mct_shareIt_hide_"+settings.id)=="true"){$(this).fadeIn();return false}var elem=$(this);var con="<div class='mct_shareit_container mct_shareit' id=mct_shareit_container_"+settings.id+"><div class='mct_shareit_blur'></div><div class='mct_shareit_content'><h1 class='mct_shareit_title'>"+settings.title+"</h1><h3 class='mct_shareit_subtitle'>"+settings.text+"</h3><div class='mct_shareit_buttons' id=mct_shareit_content_"+settings.id+"><div class='mct_twitter_tweet mct_margin_top' id=mct_twitter_tweet_"+settings.id+"><a href='https://twitter.com/intent/tweet?via="+settings.twitter.via+"&text="+encodeURIComponent(settings.twitter.text)+"&url="+encodeURIComponent(settings.twitter.url)+"' class='mct_shareit_button twitter' data-service='twitter-tweets'><span class='mct_shareit_button_title'>Tweet</span><div class=mct_shareit_button_count><i>0</i></div></a></div><div class='mct_twitter_follow mct_margin_top' id=mct_twitter_follow_"+settings.id+"><a href='https://twitter.com/intent/follow?screen_name="+settings.twitter.via+"' class='mct_shareit_button twitter' data-service='twitter-followers'><span class='mct_shareit_button_title'>Follow</span><div class=mct_shareit_button_count><i>"+settings.count.twitter.follower+"</i></div></a></div><div class='mct_facebook_share mct_margin_top' id=mct_facebook_share_"+settings.id+"><a class='mct_shareit_button fb' data-service='facebook_share'><span class='mct_shareit_button_title'>Share</span><div class=mct_shareit_button_count><i>0</i></div></a></div><div class='mct_facebook_like mct_margin_top' id=mct_facebook_like_"+settings.id+"><a href='"+settings.facebook.pageId+"' class='mct_shareit_button fb' data-service='facebook_like'><span class='mct_shareit_button_title'>Like</span><div class=mct_shareit_button_count><i>0</i></div></a></div><div class='mct_googleplus mct_margin_top' id=mct_googleplus_"+settings.id+"><a href='javascript:void(0);' class='mct_shareit_button google-plus' data-service='googleplus'><span class='mct_shareit_button_title'>Follow</span><div class=mct_shareit_button_count><i>0</i></div></a></div><div class='mct_linkedin mct_margin_top' id=mct_linkedin_"+settings.id+"><a href='javascript:void(0);' class='mct_shareit_button linkedin' data-service='linkedin'><span class='mct_shareit_button_title'>Share</span><div class=mct_shareit_button_count><i>0</i></div></a></div></div><div id=\"mct_shareit_msg_"+settings.id+"\" class='mct_shareit_msg'></div></div></div>";HTMLtoHide=elem.html();elem.html(con);elem.fadeIn();showButtons();getCount();initContainer();$("#mct_shareit_msg_"+settings.id).html("Powered By <a href='http://mycodingtricks.com/jquery/shareit-js-social-content-unlocker/' target=_blank><strong>My Coding Tricks</strong></a>");if(settings.timeout!=0){setTimeout(function(){showContent("timeout","Content Shown",window.location.href)},settings.timeout)}});this.angry=angry;this.getID=function(){return settings.id};this.showContent=function(s,v){showContent(s,v)};this.trackMctGoogle=function(data){if(data.state=="on"){showContent("Google","Plusone",settings.googleplus.url)}else{angry()}};var $this=this;function convertNumber(n){if(n>=1000000000){return(n/1000000000).toFixed(1)+"G"}if(n>=1000000){return(n/1000000).toFixed(1)+"M"}if(n>=1000){return(n/1000).toFixed(1)+"K"}return n}function setCookie(name,value,expirydays){var d=new Date();d.setTime(d.getTime()+(expirydays*24*60*60*1000));var expires="expires="+d.toUTCString();document.cookie=name+"="+value+"; "+expires}function getCookie(name){name=name+"=";var cookies=document.cookie.split(";");for(var i=0;i<cookies.length;i++){var cookie=cookies[i];while(cookie.charAt(0)==" "){cookie=cookie.substring(1)}if(cookie.indexOf(name)==0){return cookie.substring(name.length,cookie.length)}}return""}function initContainer(){var $this=this;$(window).resize(centerContainer);centerContainer();if($this.timeout>0&&typeof timeout!="undefined"){setTimeout(function(){$this.showContent("Timeout","Hide",window.location.href)},$this.timeout)}if($this.close===true&&typeof $this.close!="undefined"){$("#mct_shareit_container_"+settings.id).find(".mct_shareit_content").prepend("<a onclick='javascript: mct_shareit_container_"+settings.id+"();' class='mct_close'>&times;</a>")}}function centerContainer(){var container=$("#mct_shareit_container_"+settings.id),self=container.find(".mct_shareit_content"),width=self.innerWidth(),cwidth=container.width(),height=self.innerHeight(),cheight=container.height();self.css("left",(cwidth-width)/2).css("top",(cheight-height)/2)}function trackShareItGooglePlus(data){if(data.state=="on"){$this.showContent("G+","+1",$this.settings.googleplus.url)}else{$this.angry()}}function closeShareIt(){$this.showContent("Close","Hidden",window.location.href)}function trackShareItLinkedIn(){$this.showContent("LinkedIn","Share",$this.settings.linkedIn.url)}eval("window.mct_shareit_linkedin_"+rand+"=trackShareItLinkedIn");eval("window.mct_shareit_googleplus_"+rand+"=trackShareItGooglePlus");eval("window.mct_shareit_close_"+rand+"=closeShareIt");function getCount(){$.getJSON("http://cdn.api.twitter.com/1/urls/count.json?url="+settings.twitter.url+"&callback=?",function(d){settings.count.twitter.tweets=d.count;$("#mct_twitter_tweet_"+settings.id).find(".mct_shareit_button_count i").text(convertNumber(settings.count.twitter.tweets))});$.getJSON("https://cdn.syndication.twimg.com/widgets/followbutton/info.json?screen_names="+settings.twitter.via+"&callback=?",function(d){settings.count.twitter.follower=d[0]["followers_count"];$("#mct_twitter_follow_"+settings.id).find(".mct_shareit_button_count i").text(convertNumber(settings.count.twitter.follower))});$.getJSON("https://api.facebook.com/method/fql.query?format=json&query=SELECT+total_count+FROM+link_stat+WHERE+url+%3D+%27"+encodeURIComponent(settings.facebook.url)+"%27&callback=?",function(d){settings.count.facebook.share=d[0].total_count;$("#mct_facebook_share_"+settings.id).find(".mct_shareit_button_count i").text(convertNumber(settings.count.facebook.share))});$.getJSON("https://api.facebook.com/method/fql.query?format=json&query=SELECT+like_count+FROM+link_stat+WHERE+url+%3D+%27"+encodeURIComponent(settings.facebook.pageId)+"%27&callback=?",function(d){settings.count.facebook.likes=d[0].like_count;$("#mct_facebook_like_"+settings.id).find(".mct_shareit_button_count i").text(convertNumber(settings.count.facebook.likes))});$.getJSON("https://www.linkedin.com/countserv/count/share?url="+settings.linkedIn.url+"&format=jsonp&callback=?",function(data){settings.count.linkedIn.shares=data.count;$("#mct_linkedin_"+settings.id).find(".mct_shareit_button_count i").text(convertNumber(settings.count.linkedIn.shares))});var GooglePlusdata={method:"pos.plusones.get",id:settings.googleplus.url,params:{nolog:true,id:settings.googleplus.url,source:"widget",userId:"@viewer",groupId:"@self"},jsonrpc:"2.0",key:"p",apiVersion:"v1"};$.ajax({type:"POST",url:"https://clients6.google.com/rpc",processData:true,contentType:"application/json",cache:true,data:JSON.stringify(GooglePlusdata),success:function(r){settings.count.googleplus.circledByCount=r.result.metadata.globalCounts.count;$("#mct_googleplus_"+settings.id).find(".mct_shareit_button_count i").text(convertNumber(settings.count.googleplus.circledByCount))}})}function showButtons(){for(var i=0;i<settings.buttons.length;i++){$("#mct_"+settings.buttons[i]+"_"+settings.id).show();switch(settings.buttons[i]){case"facebook_like":case"facebook_share":checkFB();break;case"twiter_follow":case"twitter_tweet":checkTwitter();break;case"googleplus":checkGP();break;case"linkedin":loadIN();break}}}function loadIN(){addIN();if(typeof(IN)!="undefined"){IN.parse()}else{$.getScript("http://platform.linkedin.com/in.js")}}function addIN(){$("#mct_linkedin_"+settings.id).find(".mct_shareit_button_title").html('<script type="IN/Share" data-url="'+settings.linkedIn.url+'"  data-onSuccess="mct_shareit_linkedin_'+rand+'" data-onsuccess="mct_shareit_linkedin_'+rand+'" data-success="mct_shareit_linkedin_'+rand+'"><\/script>')}var LinkedInShare=function(){showContent("LinkedIn","Share",settings.linkedIn.url)};function checkFB(){$("#mct_facebook_like_"+settings.id).find(".mct_shareit_button_title").html('<div class="fb-like" data-href="'+settings.facebook.pageId+'" data-layout="button" data-action="like" data-show-faces="false" data-width="50px" data-share="false"></div>');if(typeof FB=="undefined"){var intw=setInterval(function(){loadFB();if(typeof FB!="undefined"){clearInterval(intw)}},5000)}else{trackFB()}}function trackFB(){if($("#mct_facebook_share_"+settings.id).length>0){$("#mct_facebook_share_"+settings.id).click(function(){FB.ui({method:"share",href:settings.facebook.url,},function(response){if(response&&!response.error_code){showContent("Facebook","Share",settings.facebook.url)}})})}FB.XFBML.parse();FB.Event.subscribe("edge.create",function(response){showContent("Facebook","Like",settings.facebook.pageId)});FB.Event.subscribe("edge.remove",function(response){angry()})}function loadGP(){$.getScript("https://apis.google.com/js/platform.js",function(){trackGP()})}function checkGP(){if(typeof gapi=="undefined"){var intw=setInterval(function(){loadGP();if(typeof gapi!="undefined"){clearInterval(intw)}},5000)}else{trackGP()}}function trackGP(){$("#mct_googleplus_"+settings.id).find(".mct_shareit_button_title").html("<g:plusone></g:plusone>");gapi.plusone.render($("#mct_googleplus_"+settings.id).find(".mct_shareit_button_title").get(0),{href:settings.googleplus.url,annotation:"none",callback:"mct_shareit_googleplus_"+rand,width:"100"})}var ajaxFB=false;function loadFB(){if(!ajaxFB){$.ajaxSetup({cache:true});$.getScript("http://connect.facebook.net/en_US/all.js",function(){FB.init({appId:settings.facebook.appId,version:"v2.3",});trackFB()});ajaxFB=true}}function checkTwitter(){if(typeof window.twttr=="undefined"){var inter=setInterval(function(){loadTwitter();if(typeof window.twttr!="undefined"){twttr.ready(function(twttr){twttr.widgets.load();trackTwitter();clearInterval(inter)})}},2000)}}function loadTwitter(){$.getScript("http://platform.twitter.com/widgets.js")}function trackTwitter(){twttr.ready(function(twttr){twttr.events.bind("tweet",function(){showContent("Twitter","Tweet",settings.twitter.url)});twttr.events.bind("follow",function(){showContent("Twitter","Follow",settings.twitter.via)})})}function showContent(service,action,url){if(typeof(_gaq)!=="undefined"){_gaq.push(["_trackSocial",service,action,url]);console.log("Pushed : "+url)}var ss=$("#mct_shareit_container_"+settings.id);var pr=ss.parent();ss.fadeOut(1000,function(){pr.html(HTMLtoHide).fadeIn();if(settings.cookie==true){setCookie("mct_shareIt_hide_"+settings.id,"true",settings.cookieExpiry)}})}function angry(){$("#mct_shareit_msg_"+settings.id).html("You don't like Us?").addClass("error")}return this}})(jQuery);
//]]>
</script>
<style>.mct_shareit_locker{display:none}.mct_shareit{font-family:Arial,Verdana;max-width:720px;overflow:hidden;min-height:301px;text-align:center;width:100%;box-sizing:border-box;position:relative;margin:10px auto;background:transparent}.mct_shareit *{box-sizing:border-box;transition:all 1s cubic-bezier(1,0.86,0.38,-0.15)}.mct_shareit_content{overflow:hidden;max-width:600px;color:#000;margin:0 auto;background:#fff;border:1px solid rgba(0,0,0,0.29);min-height:300px}.mct_close{float:right;text-decoration:none;padding:2px 8px;background:rgba(0,0,0,0.78);color:#fff;font-weight:bold;font-size:20px;cursor:pointer;line-height:25px}.mct_shareit_content h1,.mct_shareit_content h3{color:#000}.mct_shareit_buttons{padding:10px;height:auto;width:100%;position:relative}.mct_shareit_button{text-decoration:none;position:relative;box-sizing:border-box;border:1px solid rgba(0,0,0,0.2);color:#FFF;background:#ccc;height:36px;vertical-align:baseline;margin-top:63px;min-width:70px;max-width:100px;text-align:center;margin-right:10px;padding:8px;cursor:pointer}.mct_shareit_button div{display:inline}.mct_shareit_button>span{line-height:33px;height:100%;padding:10px;position:relative;display:inline}.mct_shareit_button_count{position:absolute;top:-63px;display:inline;left:0;border:1px solid #e6e6e6;width:100%;color:#2d2d2d;background:#fff;border-radius:5px;padding:2px;text-align:center;height:50px;line-height:40px}.mct_shareit_button_count:after{content:"";width:0;height:0;border-left:9px solid transparent;border-right:0 solid transparent;border-top:9px solid #FFF;position:absolute;left:20px;bottom:-9px}.mct_shareit_button_count:before{content:"";width:0;height:0;border-left:12px solid transparent;border-right:0 solid transparent;border-top:12px solid #e6e6e6;position:absolute;left:18.2px;bottom:-12px}.mct_shareit_blur{position:absolute;left:0;top:0;width:100%;background:rgba(0,0,0,0.04);height:100%;-webkit-filter:blur(82px);filter:blur(10px);-moz-filter:blur(10px);-o-filter:blur(10px)}.mct_shareit_button.fb{background:#3b5998}.mct_shareit_button.twitter{background:#00acee}.mct_twitter_tweet,.mct_twitter_follow{display:none}.mct_shareit_button.google-plus{background:#db4a39}.mct_shareit_button.linkedin{background:#0e76a8}.mct_margin_top{margin-top:70px;display:none;float:left}.mct_shareit_button_title .fb-like{left:0;top:-10px}.mct_shareit_msg{display:block;margin-top:10px;text-align:center;font-size:11px;position:absolute;bottom:0;padding:5px;width:100%;max-width:601px;line-height:30px}.mct_shareit_msg a{text-decoration:none;font-weight:bold;color:#f00}.mct_shareit_msg.error{background:red;color:#fff}.mct_shareit_msg.error a{color:[email protected] screen and (max-width:720px){.mct_shareit_content,.mct_shareit_msg{position:static;display:inline-block}}</style>

Now, You have Added the ShareIt.js Social Content Locker in your Blogger Blog and now you need to initialize the content locker to use in your blogger blog.

Step #3: Add the Blow Code just above to Initialize the shareIt.js jQuery Plugin.

<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
var options = {
        title: "Share/Like/Follow to Download", //Heading of Content Locker
        text: 'Choose Any Social Social Network from below to share our content and Download it.', //Subheading of Content Locker
        facebook:{
            url: window.location.href,  //Your Content Page Url
            pageId: "https://www.facebook.com/MyCodingTricks",  //Your Facebook Page Url
            appId: 676027382527018  //Your Facebook App ID
        },
        twitter:{
            via: 'mycodingtricks', //Your Twitter Username
            url: window.location.href,
            text: document.title
        },
        googleplus:{
            apikey: 'AIzaSyD_H_TgxVsG0jMy6dMTKjkhHilxIk_bQBk', //Google App API key
            url: window.location.href,
        },
        linkedIn:{
            url: window.location.href
        },
        buttons:["facebook_share","facebook_like","twitter_tweet","twitter_follow","googleplus","linkedin"]
    };
 
$(".mct_shareit_locker").shareIt(options);
});
//]]>
</script>

Now Edit the Following things from the Above Code before adding it.

  • https://www.facebook.com/MyCodingTricks : Replace it with Your Facebook Page URL.
  • mycodingtricks : Replace it with Your Twitter Username.

Now, When You add a New Blog Post in Your Blogger Blog, and wants to hide some Content, then use the Below Code to use Social Content Locker to hide your Premium Content.

<div class="mct_shareit_locker">

<!--YOUR CONTENT TO HIDE INSIDE CONTENT LOCKER GOES HERE-->

</div>

That’s all.

View Demo

Conclusion

I have created this plugin for you and myself. I wanted to increase my social presence and so you. I would like to get your Feedback on this plugin. Please share your feedback through comment.

Shubham Kumar

Hey, I am Shubham and i love Blogging, Coding and exploring new things and obviously sharing my experience with you.

You may also like...

14 Responses

  1. Can we also add a Lock that can only be unlocked by Whatsapp Share??

  2. John Olufemi says:

    Then the counters arent working.
    Its still stucked in the ‘0’ despite being shared/tweeted

  3. John Olufemi says:

    Hey bro,
    I have got two critical issues to report.
    1. This. content locker isn’t. opening on mobile. most. especially opera. I have tried different opera browsers now. I guess it’s not formatted for mobile browsers right.

    2. However on PC, each time I want to share, the content locker would have been unlocked even before I clicked share. I Thor I should have been so after I had successfully shared.

    Then I would have loved we get more theme options for this, like secret, flat et al. for this.

    Hoping to read from you.

  4. Fmbaba says:

    Bro
    Many thanks for this. I really appreciate.
    However i want to do a facebook, linkedn share and also twitter tweet of specific post.

    I think this post only addressed sharing the entire blog and not specific post in the blog.

    Or am i missing something. Please i need some education here, im a novice.

    You can also copy your response to my email. I will appreciate that.

  5. Marcos says:

    Hello:
    Error
    The parameter app_id is required.

    • Hi Marcos,

      I have mentioned above in the tutorial that you will need to have Facebook App Id under the Things Required heading.

      Read the complete documentation of ShareIt.js on its official page.

      http://mycodingtricks.com/jquery/shareit-js-social-content-unlocker/

      Read this article to know how to get Facebook app Id : http://mycodingtricks.com/jquery/shareit-js-social-content-unlocker/#Facebook_APP_ID

      And after getting the Facebook app Id use the below JavaScript after editing the options value.

      var options = {
              title: "Share/Like/Follow to Download", //Heading of Content Locker
              text: 'Choose Any Social Social Network from below to share our content and Download it.', //Subheading of Content Locker
              facebook:{
                  url: window.location.href,  //Your Content Page Url
                  pageId: "https://www.facebook.com/MyCodingTricks",  //Your Facebook Page Url
                  appId: 676027382527018  //Your Facebook App ID
              },
              twitter:{
                  via: 'mycodingtricks', //Your Twitter Username
                  url: window.location.href,
                  text: document.title
              },
              googleplus:{
                  apikey: 'AIzaSyD_H_TgxVsG0jMy6dMTKjkhHilxIk_bQBk', //Google App API key
                  url: window.location.href,
              },
              linkedIn:{
                  url: window.location.href
              },
              buttons:["facebook_share","facebook_like","twitter_tweet","twitter_follow","googleplus","linkedin"]
          };
      

      Replace 676027382527018 with your Facebook App id and ‘AIzaSyD_H_TgxVsG0jMy6dMTKjkhHilxIk_bQBk‘ with your Google API Key.

      Thanks
      Shubham

Leave a Reply

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