How to Add a Share to Unlock Download Link in Blogger
Monday, August 8, 2016
What is Share to Unlock Download Link?
Mostly people prefers to have "Share to unlock content" plugins because majority of users just reads your content and leaves your site without sharing it on their social accounts.
With content lockers or share to unlock plugins, you force or ask your users to share your content on social networking sites like Facebook, Twitter or Google+ to get access to the full content or a special downloading link.
Step#1: Install Share to Unlock Download Link
The very first thing you need to do is to take a backup of your Blogger template, just to be on safe side if anything goes wrong. To install Share to unlock download link plugin in your Blogger site, please follow the below instructions correctly:
- Go to Blogger >> Template >> Edit HTML.
- Make sure that your template has a updated version of jquery.min.js file, We need your version to be 1.10.2 or greator. If your template does not have this file then search for <head> and just below it paste the following code: (Note: Make sure there is only one jquery.min.js file because having multiple jquery files with cause it not to run).
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
- Now in the template codes, search for </body> tag and just above it paste the following JavaScript code:
<script type='text/javascript'>
//<![CDATA[
/* 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
});
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>
<style>
.secret {
text-align:center;
display:none
}
.secret-share {
padding: 20px;
text-align: center;
border: 3px solid #ddd;
background: #f8f8f8;
}
a.download-btn {
text-transform: uppercase;
font-size: 22px;
background: #7b7b7b;
padding: 10px 20px;
display: inline-block;
border: 1px solid #000000;
text-decoration: none;
color: #fff;
}
.secret-share .fb-like {
margin-top: 0;
top: -7px;
position: relative;}
.secret-share .twitter-share-button {
margin-right: 25px;
}
</style> - Now once you have pasted the codes correctly, press "Save Template" button. After doing this, you have successfully installed the share to unlock download button plugin in your Blogger template.
Step 2: Add Share to Unlock Download Link in Posts:
To show share to unlock download button in your posts, follow the below instructions correctly:
- Go to Blogger >> Add a New Post.
- Now in the blogger post editor, revert to the HTML tab and paste the following code in the HTML code editor:
<div class="secret">
<a class="download-btn" href="#">Download</a></div>
<div class="secret-share">
<p>Share via Facebook / Twitter / Google Plus to see Link Download</p>
<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="mybloggerlab" 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>
Replace # with your downloading link. If you have some coding knowledge you can customize it even further as per your needs.
Once everything is done, Publish your post and you're done. Now the download link will only appear when users will either share your content on Facebook, Google+ or Twitter.
If you like this plugin then please let us know what are your thoughts about it in the comment section below.