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".
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 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:likepor:recommendsi quieres que el bot�n diga:.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:
- Copia el texto que pusiste en el t�tulo en el gadget.
- 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. - Una vez activado, coloca el texto del t�tulo del gadget en el campo y pulsa enter.
- El editor te enviar� a la primera linea de c�digo del gadget donde has colocado el bot�n. Agrega el atributo
mobilecon el valoryes, tal y como se muestra a continuaci�n:
<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-shareponiendo el valortrue.
Comments :
Post a Comment