No passado, já mostramos como criar um armário de conteúdo social no Blogger . Os armários de conteúdo desempenham um papel significativo não apenas no aumento do seu tráfego social, mas também ajudam a melhorar sua aparência nas redes sociais. Recentemente, um de nossos usuários nos perguntou sobre como adicionar um compartilhamento para desbloquear o link de download no blogger? Resumindo, com esses armários de conteúdo você está forçando seus usuários a compartilhar seu conteúdo para obter o link de download de um determinado arquivo. Neste artigo, mostraremos como criar um compartilhamento para desbloquear o link de download no Blogger.
O que é compartilhar para desbloquear o link de download?
Principalmente as pessoas preferem ter plugins "Compartilhar para desbloquear conteúdo" porque a maioria dos usuários apenas lê seu conteúdo e sai do site sem compartilhá-lo em suas contas sociais.
Com armários de conteúdo ou compartilhamento para desbloquear plugins, você força ou pede que seus usuários compartilhem seu conteúdo em sites de redes sociais como Facebook, Twitter ou Google+ para ter acesso ao conteúdo completo ou a um link especial para download.
Etapa 1: instale o compartilhamento para desbloquear o link de download
A primeira coisa que você precisa fazer é fazer um backup do seu modelo do Blogger , apenas para estar no lado seguro se algo der errado. Para instalar o plug-in Compartilhar para desbloquear o link de download em seu site do Blogger, siga as instruções abaixo corretamente:
- Vá para Blogger >> Modelo >> Editar HTML .
- Certifique-se de que seu modelo tenha uma versão atualizada do arquivo jquery.min.js , precisamos que sua versão seja 1.10.2 ou superior. Caso o seu template não possua este arquivo então procure por <head> e logo abaixo cole o seguinte código: ( Nota: Certifique-se de que existe apenas um arquivo jquery.min.js porque ter vários arquivos jquery com causa que ele não seja executado) .
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
3. Agora nos códigos do template, procure pela tag </body> e logo acima cole o seguinte código JavaScript:
<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() {// inicia o FB JS SDKFB.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: [], pronto: function(f){ t._e.push(f) } });}(document, "script", "twitter-wjs"));twttr.ready(function (twttr) {twttr.events.bind('tweet', function (evento) {$.event.trigger({type: "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});}
/* Escuta o evento pageShared */
$(document).on('pageShared',function(e){
if(e.url == window.location.
$(".secret").show();
$(".secret-share").hide();
}
});
//]]>
</script>
<style>
.secret {
text-align:center;
display: nenhum
} .secret-share { preenchimento: 20px; alinhamento de texto: centro; borda: 3px sólido #ddd; fundo: #f8f8f8; } a.download-btn { text-transform: maiúsculas; tamanho da fonte: 22px; fundo: #7b7b7b; preenchimento: 10px 20px; exibição: bloco em linha; borda: 1px sólido #000000; decoração de texto: nenhuma; cor: #ff; }
.secret-share .fb-like {
margin-top: 0;
topo: -7px;
posição: relativa;}
.secret-share .twitter-share-button {
margem direita: 25px;
}
</style>
4. Agora, depois de colar os códigos corretamente, pressione o botão " Salvar modelo ". Depois de fazer isso, você instalou com sucesso o plug-in de compartilhamento para desbloquear o botão de download em seu modelo do Blogger.
Etapa 2: adicione compartilhamento para desbloquear o link de download nas postagens:
Para mostrar o botão compartilhar para desbloquear download em suas postagens, siga as instruções abaixo corretamente:
- Vá para o Blogger >> Adicionar uma nova postagem.
- Agora, no editor de postagem do blogger, volte para a guia HTML e cole o seguinte código no editor de código HTML:
<div class="secret">
<a class="download-btn" href="#">Baixar</a></div>
<div class="secret-share"><p>Compartilhar via Facebook/Twitter para ver o download do link</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>
Substitua # pelo seu link de download. Se você tiver algum conhecimento de codificação, poderá personalizá-lo ainda mais de acordo com suas necessidades.
Quando tudo estiver pronto, publique seu post e pronto. Agora, o link de download só aparecerá quando os usuários compartilharem seu conteúdo no Facebook, Google+ ou Twitter.
Tags:
INTERNET