Fanbox de Redes Sociales

Con este Fanbox de las redes sociales: facebook, Twitter y Google+, puedes hacer que los usuarios que visitan tu pagina web, puedan darle ME GUSTA a tu fanspage, sin necesidad de salir de la pagina web. Esta forma es mucho mejor ya que se ganan la atencion del usuario para que le den Me Gusta a tu fanspage


Vista Previa:
Lo que vemos en la Vista Previa es solo el fanbox deslizante de Facebook, con Tiwtter y Google+, obtendrá el mismo efecto.


Para añadirlos, vas a Diseño  Añadir Gadget  HTML/Javasprit y pega lo siguiente:

<style>
#flotante1 {
position:fixed;
top:100px;
right:-250px;
float:right;
width:288px;
display:block;
padding:0;
z-index:1002;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
#flotante2 {
position:fixed;
top:240px;
right:-250px;
float:right;
width:288px;
display:block;
padding:0;
z-index:1003;
border-radius:10px;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
#flotante3 {
position:fixed;
top:380px;
right:-250px;
float:right;
width:288px;
display:block;
padding:0;
z-index:1004;
border-radius:10px;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
#flotante1:hover, #flotante2:hover, #flotante3:hover {
right:0px;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
div.likeboxwrap {
margin-top:-5px;
margin-left:-45px;
width:238px;
height:325px;
background-color:#fff;
overflow:hidden;
border-radius:10px;
}
</style>
<!-- Primera pestaña -->
<div id='flotante1'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjV29m-g316TzuMEIS9tMcggtwGOwNXxcA0S_LZgvolBjLB05zh_4FnKcri3tQGUJkNTg48oz2f3C8U-NQp-oX5TxzPeSUl0g9sXKtKFeZw7SOBQhpj_Lm94Z9_-cvwqxqLe2U-nLFbDvU/' style='float:left;'/>
<div style='background: #3c5a98; height:325px; margin-left:38px;padding: 8px 5px 0pt 50px;border-radius: 0px 0px 0px 10px;'><span><div class='likeboxwrap'><iframe allowtransparency='true' frameborder='0' scrolling='no' src='http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fnombre-de-la-página-de-facebook&width=240&colorscheme=light&connections=15&stream=false&header=false&height=350' style='border:none; overflow:hidden; width:240px; height:325px;'/></iframe>
</div></span></div></div>
<!-- Segunda pestaña -->
<div id='flotante2'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoMZLBIXqngypQRt-usJ6eIfICPtbTTp4AnqdH7B0dcCKVSElIRZW_CdVq-o3AVf9mLidt7ivhfVTQzO8YlSWWwfEV_r5nLpXR7BXKil3SqEjyFGYFed96aOlkJkxsrSrsoYgnZqSi2qI/s159/goo_tab.png' style='float:left;'/>
<div style='background: #9A9FA8; height:325px; margin-left:38px;padding: 8px 5px 0pt 50px;border-radius: 0px 0px 0px 10px;'><span><div class='likeboxwrap' style="padding-left:20px; padding-top:15px; height:310px !important;">
<div class="g-plus" data-action="followers" data-height="300" data-href="https://plus.google.com/XXXXXXXXXXXXXX" data-source="blogger:blog:followers" data-width="240">
</div>
<script type="text/javascript">
(function() {
window.___gcfg = {'lang': 'es'};
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);
})();
</script>
</div></span></div></div>
<!-- Tercera pestaña -->
<div id='flotante3'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyRIY2q2fiGBOcla6GJoh5gELYh-QijC5-SH54GqwJyGAsnP_Ck5B-qMcrpTaU3nBCPF-taPs172h0F3HL3u1PQ8R99l_U10vzWVrYTyxYxHe3GJFxP7QbIvceQSDSU0Dy3JYURK2jQ1c/' style='float:left;'/>
<div style='background: #00a0e8; height:325px; margin-left:38px;padding: 8px 5px 0pt 50px;border-radius: 0px 0px 0px 10px;'><span><div class='likeboxwrap'>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script>
<style>
.follow_box_widget{overflow: hidden; padding-left: 5px; padding-right: 5px; padding-top: 5px; background-color: #fff transparent; position: relative; margin: auto;}
.follow_box{font-size: 11px; font-family: "lucida grande",tahoma,verdana,arial,sans-serif; color: #333; line-height: 1.28; text-align: left; direction: ltr;}
.follow_box .follow_top{padding: 5px 10px 0px 5px; margin-bottom: 8px; min-width: 230px; overflow: hidden;}
.follow_box .profileimage{float: left; width: 40px; height: 40px; padding: 0px; margin: 0 10px 4px 0;}
.follow_box img{border: 0;}
.follow_box a{cursor: pointer; color: #3B5998; text-decoration: none;}
.follow_box a:hover{text-decoration: underline;}
.follow_action{padding: 0 0 0 8px;}
.follow_box .follow_action .name{line-height: 15px; font-size: 14px; font-weight: bold;}
.follow_box .follow_button{margin: 5px 0 0;}
.follow_box .total{min-width: 230px; overflow: hidden; display: block;}
.follow_box .connections{padding: 5px 0 4px 0px; border-top: solid 1px #D8DFEA; border-bottom: 1px solid #CCC; min-height: 150px;}
.follow_box .connections .connections_grid{padding-top: 5px; overflow: hidden;}
.follow_box .clearfix{zoom: 1;}
.follow_box .connections .connections_grid .grid_item{float: left; margin:0px; margin-right: 5px; margin-bottom: 8px; overflow: hidden; width: 50px;}
.follow_box .connections .connections_grid .grid_item .name{font-size: 9px; color: gray; overflow: hidden; padding-top: 2px; text-align: center; white-space: nowrap;}
.follow_box .connections .connections_grid .grid_item img{width: 48px; height: 48px;}
.follow_box .follow_widget_footer{ cursor: default; width: 100%; min-width: 230px; overflow: hidden;}
.follow_box .footer_border{ margin-top: 5px;}
.follow_box .uiImageBlock{line-height: 14px;}
.follow_box .follow_widget_footer .footer_logo{float: left; margin-right: 5px;}
.follow_box .follow_widget_footer .footer_text{cursor: default; color: #808080; font-size: 9px; float: left;}
.follow_box .follow_widget_footer .footer_text a.footer_text_link{color: #808080;}
.follow_box .titlecase{text-transform:capitalize;}
</style>
<script>
/*
* Twitter Follow Box jQuery Plugin
* http://jobyj.in/twitter-follow-box-widget/
* Copyright 2012, Joby Joseph
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*/
(function(a){a.fn.followbox=function(b){function f(a,b){if(a>100)a=100;var c=new Array;for(var d=0;d<a;d++){c.push(b[d])}var e=c.join();return e}var c=a(this);var d="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTsamj-iyHIuJjMdN9H-MSGdXJbtcqJk5lPnPqHYcXrFpQIpZ5uYgyJ1VVN90FPm3Q1VnTKvuxlyqCZOwDFsgIIfD3AoEEUfDjdn0ADjiz7PfL6v-zCccR-wFU7wSPmiRqtDZ2pmG64Bg/";var e=a.extend({user:"jobysblog",width:292,height:252,theme:"light",border_color:"#AAA",bg_color:"#fff",bg_image:"",title_color:"#3B5998",total_count_color:"#333",follower_name_color:"#BBB"},b);a.ajax({url:"http://api.twitter.com/1/users/lookup.json?screen_name="+e.user+"&include_entities=true",dataType:"jsonp",success:function(b){var g=e.width-2;var h=e.height-2;var i=e.height-115;var j=parseInt(e.width/55);var k=parseInt(i/69)+1;var l=j*k;c.html('<div class="follow_box_main" style="border: 1px solid #bbb; width: '+g+"px; height: "+h+'px;"><div class="follow_box_widget"><div class="follow_box"><div><div class="follow_top clearfix"><a href="http://www.twitter.com/'+e.user+'" target="_blank"><img class="profileimage img" src="'+b[0].profile_image_url_https+'" alt="'+b[0].name+'"></a><div class="follow_action"><div class="name_block"><a href="http://www.twitter.com/'+e.user+'" target="_blank"><span class="name titlecase">'+b[0].name.toLowerCase()+"</span> @"+b[0].screen_name+'</a></div><div class="follow_button"><iframe allowtransparency="true" frameborder="0" scrolling="no" src="//platform.twitter.com/widgets/follow_button.html?screen_name='+e.user+'&show_count=false&show_screen_name=false&lang=es" style="width:100px; height:20px;"></iframe></div></div></div><div class="connections"><span class="total"><span class="follow_box_follower_count">'+b[0].followers_count+'</span> personas siguen a <b class="titlecase">'+b[0].name.toLowerCase()+'</b></span><div class="connections_grid clearfix" style="height:'+i+'px;"></div></div></div><div style="height: 23px"><div class="follow_widget_footer"><div class="footer_border"><div class="clearfix uiImageBlock"><a class="footer_logo" target="_blank" href="http://jobyj.in/twitter-follow-box-widget"><img src="'+d+'"/></a><div class="footer_text"><a class="footer_text_link" target="_blank" href="http://jobyj.in/twitter-follow-box-widget">Twitter Social Plugin</a></div></div></div></div></div></div></div></div>');if(e.theme=="dark"){c.find(".follow_box_main").addClass("dark")}c.find(".follow_box_follower_count").text(c.find(".follow_box_follower_count").text().replace(/(\d)(?=(\d\d\d)+(?!\d))/g,"$1,"));if(a.browser.msie&&!a.support.boxModel)a(".follow_box .connections").css("padding-bottom","14px");if(e.theme=="custom"){c.find(".follow_box_main").css({"border-color":e.border_color,"background-color":e.bg_color,"background-image":'url("'+e.bg_image+'")'});c.find(".follow_box a").css({color:e.title_color});c.find(".follow_box .total").css({color:e.total_count_color})}a.ajax({url:"https://api.twitter.com/1/followers/ids.json?cursor=-1&screen_name="+e.user,dataType:"jsonp",success:function(b){var d=f(l,b.ids);a.ajax({url:"https://api.twitter.com/1/users/lookup.json?user_id="+d+"&include_entities=true",dataType:"jsonp",success:function(b){for(var d=0;d<b.length;d++){var f=a.trim(b[d].name);var g=f.split(" ");var h='<div class="grid_item"><a href="http://twitter.com/'+b[d].screen_name+'" target="_blank"><img class="img" src="'+b[d].profile_image_url+'" alt=""><div class="name titlecase">'+g[0].toLowerCase()+"</div></a></div>";c.find(".connections_grid").append(h)}if(e.theme=="custom"){c.find(".connections .connections_grid .grid_item .name").css({color:e.follower_name_color})}}})}})}})}})(jQuery)
</script>
<script>
$(document).ready(function(){
$('#twitterfollowbox').followbox({
'user':'usuarioTwitter',
'height':'300',
'width':'260',
'theme':'custom',
'border_color':'#ffffff',
'bg_color':'#ffffff',
'bg_image':'',
'title_color':'#3B5998',
'total_count_color':'#333333',
'follower_name_color':'#BDBDBB'
});
});
</script>
<div id="twitterfollowbox" class="follow-box-container"> </div>
</div></span></div></div>
Ahora reemplaza lo que esta en azul, por lo que se indica, en el caso de facebook donde dice nombre-de-la-página-de-facebook reemplazalo por el nombre de tu pagina en facebook, lo mismo con el usuario de Twitter, lo que cambia es en la parte de Google Plus donde dice XXXXXX la cambias por tu ID de G+, esta la puedes hallar en la URL de tu perfil o pagina en G+, en mi caso la URL de mi perfil es:

112998393368589174522 ◄Es la ID en Google+
Ahora solo guarda los cambios 

ACTUALIZACIÓN

Si en el fanbox de Facebook te sale algún error, es posible que se deba a que no tienes una URL personalizada en tu página de Facebook, en este casos deberás cambiar esta parte:

http%3A%2F%2Fwww.facebook.com%2Fnombre-de-la-página-de-facebook

 Por esa otra:

http%3A%2F%2Fwww.facebook.com%2Fpages%2Fnombre-de-la-página-de-facebook%2FXXXXXXXXXXXXXXX

Ahí además de poner el nombre de tu página de facebook donde se indica, deberás añadir en las XXXX una serie de números que aparecen al final de la URL de tu página de Facebook.

Botones de redes sociales



Hola amigos, hoy les vengo a traer un gadget, de Redes Social para blogger, en donde el lector al hacer click, lo lleve a tu red social, para añadirlo es muy facil, solo vas a Diseño → Añadir Gadget → HTML/Javasprit, y pegas:

<a href="http://www.facebook.com/FanPage" target="_blank"><img alt="Siguenos en Facebook" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQlD10bQuv8Jqw4vMei_Vh13hFBZBVWtX6P2Z7xieDLEx59bgTqvusx-7b6GVg3o2jmWJnW-GhMWoFf1KjzJKr8hV2GW-KVEwSr6VDgmj0fCEzgZPcT7_5fd-REIm08iVXCviIGS-AL8g/s48/facebook48.png" width=48 height=48  /></a>
<a href="http://www.facebook.com/CuentaTwitter" target="_blank"><img alt="Siguenos en Twitter" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1CaT6jXahkoNxzHWE2NJOn5TbQ7YhXqAieHnLPoazX06D6_vhStDTa6xbPOsnJaqBl7lMm0OxBJWxXgeghRm4YzDn1eJaqe3Kx3tEiKiHTO6xlS2efBc-mqPBN_LSxSTa06Piw-AYau34/s1600/twitter.png" width=48 height=48  /></a>
<a href="http://www.facebook.com/CuentaGoogle" target="_blank"><img alt="Siguenos en Google+" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjH5FEgU1GP1XB_yss5BpHHepJCEWkcKpd01rjCO7W8qJZiNJ1St86ZRCoWoSkGrmTQqtjEsFlBqoUWhzGh017_ZatvYaljkPWfthvqdjZkLAKUx7wlncDxTS-eel9J-NycM9az5pqRJU6z/s1600/google+.png" width=48 height=48  /></a>

Si quieres agregar otra red social u otro tipo de pagina, agregas:

<a href="Link" target="_blank"><img alt="Siguenos en Nombre" src="Link de la imagen" width=48 height=48  /></a> 
En donde dice Link lo sustituyes por el link de otra red social u otro tipo de pagina.
La parte en donde dice Nombre lo sustituyes por el nombre de tu pagina u otro texto que desees.
En donde dice Link de la imagen lo sustituyes por el link de la imagen que quieres que valla, de preferencia que sea con las esquinas redondeadas y en formato PNG (hacerlo en photoshop).
Tambien puedes cambiar el ancho de los botones 
Widht:Ancho
Heigth: Altura

Botones para compartir flotantes que se deslizan al bajar


Hola amigos, hoy les vengo a traer unos botones para compartir flotantes, que se deslizan con el blog, estos botones se encontrarán en el lado izquierdo del blog, e irán bajando junto con el blog. Incluíremos solo los botones basicos Facebook, Twitter, Google+, aunque tambien puedes agregar más botones.

Para añadirlos nos vamos a Plantilla → Editar HTML, buscamos </head> y antes pegamos:

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
// <![CDATA[
$(function() {
var offset = $("#BotonesFlotantes").offset();
var topPadding = 15;
$(window).scroll(function() {
if ($(window).scrollTop() > offset.top) {
$("#BotonesFlotantes").stop().animate({
marginTop: $(window).scrollTop() - offset.top + topPadding
});
} else {
$("#BotonesFlotantes").stop().animate({
marginTop: 0
});
};
});
});
// ]]>
</script>
<style>
#BotonesFlotantes {
position: absolute;
left: -100px; /* Distancia desde la izquierda */
border: 1px solid #FB5F55; /* Borde del contenedor */
border-right: 0px;
padding: 10px;
background-color: #FFF; /* Color de fondo del contenedor */
z-index:9;
}
#BotonesFlotantes div {
margin: 10px 0;
}
</style>

Luego buscamos:

<div class='post-header'>

Y debajo pega:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='BotonesFlotantes'>
<div><iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url+ &quot;&amp;layout=box_count&amp;show_faces=false&amp;width=73&amp;height=63&amp;action=like&amp;font=tahoma&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:73px; height:63px'/></div>

<div><a class='twitter-share-button' data-count='vertical' data-lang='es' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></div>

<div><script src='http://apis.google.com/js/plusone.js' type='text/javascript'/><g:plusone size='tall'/></div>

</div>
</b:if>

Guarda los cambios y listo.
En el primer código hemos puesto tanto el script como los estilos ya que ambos son muy breves. Ahí verás en color verde a qué corresponde cada área.
Donde dice /* Distancia desde la izquierda */ debes modificarlo hasta que quede a la distancia correcta según tu plantilla. Ahí mismo verás dónde cambiarle el borde y fondo del contenedor.

Estos botones se verán sólo en las entradas individuales, de otra forma no funcionarían.
Si quisieras agregar más botones entonces añádelos antes de </div> y cada uno encerrado entre <div> y </div>

Recuerda que este gadget usa jQuery, por lo que si ya tienes la última versión de jQuery no hace falta repetir el script. Y si usas Mootools o Scriptaculous debes aplicar unos cambios al script.

Sino te aparecieran, pon la /* Distancia desde la izquierda */ en 0px, si tampoco aparecen entonces el último código ponlo arriba de <data:post.body/>

Updates Via E-Mail

Blogger templates