NorfiPC
NorfiPC » Publicación web » Insertar Me Gusta y +1 en las páginas web

Como insertar los botones Me Gusta y plusone +1 en las páginas web

Agregar los widgets Me gusta de Facebook y +1 de Google en español en el código html, sin afectar ni retardar el tiempo de carga de las páginas y hacer que validen correctamente. Aprovechar los beneficios que traen consigo estos botones, que permiten a los usuarios recomendar las páginas que les resulten de interés en la red social en que participan, lo que trae consigo más tráfico y visitantes a nuestro sitio. Como insertar cualquier otro script en una página. Códigos y ejemplos prácticos.
Como insertar los botones Me Gusta y plusone +1 en las páginas web Todos los scripts que se inserten en una página, ralentizan, retardan y aumentan el tiempo de carga de las mismas, en ocasiones considerablemente, hasta inclusive pueden llegar bloquearla completamente en conexiones de baja velocidad.
Unos de los ejemplos más fehacientes, son los scripts necesarios para insertar la publicidad de servicios como el de AdSense, pero si necesitamos usarlos, por supuesto es imposible modificar el código, con lo que estaríamos violando los términos del servicio.
Para una mejor comprensión, al insertar cualquier script como el siguiente, el navegador se detendrá en él al renderizar una página y esperará a que cargue completamente el archivo, antes de continuar mostrando el resto de los elementos en la página.
<script type="text/javascript" src="archivo.js">
</script> 
No pasa lo mismo con los scripts necesarios para insertar botones que permitan a los lectores recomendar y valorar nuestras páginas en las redes sociales como Facebook, Google+, Twitter y otras.
Estos nos traen verdaderamente bastantes beneficios en el tráfico y posicionamiento web de cualquier página o blog de internet y por supuesto todos deseamos tener, ejemplos son los famosos Me Gusta de Facebook, el de Twitter y el más reciente Google +1.
Todos ellos los podemos modificar a nuestra conveniencia, siempre que se respeten los parámetros básicos para su funcionamiento.



Modificar los scripts para insertar los botones Me Gusta y +1


El widget de Facebook lógicamente es conocido a nivel mundial y no es necesario mencionar sus beneficios y el de Google debido al protagonismo en la red de este buscador y por a ser el principal proveedor de tráfico de cualquier página, no es menos importante.
Existen varios métodos que permiten insertar el código necesario para escribir los widgets o botones, pero sin que afecten en lo absoluto la carga de la página y logrando que valide correctamente, en este caso en XHTML que es el tipo de declaración más actualmente más utilizado.
Los dos métodos principales son los siguientes:
➔ Usar el evento onload, para que se activen solo después que todos los elementos de la página hayan terminado de cargar.
➔ Usar el método de carga asíncrono, que hace que vayan cargando regularmente, incluso pueden detener el proceso y reanudarlo posteriormente.
Un ejemplo de este método, es el código utilizado para cargar Google Analytics.

Usar el evento onload para escribir los script en una página usando Javascript


El primer método consiste en utilizar el evento onload de la página.
Un evento, si tienes dudas, es el que ordena una acción determinada, un evento puede ser un clic del ratón o presionar una tecla en el teclado.
El evento onload no es más que las instrucciones que ejecuta Javascript después que termina de cargar completamente los elementos de una página.
Un ejemplo, el siguiente script hace que se muestre un cuadro de alerta al terminar la carga de la página:
<script type="text/javascript">
window.onload = alert('Terminó de cargar la página');
</script>
Al entrar en esta página habrás notado un molesto cuadro de alerta, que su función es servir de ejemplo para conocer el tiempo empleado en la carga de los elementos de la página y comprobar a continuación como comienzan a cargarse los dos botones utilizando el evento onload.
Cárgala de nuevo usando el siguiente botón.



Escribir con Javascript el botón +1 después que la pagina cargue


Utiliza el siguiente código para escribir el botón +1 en una página.
La primera línea debe insertarse en el lugar exacto de la página donde se desea que aparezca.
El otro debe insertarse en el final de la página antes del cierre de la etiqueta body para que no influya en lo absoluto.
<div id="plusone-div"></div>

<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{"parsetags": "onload"}
</script>
<script type="text/javascript">
function renderPlusone() {gapi.plusone.render("plusone-div");}
window.onload=function()
{renderPlusone();}
</script>

Escribir con Javascript el botón Me Gusta después que la pagina cargue


Utiliza el siguiente código para escribir el botón Me Gusta de Facebook en una página.
De forma similar las dos primeras líneas van insertadas donde debe escribirse el botón Me Gusta, el resto del código en la parte inferior de la página.
<div id="fb-root"></div>
<div class="fb-like"></div><br />

<script type="text/javascript">
function renderIlike() {
var element = document.createElement('script'); 
element.type = "text/javascript"; 
element.id = "facebook-jssdk"
element.src = "//connect.facebook.net/es_ES/all.js#xfbml=1";
var s = document.getElementsByTagName('script')[0]; 
s.parentNode.insertBefore(element, s);
};
window.onload=function(){
renderIlike();}
</script>

Escribir con Javascript el botón Me Gusta y el botón +1 después que la pagina cargue.


El siguiente código permite insertar los dos botones simultáneamente.
<div id="plusone-div"></div>
<div id="fb-root"></div>
<div class="fb-like"></div><br />

<script type="text/javascript">
function renderPlusone() {
gapi.plusone.render("plusone-div");}
function renderIlike() {
var element = document.createElement('script'); 
element.type = "text/javascript"; 
element.id = "facebook-jssdk"
element.src = "//connect.facebook.net/es_ES/all.js#xfbml=1";
var s = document.getElementsByTagName('script')[0]; 
s.parentNode.insertBefore(element, s);};
window.onload=function(){
renderPlusone();
renderIlike();}
</script>

<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{"parsetags": "onload"}
</script>



Usar el método de carga asíncrona en la carga de los scripts.


También es posible utilizar el método asíncrono, de forma parecida al anterior se descargará el script de forma paralela, inclusive puede retardarse la descarga de parte del archivo.
Se puede insertar el parámetro en el script pero no validará la página, a no ser que se emplee HTML5, por lo que se debe utilizar solo en el interior del código.
Se puede usar en los scripts de la siguiente forma (HTML5):
<script type="text/javascript" async="true" src="http://sitio/archivo.js">
</script>



Escribir con Javascript el botón Me Gusta usando el método asíncrono.


Utiliza el siguiente código para escribir el botón Me Gusta de Facebook en una página utilizando el método asíncrono, evitando que afecte la carga de la página.
<div id="fb-root"></div>
<script type="text/javascript">
(function() {
var element = document.createElement('script'); 
element.type = "text/javascript"; 
element.async = true;
element.id = "facebook-jssdk"
element.src = "//connect.facebook.net/es_ES/all.js#xfbml=1";
var s = document.getElementsByTagName('script')[0]; 
s.parentNode.insertBefore(element, s);
})();
</script>
<div class="fb-like"></div>



Escribir con Javascript el botón +1 usando el método asíncrono.


La primera línea debe insertarse en el lugar exacto de la página donde se desea que aparezca.
El otro debe insertarse en el final de la página antes del cierre de la etiqueta body.
<div class="g-plusone"></div>

<script type="text/javascript">
(function() {
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>
Después que fue creado este artículo, Google incorporó nuevos scripts para la red Google+ que usan el modo asíncrono y que validan perfectamente en XHTML, aunque las insignias (badgets) que funcionan en HTM5 son las que ofrecen una verdadera funcionalidad.
Puedes acceder a la página para generar los códigos necesarios en: Crear una insignia de Google+
Para obtener el código de los botones Me Gusta y otros plugins sociales muy útiles de Facebook, usa el siguiente vinculo: Social Plugins
No obstante lo anterior, los códigos que se ofrecen en esta página son completamente funcionales.



Usar el parámetro defer para retrasar la carga de los scripts


Otra forma de incorporarle scripts a una página sin afectar el tiempo de carga, es empleando el parámetro defer, de esta forma se le informa al navegador que el contenido de dicho script no será utilizado para escribir en la interface de la página, por lo tanto su ejecución puede retrasarse y se ira descargando de forma paralela sin que afecte la carga de la pagina.
Se puede usar en los scripts de la siguiente forma:
<script type="text/javascript" defer="defer" src="http://sitio/archivo.js">
</script>

Como emplear el evento onload, otros ejemplos prácticos útiles


Se puede utilizar el evento onload de varias formas.
• Para cargar archivos JS externos que contienen varias funciones.
• Para iniciar funciones que estén insertadas en el código HTML de la página.
Dos ejemplos continuación.
<script type="text/javascript">
window.onload = function()
{
funcion1();
funcion2();
}
</script>
<script type="text/javascript">
function start() { 
funcion1();  
funcion2();
funcion3();}
window.onload = start;
</script>
<script type="text/javascript">
 function cargararchivo() {
 var element = document.createElement("script");
 element.src="ruta/archivo.js";
 document.body.appendChild(element);}
//3 metodos diferentes de para asegurar compatibilidad
 if (window.addEventListener)
 window.addEventListener("load", cargararchivo, false);
 else if (window.attachEvent)
 window.attachEvent("onload", cargararchivo);
 else window.onload = cargararchivo;
</script>

Páginas con mas información técnica en la red


Defer loading of JavaScript
PreferAsyncResources

Páginas relacionadas en este sitio