Cómo poner una caja de facebook en un blog

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 &amp;width=292&amp;height=258&amp;show_faces=true&amp;colorscheme=light&amp;stream=false&amp;show_border=true&amp;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='#'>&times;</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.