¿Cómo insertar un widget estático de Facebook y Twitter?

¿Insertar un código en mi página web para que se muestre un widget estático y así compartir Facebook y Twitter? ¿Mostrar un widget estático para compartir mí página de Facebook y Twitter y así se puedan suscribir a mis paginas? ¿Necesito un widget estático para que se suscriban a mis cuentas de Facebook y Twitter? Algunas de las preguntas que llegan a mi cuenta de correo electrónico, bueno voy a compartir un gran truco que servirá para cualquier tipo de página web, sea Blogger, Wordpress, páginas web, blogs, etc. Utilizaremos un código muy sencillo, el cual no le creara ningún conflicto con su HTML, al igual la carga es muy ligera y simple. Lo que vamos hacer es copiar un código y realizar dos simples cambios.

Pueden ver su demostración en la siguiente página web, el widget estático se abrirá cuando vayan hacia bajo de la página web de forma automática. Lo mismo cuando suban hacia la primera posición de la página web se desaparecerá el widget estático. También tiene la opción de una “X” para que ya no se muestre.

¡Les gusto verdad!

Vamos a trabajar

Para Blogger

1 Ir a Blogger

2 Da un clic en “Diseño”

3 Abre  “Añadir un gadget”

4 Busca el widget que dice “HTML/Javascript” ábrelo

Inserta el siguiente código en su interior

<div class="widget-content"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> &nbsp; <script type="text/javascript">$(window).scroll(function(){if($(document).scrollTop()>=$(document).height()/4)$("#IGsocialslide").show("slow");else $("#IGsocialslide").hide("slow");});function closeIGsocialslide(){$('#IGsocialslide').remove();$.ajax({type:"POST",url:"/facebookpage.php"});}</script>   <style type="text/css">  #IGsocialslide{  background:black url(http://2.bp.blogspot.com/-2X5yb7ehpzU/UZpa5cmLjfI/AAAAAAAAALI/zEVXUhdjWfM/s1600/NBT_Green.png) left top repeat-x;  border-radius:9px;  -moz-border-radius:8px;  -webkit-border-radius:8px;  -moz-box-shadow:inset 0 0 4px #333;  -webkit-box-shadow:inset 0 0 4px #333;  box-shadow:inner 0 0 3px #333;  padding:12px 14px 12px 14px;  width:300px;  position:fixed;  bottom:13px;  left:2px;  display:none;  z-index:3;  height:65px;}  </style>    <div style="display: block;" id="IGsocialslide"> <a style="position:absolute;top:14px;right:10px;color:#D8C9C9;font-size:10px;font-weight:bold;" href="javascript:void(0);" onclick="return closeIGsocialslide();">X</a> <span style="font-family: Tekton Pro; font-size: 20px; margin: 10px 0; text-shadow: 1px 1px 0 #868686;color:#F8F0F0;">No te olvides de Suscribirte!</span><br />   <div style="float:left; margin:15px;"><iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com/Juegosenlineajuegosgratis&amp;send=false&amp;layout=button_count&amp;width=80&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font=arial&amp;height=21" scrolling="no" style="border:none; overflow:hidden; width:80px; height:21px;" allowtransparency="true" frameborder="0"></iframe></div>   <div style="float:left; margin:15px;"><iframe style="width: 160px; height: 20px;" data-twttr-rendered="true" title="Twitter Follow Button" class="twitter-follow-button twitter-follow-button" src="http://platform.twitter.com/widgets/follow_button.b8521baa6750e75c2cbc4369801f822e.en.html#_=1423240360213&amp;dnt=false&amp;id=twitter-widget-1&amp;lang=en&amp;screen_name=tujuegoenlinea&amp;show_count=true&amp;show_screen_name=false&amp;size=m" allowtransparency="true" scrolling="no" id="twitter-widget-1" frameborder="0"></iframe> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></div> </div>   <div class="clear"></div>  </div>

Realiza estos dos cambios:

Cambia donde dice www.facebook.com/Juegosenlineajuegosgratis por la dirección URL de tu página de Facebook

Igual, borra donde dice tujuegoenlinea por el nombre tu página de Twitter

Eso es todo

Nota: Si ya utilizas en tu blog un http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js  ya no es necesario poner este código, ya que ocasionaría conflictos. Y si no utilizas ningún Jquery inserta todo el código tal como lo muestro.

5 Da un clic en “Guardar” y ubica tu nuevo widget estático donde tú quieras

¿Cómo insertar el widget estático en una página web o blog que no sea Blogger?

Copia el siguiente código antes del cierre </body> de tu página web o blog

<div class="widget-content"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> &nbsp; <script type="text/javascript">$(window).scroll(function(){if($(document).scrollTop()>=$(document).height()/4)$("#IGsocialslide").show("slow");else $("#IGsocialslide").hide("slow");});function closeIGsocialslide(){$('#IGsocialslide').remove();$.ajax({type:"POST",url:"/facebookpage.php"});}</script>   <style type="text/css">  #IGsocialslide{  background:black url(http://2.bp.blogspot.com/-2X5yb7ehpzU/UZpa5cmLjfI/AAAAAAAAALI/zEVXUhdjWfM/s1600/NBT_Green.png) left top repeat-x;  border-radius:9px;  -moz-border-radius:8px;  -webkit-border-radius:8px;  -moz-box-shadow:inset 0 0 4px #333;  -webkit-box-shadow:inset 0 0 4px #333;  box-shadow:inner 0 0 3px #333;  padding:12px 14px 12px 14px;  width:300px;  position:fixed;  bottom:13px;  left:2px;  display:none;  z-index:3;  height:65px;}  </style>    <div style="display: block;" id="IGsocialslide"> <a style="position:absolute;top:14px;right:10px;color:#D8C9C9;font-size:10px;font-weight:bold;" href="javascript:void(0);" onclick="return closeIGsocialslide();">X</a> <span style="font-family: Tekton Pro; font-size: 20px; margin: 10px 0; text-shadow: 1px 1px 0 #868686;color:#F8F0F0;">No te olvides de Suscribirte!</span><br />   <div style="float:left; margin:15px;"><iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com/Juegosenlineajuegosgratis&amp;send=false&amp;layout=button_count&amp;width=80&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font=arial&amp;height=21" scrolling="no" style="border:none; overflow:hidden; width:80px; height:21px;" allowtransparency="true" frameborder="0"></iframe></div>   <div style="float:left; margin:15px;"><iframe style="width: 160px; height: 20px;" data-twttr-rendered="true" title="Twitter Follow Button" class="twitter-follow-button twitter-follow-button" src="http://platform.twitter.com/widgets/follow_button.b8521baa6750e75c2cbc4369801f822e.en.html#_=1423240360213&amp;dnt=false&amp;id=twitter-widget-1&amp;lang=en&amp;screen_name=tujuegoenlinea&amp;show_count=true&amp;show_screen_name=false&amp;size=m" allowtransparency="true" scrolling="no" id="twitter-widget-1" frameborder="0"></iframe> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></div> </div>   <div class="clear"></div>  </div>

Realiza estos dos cambios:

Cambia donde dice www.facebook.com/Juegosenlineajuegosgratis por la dirección URL de tu página de Facebook

Igual, borra donde dice tujuegoenlinea por el nombre tu página de Twitter

Eso es todo

Guárdalo

Nota: Si ya utilizas en tu página web un http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js  ya no es necesario poner este código, ya que ocasionaría conflictos. Y si no utilizas ningún Jquery inserta todo el código tal como lo muestro.

¡Fácil verdad!

¿Necesitas ayuda?

Cualquier pregunta no duden en hacérmelo saber

Recuerda suscribirte:

Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE

¿Te ha resultado útil este artículo, recomiendanos?

Si

TAGS: Medios de Comunicacion SocialWidgets para Blogger

Share:

Luis Chávez

Soy el fundador del sitio web Ayudadeblogger.com - Considerado un Pro Blogger profesional, Consultor SEO y desarrollador Web adicto, ejecuto una serie de sitios web desde mi Oficina Quito-Ecuador.