How to Add a Share to Unlock Download Link in Blogger

Advertisements
How to Add a Share to Unlock Download Link in Blogger
In the past, we have already shown you how to create a social content locker in Blogger. Content lockers plays a significant role in not only increasing your social traffic but also helps in improving your pretense on social networks. Recently, one of our users asked us about how to add a share to unlock download link in blogger? In short, with these content lockers you're forcing your users to share your content to get the downloading link of a certain file. In this article, we will show you how to create a share to unlock download link in Blogger.

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.

You can check the demo if this widget here.

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: 

  1. Go to Blogger >> Template >> Edit HTML.
  2. 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'/>

  3. 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>
  4. 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:
  1. Go to Blogger >> Add a New Post.
  2. 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.
Advertisements

The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).

Comment With:
OR
Choose Wisely!

2 comments

September 4, 2016 at 3:56 PM

My link do not appeared to my visitors after they share my content ... whats the problem please ?

Editorial Team MOD
September 7, 2016 at 7:20 AM

Can you share me the URL of the page where you have added this?

Post a Comment

We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.

Helping You to do Cool Things With Blogger Since 2012™.

© Copyright 2012 - 2016. MBL Networks, All Rights are Strictly Reserved.