add

¿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.

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

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.

DEMO

¡Les gusto verdad!

Vamos a trabajar

Para Blogger

1 Ir a Blogger

2 Da un clic en “Diseño

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

3 Abre  “Añadir un gadget

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

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

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

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

4 comentarios:

  1. Hola, magnífico, pero tengo una duda, ¿como puedo cambiar el fondo verde por otro color?. Gracias

    ResponderEliminar
    Respuestas
    1. Hola Temarium, con respecto a su pregunta, la siguiente dirección URL es la imagen de fondo verde:

      http://2.bp.blogspot.com/-2X5yb7ehpzU/UZpa5cmLjfI/AAAAAAAAALI/zEVXUhdjWfM/s1600/NBT_Green.png

      Cambie dicha dirección URL por una nueva imagen de fondo, recuerde que debe tener el mismo tamaño.

      Saludos.

      Eliminar

Discusión

person_pin Luis Chávez

group_work Fundador

contact_phone +593 994589032

email ayudadeblogger@gmail.com

Entradas populares

Youtube.com/ayudadeblogger

Suscríbete

Etiquetas

Adsense dispositivos moviles (2) Alojamiento web (12) Aplicaciones moviles (15) Backlinks (1) Breaking News para Blogger (3) Como (32) Como crear una pagina web gratis (8) Comprar Dominios (2) Comprar un Dominio en Godaddy (2) Configurar dominio de Godaddy en Blogger (1) Consejos de Blogs (33) Consejos de Trafico (12) Correo Dominio (3) Crear un Sitemap (6) Crear una Aplicacion gratis (2) Diseno Responsive (5) Diseño Web (7) En vivo (1) Entradas Populares (18) Enviar Sitemap a Bing y Yahoo (1) Error al analizar XML (5) Facebook trucos (10) Firefox (9) Formulario de contactos (3) Ganar Dinero (22) Google (11) Google Adsense (10) Google Plus (5) Guia de SEO (2) Herramientas Blogger (4) Herramientas para Webmasters (6) Iconos Font Awesome (1) Info Tech (1) La ética de los blogs (2) Laptops (2) Manual Blogger (10) Material Design Blogger (2) Medios de Comunicacion Social (39) Menu desplegable (20) Menu Responsive para Blogger (6) Mobile-friendly (9) Movil (12) Noticias (3) Optimizado para moviles (4) Plantillas Blogger (42) Plantillas Landing page para Blogger (3) Popout (6) Posicionamiento SEO (22) Publicidad (2) SEO Mobile (12) SEO para Moviles (14) Sitemap (1) Sitios web optimizados para moviles (3) Slider Carrusel (7) Slideshow (35) Smartphone (12) Social Media Marketing (1) Tácticas de Marketing (4) Tecnologia (12) Temas de invitados (2) Top Hosting (3) Trucos Blogger (40) Trucos CSS y HTML (11) Web Hosting (14) Widget Acordeón (3) Widget Tab Multiple (1) Widgets para Blogger (69) Widgets Suscripciones (9) Widgets y Plugins (6)

Formulario de contacto

Nombre

Correo electrónico *

Mensaje *

Seguidores

Comentarios