quinta-feira, 11 de agosto de 2016

Como adicionar Share link para desbloquear download link

share-to-unlock-link-download


Ola hoje vamos apresentar uma automação feita por Syed Faizan  Ali para seu Blog ou seja isso pode ser usado em nichos de Blog que tem por exemplo algo para ser baixado como programas filmes entre tutoriais especificos entre outros quando o visitante clica no link para baixar isso acusa primeiro para compartilhar para chamar a ação de desbloqueio do download, é muito utilizado para criar viralidade em post e com isso você só tem a ganhar com maior quantidade de exposição do Blog nas redes sociais para adicionar o widget siga os passos abaixo.



share-facebook-twiiter-google+to-unlock-widget

Note: Sempre faça um backup antes do seu template antes por medida de segurança

Faça login no Blogger va em painel modelo então editar html com as teclas combinadas CTRL+F busque por <head> e verifique se existe o código Jquery no seu template caso ja tenha o código não precisa ser adicionado é importante ter somente um código caso contrario isso não vai funcionar então verifique se existe o código abaixo entre os código <head> e </head> caso não tenha adicione isso

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>

Agora procure por </body> acima disso copie e cole o código.

<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>

feito isso clique no botão salvar.

Agora vamos adicionar o share to unlock  no post. 

Vá em criar nova postagem então clique na aba HTML ao lado de escrever como mostra a figura abaixo.

share-to-unlock-widget-

<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>

Publique o post e pronto agora quando as pessoas forem fazer download de algo isso vai pedir primeiro para compartilhar para mostrar o link. 
NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post

Nenhum comentário:

Postar um comentário

NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post
 

Delivered by FeedBurner