Saturday 12 September 2015

Share to Unlock The Download Button For Blogger blog

Share to Unlock The Download Button , This means that the download link will appear after clicking Facebook Like / Tweet or Recommend on Google Plus . Links are hidden usually premium link . Very reasonable , a download link exchange with like, tweet or recommend on Google+ .

More concretely looks like the picture below :




Tricks like this are very useful to strengthen the position of your blogger blog in the SERP , because sharing the post to social networks is one of the type of SEO optimization . For my visitors who wants to pursue this course, please understand this article well:

Step 1 : Install the .NET Framework jQuery
To bring up and hide objects , needed a touch of jQuery . Therefore please post the code above </head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
If there are multiple versions of the jQuery framework , the effects will not run properly
Step 2 : Install the CSS code above ]]></b:skin>
.secret {text-align:centerdisplay:none}
.secret-share {padding:20px;text-align:center;border:3px solid #ddd}
Step 3 : Install Script Viewer Button above </body>
<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>
 If your existing template contain code something like it , please remove and replace with the above code . Do not forget to backup your template first .

How To Add Buttons In Posts

To bring the Like button , Tweet or Google Plus and also objects ( download link ) , the format of writing the post like this ( written in HTML mode instead Compose ) :
<div class="secret">
Links 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>
May be useful for my friend who wants to bring up the download link after the share .

No comments:

Post a Comment