Tecnología

Diarios de la nube Idea guardada 0 veces
Sé la primera persona en valorar esta idea Valorar

Cómo poner botones para redes sociales al final de tus entradas

portada botones redes sociales al pie de entrada


Muchos Bloggers prefieren añadir botones para redes sociales al pie de sus entradas para que los usuarios puedan compartir el contenido que ha sido de su agrado.
Vamos a aprender a colocar en el pie de entradas botones para compartir en Facebook, Twitter y Google+ nuestras creaciones.¿Qué son los botones para las redes sociales en un Blog?: 

Los componentes oficiales o no oficiales de las distintas marcas de redes sociales que permiten difundir nuestros contenidos por las mismas gracias a la interacción con ellos de nuestros usuarios.
Los botones de distintas redes sociales exigen la utilización de unos "scripts" que permiten introducir en nuestro Blog los mecanismos necesarios, a través de código fuente para que nuestros usuarios puedan compartir el contenido de la entrada que visualizan o incluso para que nuevos visitantes se hagan seguidores nuestros.
Estas posibilidades son revolucionarias, pues permiten a nuestros clientes interactuar, propagar, difundir nuestras creaciones más allá del círculo social en el que nosotros nos movamos para pasar a incluirlo dentro de otros que nos son ajenos.¿Qué inconvenientes pueden tener a nivel de rendimiento el uso de scripts?

El inconveniente que tiene añadir "scripts" es que requieren "incrustar" código fuente, que normalmente se conecta a servidores externos a nuestro Blog. La descarga de dichos componentes en los navegadores de nuestros usuarios y la toma de datos por parte de sus marcas redunda en una relativa "carga" para el dibujado de nuestra web.
Mientras descargamos los contenidos de nuestro Blog, los scripts para botones de redes sociales "postergan" de una manera u otra el avance en el dibujado de la página. Esto es debido a que deben conectarse al servidor del cual han sido extraídos para dibujar sus botones y realizar las operaciones para las cuales fueron creados.¿Cómo conseguir un buen rendimiento al utilizar botones para redes sociales?

Los navegadores modernos se encargan de realizar cálculos y "balanceos" de carga que permiten "dibujar" lo fundamental de la página en primer lugar para después centrarse en aquello que pueda ir más despacio.
La carga asíncrona de scripts es algo con lo que también, poco a poco, los propios scripts descargados de las redes sociales trabajan. Cuando el navegador lee una página HTML descargada de un servidor, va leyendo línea a línea, cuando llega a un script si "espera" a que termine por completo, hace que la web entera  no se dibuje completamente hasta que dicho script finalice. La carga "asíncrona" impide que el navegador espere a que el "script" termine para completar el dibujado de la página.
Podemos utilizar "scripts" pero siempre controlando que no nos estamos "cargando" la experiencia de usuario con una velocidad inferior a la esperada, que no estamos incurriendo en un uso indiscriminado "de cosas" que añadimos a nuestro Blog para añadir una funcionalidad determinada que ni siquiera utilizan nuestros usuarios.¿Cómo y dónde se crean los botones para redes sociales de Facebook, Twitter y Google+?

Si eres de los que les gusta hacerse él mismo las cosas y ver de dónde provienen, te dejo las principales guías de Diarios de la nube para crearte y ponerte los botones para las principales redes sociales del mundo.

Conecta tu Blog con Google+
Integra Twitter con tu Blog
Conecta tu Blog con Facebook
Conecta tu Blog con Pinterest
Conecta tu Blog con Linkedin
La guía para añadirte botones para redes sociales a tu Blog

¿Qué aspecto tendrá la botonera?

Será una botonera sencilla y funcional donde tendrás todo lo que necesitas para que tus usuarios puedan seguirte o compartir tu contenido en Facebook, Twitter y Google+.



Introduce los botones para redes sociales en tu Blog

1) Realiza una copia de seguridad antes de cualquier cambios para poder volver atrás en caso de error.
2) Dentro de Blogger, dirígete a "Plantilla" y pulsa el botón "Editar HTML" para realizar los siguientes pasos.


3) Pulsa CONTROL + F dentro del recuadro de código y busca: <b:includable id="shareButtons" var="post">
Si encuentras shareButtons dos veces, es porque una de ellas pertenece al móvil. Haz los cambios sobre la zona donde encuentres <b:includable id="shareButtons" var="post"> por segunda vez.
En esa zona se encuentran todos los botones para compartir que por defecto Blogger añade en tu plantilla a tus entradas. Es a partir de esta zona donde vamos a añadir los botones para redes sociales que precisemos.
Cambia el código que se encuentra bajo el <b:includable id="shareButtons" var="post"> por este otro. Así sustituirás uno por otro:
<b:includable id="shareButtons" var="post">
<b:if cond="data:blog.pageType == &quot;item&quot;">
<table cellspacing="0" width="100%">
<tr>
<td align="left">
<div class="fb-like" data-href="http://DIRECCIÓN_DE_TU_BLOG/" data-layout="button_count" data-show-faces="false" data-width="450"/>
<div class="fb-send" data-href="http://DIRECCIÓN_DE_TU_BLOG"/>
</td>
<td>
<!-- Inserta esta etiqueta donde quieras que aparezca Botón +1. -->
<div class="g-plusone" data-size="medium" data-annotation="none"></div>
<!-- Inserta esta etiqueta después de la última etiqueta de Botón +1. -->
<script type="text/javascript">
  window.___gcfg = {lang: "es"};
  (function() {
    var po = document.createElement("script"); po.type = "text/javascript"; po.async = true;
    po.src = "https://apis.google.com/js/platform.js";
    var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(po, s);
  })();
</script>
</td>
<td align="left">
<a class="twitter-follow-button" data-lang="es" data-show-count="false" href="https://DIRECCIÓN_TWITTER">Seguir a @NOMBRE_EN_TWITTER</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?&#39;http&#39;:&#39;https&#39;;if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+&#39;://platform.twitter.com/widgets.js&#39;;fjs.parentNode.insertBefore(js,fjs);}}(document, &#39;script&#39;, &#39;twitter-wjs&#39;);</script>
</td>
<td align="left">
<a class="twitter-share-button" data-lang="es" data-via="NOMBRE_EN_TWITTER" href="https://twitter.com/share">Twittear</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?&#39;http&#39;:&#39;https&#39;;if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+&#39;://platform.twitter.com/widgets.js&#39;;fjs.parentNode.insertBefore(js,fjs);}}(document, &#39;script&#39;, &#39;twitter-wjs&#39;);</script>
</td>
</tr>
</table>
</b:if>    
</b:includable>
El código en rojo lleva todos mis botones metidos en una tabla. el código <b:if cond="data:blog.pageType == &quot;item&quot;"> que al final de todo el añadido con mi tabla se cierra con un </b:if>  es el encargado de conseguir que SÓLO se dibujen los botones de las redes sociales cuando el usuario acceda a leer la entrada. Es decir, impedirás que se dibujen en la página principal haciendo que sólo se vean cuando tus visitantes hagan "clic" en más información. Simplemente rellena los textos en azul con los datos de tus redes sociales y ¡ya lo tienes!.¿Problemas, alguna duda?

Te añado un enlace para que te descargues un ejemplo de plantilla simple con todo el código que va bajo los <b:includable id="shareButtons" var="post"> preparado y funcionando para que te pueda servir de referencia. Pulsa "Save to Drive" y se almacenará automáticamente en tu propio Google Drive para que lo descargues donde necesites (en tu casa, en tu móvil, etc...).


Verás que el código va marcado con el texto <!--AQUÍ EL CÓDIGO PARA PONER EN EL PIE DE BLOGGER BOTONES PARA REDES SOCIALES--> hasta <!--FIN DEL CÓDIGO PARA PONER EN EL PIE DE BLOGGER BOTONES PARA REDES SOCIALES--> como puedes ver en la pantalla inferior.

Fuente: este post proviene de Diarios de la nube, donde puedes consultar el contenido original.
¿Vulnera este post tus derechos? Pincha aquí.
¿Qué te ha parecido esta idea?

Esta idea proviene de:

Y estas son sus últimas ideas publicadas:

SEO con imágenes

Las imágenes que utilizas en tu Blog, en tu web, no son sólo un reclamo o un añadido decorativo para tus contenido. Pueden servir a los buscadores web para comprender mejor la información que proporci ...

Etiquetas: generalsocial

Recomendamos

¡No te pierdas nuestra selección diaria!

Suscríbete y recibirás en tu correo nuestras mejores ideas

Suscríbete ahora

Relacionado

general social

Cómo poner botones para que te sigan en las redes sociales en Blogger

Poner botones para redes sociales con los que tus usuarios puedan seguirte te ayudará a incrementar la presencia de tus contenidos en Internet. Si bien muchas veces preferimos utilizar botones al final de nuestra entradas para que nuestros usuarios compartan si lo desean nuestras entradas, es importante también que puedan seguirnos por las redes sociales si así lo desean. Qué mejor sitio para que ...

icono botón redes sociales ...

Cómo insertar botones de Redes Sociales en Blogger

Hoy les traigo el Tutorial de cómo insertar los botones de las Redes Sociales en Blogger. Lo primero que vamos a hacer es Descargarnos los Botones que más nos gusten y alojarlos en hosting (hay muchos gratuitos), pero yo uso el Google Drive, que me parece más sencillo y más completo. Una vez tengamos las imágenes subidas a Google Drive, tenemos que averiguar su URL, (si no sabes cómo hacerlo, te l ...

internet blog community manager ...

Community Manager: ¡Comparte tus entradas en Twitter y Google Plus!

Serie de entradas: Habilidades necesarias para ser tu propio Community Manager. Leer La importancia del Contenido. Leer La importancia de la Cercanía y el Cariño. Leer ¿Qué es la Cultura 2.0? Leer Fomentar la Conversación. Leer Ser Creativo cada día. Leer El carácter de tu marca. Leer La constancia. Leer Facebook I: Perfil personal versus Fanpage. Leer Facebook II: Fanpages y Grupos. Leer Facebook ...

general medios sociales promocionar tu blog

Cómo poner otros botones para compartir en el blog

Os habréis dado cuenta ya que los iconos para compartir que trae Blogger, son bastante pequeñitos y discretos: Por eso yo los cambié hace ya tiempo por otros que pasan un pelín menos desapercibidos: Tampoco quiero ser "pesada" y poner unos gigantescos, pero esos me parece que se ven lo suficientemente bien como para "recordar" a la gente que pueden compartir mi post en las re ...

general social

Cómo añadir botones para redes sociales y marketing de contenidos a tu Blog.

Te presento la manera más sencilla y rápida de añadir botones para redes sociales a tu blog, tu página web o cualquier contenido que tengas en Internet. Utilizaremos el servicio AddThis que recientemente ha actualizado su presentación y ha simplificado enormemente la creación de botones para compartir contenido en redes sociales. ¿Qué son los botones para compartir en redes sociales? Hoy día no ba ...

avanzado BLOG redes sociales ...

Botones para imprimir, enviar por correo y compartir por Whastapp tus entradas

Dicen que si no estás en las redes sociales no existes y en cierto modo es así, si el posicionamiento web no es tu punto fuerte, crear una comunidad activa y participativa siendo activa en tus redes sociales puede hacer crecer tu blog. Aunque Google es Google. Esta semana he estado de cambios en el diseño del blog, me he centrado en simplificarlo al máximo y hacerlo todo más sencillo. Si te fijas, ...

general

Cómo crear un índice con todas las entradas de tu Blog que se genere automáticamente.

La generación de un índice de entradas automático para un blog es algo que muchos Bloggers anhelan utilizar en sus páginas: para crear índices con las recetas de cocina, con las películas y sus críticas, con las fotografías, los poemas, los escritos, las plantas, animales... un sinfín de conceptos que cada Blog maneja según su temática y que dada su cantidad es imposible exponer a los usuarios en ...