¿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>
<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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjOq6rOHeqf_baMfU0GlAhKNjMWk1yf86PZEJYrVm2PpOm86JbpTd6D6KI07uE_zvyKjw1wY48ADbAQSK4Pjnh7C29Z-9J6Tj5Qi4LKYwvEQkIQmFgPYKy1UtydcbLMEbfkx_6sdH1e78/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&send=false&layout=button_count&width=80&show_faces=false&action=like&colorscheme=light&font=arial&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&dnt=false&id=twitter-widget-1&lang=en&screen_name=tujuegoenlinea&show_count=true&show_screen_name=false&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>
<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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjOq6rOHeqf_baMfU0GlAhKNjMWk1yf86PZEJYrVm2PpOm86JbpTd6D6KI07uE_zvyKjw1wY48ADbAQSK4Pjnh7C29Z-9J6Tj5Qi4LKYwvEQkIQmFgPYKy1UtydcbLMEbfkx_6sdH1e78/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&send=false&layout=button_count&width=80&show_faces=false&action=like&colorscheme=light&font=arial&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&dnt=false&id=twitter-widget-1&lang=en&screen_name=tujuegoenlinea&show_count=true&show_screen_name=false&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
5 comentarios: