Skip to main content

How to Add a Share to Unlock Download Link in Blogger

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.

Comments

Popular posts from this blog

Top 4 Best Email Marketing Tools to build your blog Audience

You can either make one time sales, or you can accumulate wealth, wealth disguised as Emails, and keep making money forever, your choice.  If you passed your 5th grade in one go, I'd say you're smart enough to go with option #2. Well, that's a good choice. But people won't just give you their E-mails, right? You need to have a system in place, to scrape it off of them, without pissing them off, so that they actually pay attention to your Emails in their inboxes. Now, you can use a variety of tools for the task. But what makes most of the impact is, the design. That's what people notice before they notice anything else, ofcourse you need to have advanced options too. In this article, we will show you the top 4 best Email marketing tool to build your blog audience so you can make most of every user. 1. GetResponse: The reason for me listing GetResponse right at the top is pretty simple. Cause, it's the best. As far as feature, service and the price is concerned. ...

Watch LIVE | Polls Closed | NA120 Election

LIVE POLLS RESULT NOW STREAMING