terça-feira, 23 de junho de 2015

Social Content Locker para Blogger blogspot

social-content-locker-blogger

Demo 

Hoje vamos apresentar content locker social, você ja conheçe ouviu falar? Bem social content locker é um tutorial onde você vai poder usar para fazer seu blogger mais divulgado nas redes sociais, ou seja é uma especie de cadeado no seu artigo/post onde para visualizar é preciso compartilhar para depois visualizar o que há escrito social locker é um otimo widget para blogger, dependendo do ranking e tráfego do seu blog se criar um ótimo conteúdo isso vai ser viral no seu blogger cada vez mais as pessoas vão engajar para visualizar seu post o que vai dar uma melhor visibilidade no seu blogger nas redes sociais. Isso foi desenvolvido para que você possa ter uma melhor performance.

Faça login no blogger procure no menu por modelo >> Click on Edit HTML >> No codigo procure pressionando ctrl+f  por </head> code.
depois de encontrar copie o codigo abaixo  e cole acima

 <script src='http://code.jquery.com/jquery-1.10.2.min.js' type='text/javascript'/>

Nota se seu template ja estiver não precisa

logo apos isso procure por </html> copie o codigo e cole abaixo de </head>


<link href='https://googledrive.com/host/0B_1mqJd2tC8qeDVzSnBJMDh5WUk' rel='stylesheet'/>

<script src='https://googledrive.com/host/0B_1mqJd2tC8qbGdmQzRZVGk3bXM' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function ($) {
$('#default-usage .to-lock').sociallocker({

buttons: {order:["facebook-like","twitter-tweet","google-plus"]},

twitter: {url:"http://www.mybloggerseo.com"},
facebook: {url:"http://www.mybloggerseo.com"},
google: {url:"http://www.mybloggerseo.com"},

text: {
header: "Like us To Unlock This Content",
message: "Esse Conteúdo é Bloqueado. Like us on Facebook, Twitter or Google plus para desbloquear ."
},

locker: {close: false, timer: 0,},

theme: "dandyish"

});
});
//]]>
</script>


Não esqueça de modificar os links das redes sociais pelas suas redes Clique em salvar vá no corpo do artigo clique em html

então copie esse codigo

<article id="default-usage">
<div class="to-lock" style="display:none;">
- ADD YOUR CONTENT HERE -
</div>
</article>

ADD YOUR CONTENT HERE  você pode esconder url texto imagem link e muito mais faça bom uso duvidas estou a disposição

Código Atualizado---------------------


Adicione o seguinte código abaixo  de <head>

<script src='http://code.jquery.com/jquery-1.10.2.min.js' type='text/javascript'/>


Agora procure por </head> e coloque o seguinte código antes disso.

<link href='http://cdn.rawgit.com/menightfury/social-locker/master/style.css' rel='stylesheet'/>
<script src='http://cdn.rawgit.com/menightfury/social-locker/master/script.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function($) {
  $('#default-usage .to-lock').sociallocker({

    buttons: {order:["facebook-like","twitter-tweet","google-plus"]},

    twitter: {url:"URL QUE DESEJA COMPARTILHAR"},

facebook: {
  like:{
    url:"https://www.facebook.com/FANPAGE USUARIO"
  },
  share:{
    appId:1644466799163691,
    url:"URL QUE DESEJA COMPARTILHAR/"
  },
},

    google: {url:"URL QUE DESEJA COMPARTILHAR/"},

    text: {
      header: "Like us To Unlock This Content",
      message: "This content is locked. Like us on Twitter, Facebook or Google plus to unlock it."
    },

    locker: {close: false, timer: 0,},
    theme: "secrets"
  });
});
//]]>
</script>

Salve isso.

No corpo do post clique na aba HTML adicione o seguinte código:

<article id="default-usage">
 <div class="to-lock" style="display:none;">

  -- Aqui vai o conteúdo que deseja esconder  --

 </div>
</article>


6 comentários

bom se tivsse pra inscrever no youtube

Por favor me ajude, eu coloco o código todo certinho e coloco o conteúdo que eu quero bloquear no lugar indicado, mas quando faço isso, desaparece e não aparece nenhum dos botões de curtir. O que pode estar acontecendo? Obrigada desde já

Quando abre a abinha do face não aparece o botão curtir. Será que tem algum bug no códgio? Esse appId é o meu numero do face develepors?

Verifique se seu Template ja possui Jquery caso possua ignore o jquery

Verifiquei. Realmente não aparece, coloquei o meu appId do meu aplicativo de curtir, mas não deu resolveu. =(