16 junio 2015

¿Tienes Problemas para Poner el Botón: Me gusta? He aquí cómo Agregarlo


Ya son dos personas las que me han comentado que tienen problemas para poner el botón de Facebook  para que se comparta el blog. Cosa que también sucedió con su nuevo complemento para páginas.

La razón por la que se está teniendo problemas para agregar todos estos complementos o plugins (en inglés), se debe a que se está agregando el script que se ofrece en la página de Facebook, sin envolverlo o encerrarlo en una sección llamada: CDATA. Por ello el script no se acepta y da un error el editor.

Tengo una entrada de junio del 2011 en donde detalladamente explicaba cómo poner el botón (uuuh, ya llovió y nevó desde aquel entonces) usando su vieja y ya retirada versión: "iframe" y explicaba cómo ponerlo en la versión web.

Pues para usar su botoncito como se debe, y para evitar problemas de que funcione o no, en esta entrada voy a explicar cómo ponerlo tanto en la versión web como la versión móvil de Blogger y servirá para que se comparta el blog. Además te facilitaré el código actualizado. Ya verás que fácil es ;)

Cómo poner el bóton

Simplemente copia todo el código del estilo del botón que te guste, edita los valores que se indican si es necesario, y ponlo en un gadget: "HTML/Javascript" en la columna lateral del blog, o el pie de la página desde "Diseño".

Gadget de Blogger HTML Javascript

El código es el mismo que ofrecen en la página de Facebook que facilita el botón.

Elegir el estilo del botón

1. Estilo Standar (con las fotos de los amigos/fans)



Ancho mínimo: 225 píxeles.
Ancho por defecto (si no lo especificas en el código): 450 píxeles.
Altura: 35 píxeles (sin fotos) o 80 píxeles (con fotos). 


Código:
  <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_ES/sdk.js#xfbml=1&version=v2.3";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div class="fb-like" data-href="URL_DEL_BLOG" data-layout="standard" data-action="like" data-width="320" data-show-faces="true" data-share="false"></div>



2. Box_count



Ancho mínimo: 55 píxeles.
Ancho por defecto (si no lo agregas en el código) 55 píxeles.
Altura: 65 píxeles.


Código:
<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/en_US/sdk.js#xfbml=1&version=v2.3";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div class="fb-like" data-href="URL_DEL_BLOG" data-layout="box_count" data-action="like" data-share="false" data-width="55"></div>


3. Button_count 



Ancho mínimo: 90 píxeles.
Ancho por defecto (si no lo agregas en el código) 90 píxeles.
Altura: 20 píxeles.

Código:
<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_ES/sdk.js#xfbml=1&version=v2.3";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div class="fb-like" data-href="http://www.compartidisimo.com" data-width="320" data-layout="button_count" data-action="like" data-share="false"></div>


4. Button



Ancho mínimo: 47 píxeles.
Ancho por defecto (si no agregas en el código): 47 píxeles.
Altura: 20 píxeles.

Código:

<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_ES/sdk.js#xfbml=1&version=v2.3";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div class="fb-like" data-href="URL_DEL_BLOG" data-layout="button" data-action="like" data-share="false"></div>

Cómo editar los valores de los atributos

He resaltado de color naranja, los valores de los atributos que pueden editarse en cada botón. En el caso del ancho, como ejemplo he puesto 320 que es el mínimo ancho para el botón Standard. Verifica el ancho mínimo y otros detalles que puse en el recuadro al principio de cada botón.

En:
  • data-action="like". Puedes editar el texto del botón. Cambia: like  por:
    recommend  si quieres que el botón diga: Recomendar.
  • data-href="URL_DEL_BLOG".Cambia el texto: URL_DEL_BLOG, por la dirección web de la página de inicio del blog.
  • data-width="320". Es ancho que tendrá el botón. Es en píxeles y solo lleva valor numérico.
  • data-show-faces="true". Indica si se mostrará la foto del perfil de quienes hicieron: me gusta a tu blog. Cambia true por false si no quieres que se muestren las fotos. Se aplica solo para el botón Standar.
  • data-share="false". Cambia false por true si quieres que aparezca el botón de compartir a un lado del botón: me gusta.

Poner el botón sobre fondo Obscuro

Si se usara el botón con estilo standar, y si se va a poner en un fondo obscuro, se agrega el atributo: data-colorsheme, con el valor dark, de ese modo el texto aparece color blanco.
<div class="fb-like" data-action="like" data-colorsheme="dark" data-href="URL_DEL_BLOG" data-layout="standard" data-share="false" data-width="320"></div>

Cómo Hacer que aparezca el botón en la versión móvil

Si utilizas la versión móvil de Blogger y quieres que aparezca, tienes que tener seleccionada la opción que dice "Personalizado" al seleccionar la plantilla móvil, de otro modo no funcionará. Si ya la tienes seleccionada, solo sigue estos pasos:

  1. Copia el texto que pusiste en el título en el gadget.
  2. Ve al editor del código de la plantilla: "Editar HTML" y luego haz click dentro de éste, cuidando no mover nada, y pulsa las techas Ctrl + F simultáneamente para que se active el buscador.
  3. Una vez activado, coloca el texto del título del gadget en el campo y pulsa enter.
  4. El editor te enviará a la primera linea de código del gadget donde has colocado el botón. Agrega el atributo mobile con el valor yes, tal y como se muestra a continuación:
  5. <b:widget id='HTML2' locked='false' title='Título que pusiste' type='HTML' mobile='yes'>
El valor del id del gadget: 'HTML2', es solo un ejemplo. Puede aparecer cualquier otro número a un lado de HTML, por ejemplo HTML4 dependiendo de cuántos gadgets "HTML/JavaScript" hayas agregado antes.

No está de más decirlo: si utilizas una plantilla con un diseño adaptable (responsive en inglés), no tendrás que habilitar el gadget, ya que el botón aparecerá en el lugar donde lo pusiste de acuerdo a cómo se muestre la sección que lo contenga en dispositivos pequeños.

Notas Finales:
  • Si utilizas también el complemento: "Page Plugin" no necesitas poner el primer código que incluye el script y que resalte de azulito, otra vez ya que es el mismo. Solo pon el que está debajo y que empieza con: <div class="fb-like"...>.Pero hay que asegurarse de que también se cargue en la versión móvil de Blogger si se usara, habilitando el gadget para que se muestre el contenido (pensando en que el código se agregó en el gadget).
  • Es posible agregar el botón que dice: "compartir" a un lado del botón: "Me gusta", si cambias el valor del atributo: data-share poniendo el valor true.

Artículos recomendados:

Gracias por compartir tu comentario y hacernos saber tu opinión.