viernes, 28 de septiembre de 2012

Botón Compartir en Linkedin para Blogger

Cuando creas una entrada en un blog de Blogger aparecen en la parte inferior los iconos para compartir ésta en twiter, Facebook y Google+ pero muy probablemente eches de menos el compartir en Linkedin; en este artículo (donde puedes ver el mencionado botón) te explicaremos como añadirlo, personalizarlo y cambiar el idioma del texto.

  1. Entramos en Blogger, vamos al apartado Plantilla y pulsamos sobre el botón "Edición de HTML" y marcamos la casilla "Expandir plantilla de artilugios".


  2. Situaremos el botón Compartir en Linkedin justo debajo de los botones de twitter, facebook... (tal como está en este blog) por lo que buscamos dentro del HTML de la plantilla el código:
    <div class='post-footer-line post-footer-line-2'>
    
  3. Justo encima del código anterior añadimos el código siguiente para añadir el botón Compartir en Linkedin:
    <script src='http://platform.linkedin.com/in.js' type='text/javascript'/>
    <script data-counter='right' expr:data-url='data:post.url' type='IN/Share'/>
    
    Tras insertar el código guardamos la plantilla y recargamos nuestra página, nos aparecerá el siguiente botón.


  4. Todo lo comentado anteriormente está bien, lo podéis encontrar con facilidad en otros blogs, ahora vamos a por nota... El botón Compartir en Linkedin es ligeramente personalizable, os muestro las 3 opciones:

    Areatic, botón share / compartir en Blogger - Personalizar botón
    De izquierda a derecha, en función del valor de "data-counter" del segundo <script>:
    • data-counter="top":
      <script src='http://platform.linkedin.com/in.js' type='text/javascript'/>
      <script data-counter='top' expr:data-url='data:post.url' type='IN/Share'/>
      
    • data-counter="right":
      <script src='http://platform.linkedin.com/in.js' type='text/javascript'/>
      <script data-counter='right' expr:data-url='data:post.url' type='IN/Share'/>
      
    • eliminando data-counter del script:
      <script src='http://platform.linkedin.com/in.js' type='text/javascript'/>
      <script expr:data-url='data:post.url' type='IN/Share'/>
      

  5. Y ahora ya a por la matrícula de honor, je je je... Supongo que os habéis fijado en que el texto que aparece en el botón Compartir en Linkedin es Share y seguro que os gustaría cambiarlo a Compartir, a otro idioma o personalizarlo incluso más... para hacerlo utilizaremos JQuery, justo bajo las 2 líneas insertadas anteriormente añadiremos 2 más, el código quedaría de la forma:

    <script src='http://platform.linkedin.com/in.js' type='text/javascript'/>
    <script data-counter='right' expr:data-url='data:post.url' type='IN/Share'/>
    <script src='//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
    <script> $(window).load( function() { $('.IN-widget').find('span[id$="-title-text"]').text('Share'); }); </script>
    

    Simplemente es modificar en la última línea del código anterior el texto Share por Compartir, cualquier otro idioma o simplemente el texto que más nos guste (manteniendo ' ').
Hecho, si recargas la página ya tienes el botón Compartir en Linkedin personalizado y en el idioma deseado. Es importante destacar que el HTML de los puntos 3, 4 y 5 podemos insertarlo en nuestro blog de Blogger pero también en cualquier otro blog o web. Espero que os sea útil este artículo, dentro de areaTIC puedes encontrar otros artículos interesantes, no dudes en consultar nuestro archivo.


5 comentarios:

Jorge del Campo Andrade dijo...

Hola, tengo la siguiente duda: Al darle en compartir, me aparece el nombre de mi blog como titulo. ¿como hago para que aparezca el titulo de la entrada?
Este es mi blog, para veas lo que ocurre. Saludos!
http://blogdelyorgio.blogspot.com/2013/10/periodismo-redentor-carrona-televisiva.html

David Berdié Escolano dijo...

He estado revisando tu blog y efectivamente sale el título del blog en lugar de la entrada, he intentado reproducir este comportamiento en areatic.net pero no lo he conseguido. Por el comportamiento que he visto en otros blogs prueba lo siguiente, busca en tu plantilla el código:

<script data-counter='right' type='IN/Share'></script>

Lo sustituyes por este y me cuentas qué tal:

<script data-counter='right' expr:data-url='data:post.url' type='IN/Share'></script>

Lo que estamos haciendo al script es pasarle la URL del post, creo que el texto lo coge a partir del tag <title> de esa URL. En tu caso al no pasar ninguna te coge el <title> de la URL general del blog.

Luis Herrán dijo...
Este comentario ha sido eliminado por el autor.
Luis Herrán dijo...
Este comentario ha sido eliminado por el autor.
Manuel Sebastián Segura Muñoz dijo...

Hola, han pasado varios años desde este post, me gustaría saber en dónde tengo que pegar ahora el código para compartir de Linkedin ya que en mi plantilla de código HTML no sale exactamente: ...class='post-footer-line post-footer-line-2'>. He creado un blog y todavía no he publicado ninguna entrada, solo un borrador. Gracias por su atención.

Publicar un comentario