How to Add Social Content Locker or Share To Unlock In Blogger
 |
How to Add Social Content Locker or Share to unlock in Blogger |
You have a blogger blog with awesome content with your readers love but don't show to you because they don't think how traffic is important for a author. You can increase your blog traffic by using this plugin which will boost your social sharing. Using this plugin you can hide some link which can be unlocked by sharing your post on facebook, twitter or google+. By this way your reader will share your page to his/her friends and there friends share it to there friends. This will defiantly bring a huge amount of traffic to your blog.
DEMO:
The locked content will look like this.
Tricks like this are very useful to strengthen blog position , because sharing to social networking is one of the SEO Optimization because it creates a number of backlinks.
Installation Code/Script
First Go to Dashboard->Themplate->Edit html.
(Backup your theme first.)
Step 1 : Install the jQuery Framework To display and hide the object, needed a touch of jQuery. Therefore, please attach this code above the </head> . If code like this is allready present in your theme you can skip this step or you can replace your theme code with this to update it to the lastest version.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' type='text/javascript'/>
Step 2 : Attach the CSS code above ]]> </ b: skin> or </ style>
.secret {text-align:center; display:none}Step 3 : Attach Script Viewer Button above </body>
.secret-share {padding:20px;text-align:center;border:3px solid #ddd}
If your template already exists in the code something like that, please remove it and replace it with the code above. Do not forget to backup your template first<script type='text/javascript'> //<![CDATA[ /* Social Content Locker by freemag123.blogspot.com*/ (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 }); FB.Event.subscribe('edge.create', function(href, widget) { $.event.trigger({ type: "pageShared", url: href }); }); }; /* 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")); twttr.ready(function (twttr) { twttr.events.bind('tweet', function (event) { $.event.trigger({ type: "pageShared", url: event.target.baseURI }); }); }); /* 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); })(); function plusOned(obj){ console.log(obj); $.event.trigger({ type: "pageShared", url: obj.href }); } /* Listen for the pageShared event */ $(document).on('pageShared',function(e){ if(e.url == window.location.href){ $(".secret").show(); $(".secret-share").hide(); } }); //]]> </script>
Writing in the Post
To bring up the Like button, Tweet or Google Plus and also the object (download link) then the format of the post like this (written in HTML mode instead Compose):
<div class="secret">
Link are hidden here</div>
</div>
<div class="secret-share">
Share Via Facebook/Twitter/Google Plus To see Download Link<br/>
<span class="fb-like" data-layout="button_count" data-send="false" data-show-faces="false" data-width="90" expr:data-href="data:post.url" style="margin-right: 25px;"></span><a class="twitter-share-button" data-count="horizontal" data-related="" data-via="Freemag123" expr:data-text="data:post.title" expr:data-url="data:post.url" href="http://twitter.com/share">Tweet</a><span class="g-plusone" data-callback="plusOned" data-count="true" data-size="medium" expr:data-href="data:post.url"></span></div>
All Done. Don't Forgot To share this post with your friends because sharing is caring.
