Por qué incluir botones de compartir en mi blog o página web

Antes de comenzar, déjame hacerte una recomendación: Consigue montones de seguidores en tus redes sociales en esta web: registrate

A día de hoy es sabida la importancia de promover al máximo la visibilidad de nuestro contenido en las redes sociales, facilitándolo con los botones al principio y o final de cada artículo, invitando a lectores a compartir el contenido en sus redes de amigos y conocidos. Tenemos que facilitar la promoción que nuestros lectores nos pueden hacer, y el trafico que pueden generar. Entre más personas vea un enlace a tu web, más posibilidad de tráfico, y Google adora el tráfico.

En el caso de mi web, he decidido promover la difusión de mi contenido con los botones básicos de redes sociales, concretamente los que tengo al inicio y debajo de cada entrada, LinkedIn, Twitter, Google + y Facebook. Ver ejemplo completo de código de botones para compartin en redes sociales al fina del post.

LinkedIn

LinkedIn, una red para profesionales la cual es la que más ha crecido proporcionalmente en el ultimo año. Es buena para empresas, productos y servicios porque puede crear vínculos de importancia con clientes potenciales, colaboradores, etc. Podemos configurar el botón de compartir en LinkedIn desde la página Share Plugin Generator – LinkedIn Developer Network.

 

Twitter

Twitter es una red idónea para crear conversación directa con los usuarios, es muy utilizada por las empresas como soporte ya que es ideal para resolver dudas sobre nuestro producto. Podemos conseguir el botón de Twitter en la página de recursos, desde donde podemos elegir el tipo de botón (compartir, seguir, etc.) y configurar su aspecto visual.

 

Botón seguir twitter para promover la cuenta de Twitter personal o de empresa.

Una vez generado este botón en tu página web o blog, los usuarios pueden seguir tu cuenta de Twitter con un solo click, lo que te permite aumentar fácilmente el número de seguidores.

Para ponerlo a funcionar click aquí, y personaliza tu botón “Seguir”. Puedes utilizar: el nombre del usuario, si quieres mostrar el nombre del usuario, el tamaño del botón, el idioma. finalmente copiar y pegar el código HTML que genera en el lugar que quieras que aparezca en tu página web.

 

Añade cualquier cronología pública de Twitter en tu sitio web

Configurar un widget de usuario aqui. Solo tienes que seleccionar la fuente de tu cronología, las opciones, y copiar y pegar el código HTML en tu página. En esa misma página, hay también acceso a Favoritos y Listas

 

Mis últimos tweets

Me parecía interesante incluir los contenidos de mis últimos tweets en mi web y es lo que me ha sido más difícil de solucionar.

Cómo mostrar los últimos tweets en tu página web, de cualquier usuario, sin necesidad de identificarse y no morir en el intento. leemos los datos desde JSON, apoyándonos en la librería que facilita Twitter (blogger.js). Los resultados serán mostrados en una lista que en este caso tendrán laid=»twitter_update_list».

El resultado con estilos sería lo que sale a la columna derecha de mi web, para mi es mejor esta solución que tratas los tweets y le aplicas los estilos que necesites, al widget que es un formato más cerrado.


<ul id="twitter_update_list"></ul>
<script src="http://twitter.com/javascripts/blogger.js" type="text/javascript"></script>
<script src="http://api.twitter.com/1/statuses/user_timeline.json?screen_name=USUARIO&include_rts=1&exclude_replies=true&callback=twitterCallback2&count=10" type="text/javascript"></script>

Hay que reemplazar screen_name, y count. Como habréis podido observar, si el tweet tiene algún enlace este aparece activado. Adicionalmente se muestra la fecha al final de cada uno. También habréis visto que hay en el código unos cuantos parámetros que nos permiten configurar la salida:

include_rts :  include_rts=1 indica que se incluirán los RT hechos por el usuario, así que si no quieres que se vean hay que pasar el valor a 0.
exclude_replies : false o true para indicar respectivamente si se incluirán en la lista las respuestas con mención o no.
count: con un valor para especificar el número de tweets a mostrar.

El Formato de salida del código es el siguiente:


<ul id="twitter_update_list">
  <li><span>CONTENIDO DEL TWEET</span>
    <a style="font-size:85%" href="URL_DEL_TWEET">FECHA</a>
  </li>
<ul>

Google +

Google + es la red social de la gran G, no es muy popular a nivel de usuarios comunes, gente de a pie (al menos en España) aunque está subiendo fuerte en otros países. La gran ventaja de esta red es su vinculación con la mejora de posiciones en las SERPs, a Google le interesa darle prioridad a los resultados que contiene su red, y así todo queda en casa. Podemos obtener el botón +1 de Google +desde la página oficial.

El formato estándar no es lo mejor, yo prefiero la opción de Carga de JavaScript asíncrona que la encontrarás más abajo en la misma página. La inclusión asíncrona permite que la web se siga cargando mientras el navegador obtiene el código JavaScript del botón +1. Al cargar en paralelo, se garantiza que la solicitud HTTP para obtener el Script del botón no aumente el tiempo de carga.

<div class="g-plusone" data-size="medium" ></div>

Para conseguir el mejor rendimiento, incluye este código justo después de la última etiqueta +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/plusone.js" 
  var s = document.getElementsByTagName("script")[0] s.parentNode.insertBefore(po, s) 
 })() 
</script>

Facebook Like and Share Button

Por último tenemos la red social Facebook es la principal en cuanto a volumen de usuarios, por lo que es imprescindible permitir distribuir nuestro contenido en él. Su botón de «Me gusta» se puede configurar desde la página oficial del Social Plugin, aquí podemos establecer el tamaño y otras opciones visuales. Luego con pulsar Get Code, copiar el código y pegarlo donde queramos estará listo.

Facebook Like and Share Button
Hay que saber que el antiguo botón de compartir ya no se utiliza de forma oficial, yo intenté incluirlo pero no queda tan integrado, para quien esté interesado en el código ver:

<a href="http://www.facebook.com/sharer.php?u=http://queenoftruffles.com/el-producto.php?id=21" title="Compartir" >Compartir en Face<a>

Ejemplo los cuatro botones sociales que tengo puesto en mi web

<span class="compartir"> 
  <a href="https://twitter.com/share" class="twitter-share-button" data-via="NOMBRE USUARIO" data-lang="es" rel="nofollow">Twittear</a> 
  <script> 
  !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0]if(!d.getElementById(id)){js=d.createElement(s)js.id=idjs.src="//platform.twitter.com/widgets.js"fjs.parentNode.insertBefore(js,fjs)}}(document,"script","twitter-wjs") 
  </script>
</span>
<span class="compartir"> 
  <script src="//platform.linkedin.com/in.js" type="text/javascript"></script> 
  <script type="IN/Share" data-url="LA URL" data-counter="right"></script> 
</span>
<span class="compartir compartirs"> 
  <div class="g-plusone" data-size="medium" ></div> 
</span>
<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/plusone.js" 
  var s = document.getElementsByTagName("script")[0] s.parentNode.insertBefore(po, s) 
 })() 
</script>
<div id="fb-root"></div> 
<script>(function(d, s, id) { 
 var js, fjs = d.getElementsByTagName(s)[0] 
 if (d.getElementById(id)) return 
 js = d.createElement(s) js.id = id 
 js.src = "//connect.facebook.net/es_LA/all.js#xfbml=1&appId=438277602903016" 
 fjs.parentNode.insertBefore(js, fjs) 
}(document, "script", "facebook-jssdk"))</script> 
<div class="fb-like" data-href="LA URL" data-send="false" data-layout="button_count" data-width="100" data-show-faces="true" data-font="tahoma"></div>

Estilos CSS
.compartir{width:100px height:22px float:left padding:2px 4px }
.compartirs{ width:70px}

11 comentarios en “Botones para compartir y hacer mi web más social

  1. Santos Garcia Reply

    Muy buenas tardes muy buena información ya que estoy empezando a construir mi web y bueno quiero aprovecharlo gracias por compartir

  2. Daymer Reply

    Muy buen articulo tratare de hacer lo posible para ponerlo en cada uno de los productos de mi sitio web.

  3. Fernando Mendoza Reply

    Revisando el ejemplo de los cuatro botones, no esta la url a la cual identificar para el boton de Google plus, por que?

  4. isaac Reply

    ¿Hola sabrias porque el color dark en los plugins de facebook no se visualiza?

    Si vas a los ejemplos de la página de facebook https://developers.facebook.com/docs/plugins/follow-button se verán en negro cuando se pone dark, pero si copias su código y lo agregas a tu documento htm no se obtiene ese fondo negro.

    Alguna sugerencia, no se que puede estar pasando

  5. Jose Luis Gutierrez Reply

    Gracias por compartir tus conocimientos, voy a intentar implementar los botones en mi sitio Web.

  6. Elizabeth Reply

    excelente, y muy bien explicado, gracias por tu tiempo. Tratare de implementarlo en mi web

  7. Luis Reply

    El diseño de mi sitio Web es en Fluid Grid de Dreamweaver. Intenté colocar el más simple de los botones desde la página oficial de Facebook en todas sus opciones y no pude conseguir que se viera algo en mi sitio.

  8. Luis Sosa Reply

    El post es bastante instructivo. Ya veré si puedo aprovecharlo en la web que estoy construyendo con el diseño Fluid Grid de Dreamweaver.

Deja un comentario