Botão Curtir do Facebook no seu blogger
Autor: Lecca Pontes | Publicado: 2013-01-17T06:20:00-08:00










Como colocar a opção botão curtir do Facebook ou recomendar?

Simples, mas quando comecei a pesquisar para colocar no meu blog, quase não encontrava um código que realmente funcionasse, dai resolvi fazer este post

Se Você por exemplo, deseja colocar a opção curtir por post publicado, você irá fazer o seguinte:

1 - Vai clicar em modelo, HTML, expandir o modelo e procurar por este trecho de código:

&lt;div class='post-body entry-content'&gt;

Accima dos códigos post body então vai colar este código abaixo.




&lt;b:if cond='data:blog.pageType == &quot;item&quot;'&gt;
&lt;div style='float: right; margin: 3px;display: inline;'&gt;
&lt;iframe expr:src='"http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url+ 
&quot;&amp;layout=button_count&amp;show_faces=false&amp;width=80&amp;action=like&amp;
colorscheme=light"' scrolling="no" frameborder="0" 
allowTransparency="true" style="border:none; overflow:hidden; width:80px; height:20px"&gt;
&lt;/iframe&gt;


Agora se quiser colocar este código no seu sidebar ou em outra gadget, poderá então utilizar este outro código abaixo.
Vai em adicionar gadget, utiliza a opção  HTML/JavaScript e cola os códigos.




&lt;iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.NOME DO SEU BLOG AQUI
&amp;layout=standard&amp;show_faces=true&amp;width=450&amp;action=like&amp;colorscheme=light
&amp;height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; 
width:450px; height:80px;" allowTransparency="true"&gt;&lt;/iframe&gt;


Vamos ao Tutorial:
1º – Acesse o painel do seu blog e clique na guia modelo.
2º – Depois clique no botão Editar HTML.
3º – Segure as teclas CTRL+F e procure por:

&lt;/head&gt;

4º – E, acima dele, cole o seguinte código:

&lt;script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=3.3.1' type='text/javascript'/&gt;
&lt;script src='http://dl.dropbox.com/u/73386157/codigos/minipopup/jquery.cookie.js' type='text/javascript'/&gt;
&lt;script type='text/javascript'&gt;
jQuery(document).ready(function($){
if($.cookie('popup_user_login') != 'yes'){
$('#fanback').delay(100).fadeIn('medium');
$('#fanclose, #fan-exit').click(function(){
$('#fanback').stop().fadeOut('medium');
});
}
$.cookie('popup_user_login', 'yes', { path: '/', expires: 7 });
});
&lt;/script&gt;

5º – Em seguida, segure novamente as teclas CTRL+F e procure por:


]]&gt;&lt;/b:skin&gt;


6º – E, acima dele, cole o seguinte código:

#fanback{display:none;background:rgba(0,0,0,0.8);width:100%;height:100%;position:fixed;top:0;left:0;z-index:99999}
#fan-exit{width:100%;height:100%}
#fanbox {background: white;width: 420px;height: 270px;position: absolute;top: 58%;left: 63%;-webkit-box-shadow: inset 0 0 50px 0 #939393;-moz-box-shadow: inset 0 0 50px 0 #939393;box-shadow: inset 0 0 50px 0 #939393;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;margin: -220px 0 0 -375px;}
#fanclose {float: right;cursor: pointer;background: url(http://3.bp.blogspot.com/-NRmqfyLwBHY/T4nwHOrPSzI/AAAAAAAAAdQ/8b9O7O1q3c8/s1600/fanclose.png) repeat;height: 15px;padding: 20px;position: relative;padding-right: 40px;margin-top: -20px;margin-right: -22px;}
.remove-borda {height: 1px;width: 366px;margin: 0 auto;background:#F3F3F3;margin-top: 16px;position: relative;margin-left: 20px;}

7º – E, pela última vez, segure as teclas CTRL+F e procure por:
&lt;body&gt;


8º – E, abaixo dele cole o seguinte código:

&lt;div id='fanback'&gt;
&lt;div id='fan-exit'/&gt;
&lt;div id='fanbox'&gt;
&lt;div id='fanclose'/&gt;
&lt;div class='remove-borda'/&gt;
&lt;iframe src="//www.facebook.com/plugins/likebox.php?href=ENDEREÇO DA SUA FAN PAGE AQUI&amp;width=402&amp;height=255&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23E2E2E2&amp;stream=false&amp;header=false&amp;appId=329902783740649" scrolling="no" frameborder="0" style="border: none; overflow: hidden; margin-top: -19px; width: 402px; height: 230px;" allowTransparency="true"&gt;&lt;/iframe&gt;
&lt;/div&gt;&lt;/div&gt;

É só salvar e visualizar.