Share to Unlock The Download Button

7 comments
Share to Unlock The Download Button
Share to Unlock The Download Button , maybe my friend often find words like that. This means that the download link will appear after click on Facebook Like / Tweet or Recommend on Google Plus. Links are hidden usually premium link. Very reasonable, a download link exchanged with like, tweet or recomend on Google+. More concretely looks like the picture below:
Share to Unlock The Download Button
Tricks like this are very useful to strengthen its position in the SERP your blog, because sharing to social networking is one of the SEO Optimization. For my friend who wants to pursue this course, please understand it well mate steps:

Installation Code/Script

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>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
Step 2 : Attach the CSS code above ]]> </ b: skin> or </ style>
.secret {text-align:centerdisplay:none}
.secret-share {padding:20px;text-align:center;border:3px solid #ddd}
Step 3 : Attach Script Viewer Button above </body>
<script type='text/javascript'>
//<![CDATA[
/* Facebook  by www.leetblogger.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>
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.

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 Comopose):

<div class="secret">
Link are hidden here</div>
</div>
<div class="secret-share">
Share Via Facebook/Twitter/Google Plus To see Download Link
<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="kangismetdotnet" 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>

7 comments :

  1. Working Tim it in css problem
    Mistake by Author he forget to put semi colon between text-align:center; display:none
    Change below css
    .secret {text-align:center; display:none}
    source by: http://www.bollywoodfakes.com

    ReplyDelete
  2. skripnya dari kang ismet yah ;)

    ReplyDelete
  3. Thanks for the code!

    although it's buggy but cleaned + modified it to work and also include a "close" button without sharing on one of my sites: http://writeinurdu.com/ phew!

    will be modifying it further and make a tutorial with backlink to you on my original blog :) thanks!

    ReplyDelete
  4. Not work, why appear hidden link even if visitor don't like or tweet?

    ReplyDelete
  5. Thanks for the article very helpful, but not work, I tried this code and have a good work. you can see here
    http://www.kythuatmang.net/share-social-to-unlock-download-link-using-javascript.php

    ReplyDelete
  6. Its as if you had a great grasp on the subject matter, but you forgot to include your readers. Perhaps you should think about this from more than one angle. Real Estate Agent Webtalk Team

    ReplyDelete