Tener visible la caja de Facebook en tu blog es muy importante, así
estas indicando que tu Blog tiene presencia en las redes sociales. Utilizar el Facebook
u otra redes sociales como twitter, instagram tiene un alcance positivo a la
hora de compartir, imágenes, videos, artículos, entre otras cosas.
Código de Facebook
Copia, modifica con tus datos y pega en un widget el siguiente código.
<center><div
class="fb-page" data-href="https://www.facebook.com/eldiariosiete/"
data-width="360" data-small-header="false"
data-adapt-container-width="true" data-hide-cover="false"
data-show-facepile="true"></div></center>
Para colocar el código en tu Blog, solo debes entrar a la plataforma de Blogger y realizar los
siguientes pasos:
1. Entra a Blogger.
2. Clic en Diseño.
3. Añadir un nuevo Gadget.
4. Buscar y hacer clic en HTML / Javascript.
5. Colocar el código de Facebook, solo deberás cambiar lo que
esta resaltado de color amarillo y guardar.
6. Podrás ver el cuadro de facebook en tu blog.
Caja de Facebook al Ingresar a tu Blog.
Este código permite colocar la faja de facebook a la hora de ingresar al blog, es una invitación automática para que los visitantes den Like a tu fanpage.
<style type='text/css'>
#ajstylesFBpop {
position:fixed !important;
position:absolute;
top:-1000px;
left:50%;
margin:0px 0px 0px -182px;
width:300px;
height:auto;
padding:16px;
background:#FEFEFE;font:normal Dosis,
Georgia, Serif;
color:#111;
border:2px solid #333;
-webkit-box-shadow:0px 1px 2px
rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
#ajstylesFBpop a.bsclose {
position:absolute;
top:-10px;
right:-10px;
background:#fff;
font:bold 16px Arial, Sans-Serif;
text-decoration:none;
line-height:22px;
width:22px;
text-align:center;
color:#000000;
border:2px solid #333;
-webkit-box-shadow:0px 1px 2px
rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:22px;
-moz-border-radius:22px;
border-radius:25px;
cursor:pointer;
}
</style>
<script
type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type='text/javascript'>
$(window).bind("load", function() {
// Animate Top
$('#ajstylesFBpop').animate({top:"50px"},
1000);
// Widget by www.nickcyber.blogspot.com
$('a.bsclose').click(function() {
$(this).parent().fadeOut();
return false;
});
});
</script>
<div id='ajstylesFBpop'>
<!-- Widget by www.Corazondetitanio.com
Start -->
<center><b><a class="ajstyles">El Diario Siete Únete</a></b></center>
<center>
<iframe
src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2F eldiariosiete &width=292&height=258&show_faces=true&colorscheme=light&stream=false&show_border=true&header=false"
scrolling="no" frameborder="0" style="border:none;
overflow:hidden; width:292px; height:258px;"
allowtransparency="true"></iframe></center>
<!-- Widget by www.corazondetitanio.com
End -->
<a class='bsclose'
href='#'>×</a>
<center style="float:right; margin-right:10px;"><span
style="font-size:xx-small; color:#000; text-decoration:none;">+Get
this at</span> <a target='_blank' style="font-size:xx-small;
color:#3B78CD; text-decoration:none;" href="http://www.corazondetitanio.com">Ajstyles</a></center>
</div>
Recuerda: Solo debes cambiar lo que esta de color amarillo, poniendo tus propios datos.
0 Comentarios