Añadir directamente el "Fan Box" de Facebook

Veíamos en una entrada anterior como crear una página de fans en Facebook para el blog.

En el último paso de esa entrada, se explicaba como añadir desde Facebook un "Fan Box", es decir, el gadget que muestra nuestros seguidores de allí en la sidebar de nuestro blog.

Bastantes personas me han reportado diferentes problemas al tratar de añadir el gadget desde Facebook a su blog, de hecho yo misma he tenido problemas al hacerlo en algún blog.


Comparto con vosotros en esta entrada la forma que he encontrado para añadirlo en algunos de mis blogs y que, hasta ahora no me ha dado ningún problema.

[1] Desde Diseño añadimos un nuevo gadget HTML/Javascript y pegamos este código en su interior:

<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/es_LA" type="text/javascript"></script><script type="text/javascript">FB.init("1b8f0f706c312c05f42224b5b3399f80");</script><fb:fan connections="22" width="225" profile_id="XXXXXXXXXXXX" stream=""></fb:fan>

[2] Una vez añadido el código, cambiamos donde dice XXXXXXXXXXXX por la id de nuestra página en Facebook y guardamos.


¿Como averiguo la id de mi página en Facebook?

[1] Accedemos a nuestra página de Facebook.

[2] Nos situamos en la parte que muestra nuestra imagen y pinchamos en "Modificar página".

[3] Nos fijamos entonces en url que se muestra en el navegador, y que será algo como esto:

http://www.facebook.com/home.php?#!/pages/edit/?id=285635029327

Esos números que se muestran al final de la url, son la id de nuestra página, y son los números que hemos de colocar en el código del gadget "Fan Box" sustituyendo a las XXXXXXXXXXXX.

Botón para Facebook "Me gusta" o "Recomendar"

Facebook ha creado un nuevo conjunto de plugins Sociales, que permitirá a nuestros lectores el compartir rápidamente nuestros artículos con sus amigos de Facebook. También podemos llegar a saber a cuánta gente le ha gustado una determinada entrada.

Una vez instalado el código se verá algo como esto al pie de cada una de las entradas:

Botón sin clicks

Botón con clicks

[1] En Edición HTML de nuestro panel, marcamos la opción de Expandir las plantillas de artilugios.

[2] Localizamos la etiqueta <data:post.body/> o en su defecto <p><data:post.body/></p> y justo después de esa etiqueta, o justo antes pegamos el código para el botón:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:40px;'/>
</b:if>

Si pegamos el código antes de la etiqueta, el botón para Facebook se mostrará justo debajo del título de las entradas; si en cambio lo colocamos después, se mostrará justo al final de las mismas:

Si en lugar del "Me gusta" queremos usar el "Recomendar" cambiamos donde dice "like" (destacado en negrita en el código) por "recommend":

Para blog con diseño más oscuro, quizá quedase mejor la versión "dark" (oscura) del botón. Para eso cambiamos en el código el "light" (destacado en negrita) por "dark":

Tal como está configurado el código, el botón solo será visible en la página de entradas, para mostrarlo también en la principal tendremos que eliminar del código la línea de comienzo: <b:if cond='data:blog.pageType == &quot;item&quot;'> y el cierre de la condicional al final: </b:if>

Si en lugar de mostrar el botón dentro del cuerpo de las entradas, queremos hacerlo al pie de las mismas (post-footer); localizamos esta línea y lo colocamos a continuación:

<div class='post-footer-line post-footer-line-3'/>

Cambiar la url de nuestra página en Facebook

Cuando creamos una página en Facebook  el servicio por defecto nos asigna una url demasiado larga y nada fácil de recordar a la hora de darle la dirección a tus amigos por ejemplo...

En principio la url asignada a nuestra página es algo parecido a esta:

http://www.facebook.com/pages/elescaparate/185550966885

Tenemos la posibilidad de cambiar esa url por una más sencilla una vez en nuestra página tengamos un mínimo de 25 "fans".

Lo haremos en unos minutos desde http://www.facebook.com/username.

El resultado será una url mucho más amigable, algo como esto:

http://www.facebook.com/elescaparate

Notas:

Fijaros que también es posible desde ahí mismo cambiar la url de nuestra página personal (perfil).

Una vez hemos cambiado la url, no hay vuelta atrás, el sistema solo nos permite hacer el cambio una vez.

Crear una página de fans en Facebook para tu blog

Últimamente me han preguntado varias personas como colocar un gadget con los fans de su blog en Facebook.

Para poder hacer esto, tenemos que crear una nueva página en Facebook para nuestro blog, lo que nos permitirá entonces añadir el gadget de "Fans" desde allí.




[1] Nos daremos de alta en Facebook si es que aún no lo estamos.

[2] Ahora tendremos que loguearnos en Facebook para crear una nueva página para fans de nuestro blog, desde este enlace: Página fans de FaceBook

[3] Una vez allí veremos unos campos que hemos de completar:

Aquí seleccionamos como veis en la imagen "Marca, producto, o de la Organización" y escogemos la opción "Sitio web" que es la más lógica si vamos a usar el gadget para que las visitas de nuestro blog se hagan fans del mismo.

En "Nombre de la página" colocamos el de nuestro blog.

Debajo podemos marcar la opción para hacer la página pública o dejarlo para después una vez hayamos terminado de prepararla.

Completamos las palabras de seguridad y damos en "Crear página".

[4] En la página siguiente hemos de incluir una imagen para nuestra página y editar la información para incluir los datos que consideremos oportunos.

[5] El siguiente paso será importar las entradas de nuestro blog a la nueva página de fans del mismo.
En las pestañas del menú de la página, pinchamos en el simbolo + y escogemos la opción Notas.

En la siguiente pantalla pinchamos en el botón "Escribir una nota nueva".

Veremos entonces un editor con algunos iconos pequeños en la parte superior derecha, pinchamos en el que parece una libretita (Notas).

En la siguiente página optamos por "Importar blog".

En la siguiente página introducimos la url de nuestro blog o la url del feed del blog y pinchamos en Empezar a importar, una vez termine, pinchamos para confirmar la importación.

Después de confirmar la exportación, las últimas entradas de nuestro blog se habrán importado a nuestra página de fans.
Volvemos al inicio de la nueva página y ahí veremos la nueva página lista tal como la hemos configurado.

[6] Vamos ahora a incluir un gadget en nuestro blog para facilitar que las visitas se hagan "fans" de la página que acabamos de crear.

En la nueva página creada, debajo de la imagen que hemos incluido en su perfil, pinchamos en Modificar página

En la nueva página que se abre, localizamos el gadget de la imagen y pinchamos en "Promote with a like Box".

Pasamos a la página siguiente y en el formulario escogemos las opciones para el panel.

Pinchamos en "Get code" y copiamos el código "iframe" para colocarlo en un gadget HTML/Javascrip en la sidebar de nuestro blog.

Nota:

Una vez tengamos el gadget instalado, si este es demasiado ancho y no luce bien en la sidebar, desde "editar gadget" localizamos algo como esto: width="292" en su código y reducimos ese valor (ancho del gadget) al necesario para ajustarlo.

Botón "enviar entradas a FaceBook"

Hace unos días que a través de la última entrada de Blogger Widgets, me enteraba de que Facebook presentaba de forma oficial un botón que posibilita el envío de entradas.

El botón está disponible en cuatro modelos, todos ellos con un contador que mostrará la cantidad de veces que la entrada ha sido compartida en FaceBook.

¿Como colocar el botón en el blog?

[1] Antes que nada hemos de escoger que botón vamos a mostrar y copiar su código.

[2] Iremos a la parte de Edición HTML de nuestro panel y marcamos la casilla de "Expandir las plantillas de artilugios".

[3] Localizamos esta línea:

<div class='post-header-line-1'/>

y justo después, copiamos el código del botón elegido.

Si esa línea no estuviese disponible en nuestra plantilla, localizamos entonces esta:

<data:post.body/>

y justo antes, copiamos el código del botón elegido.

Códigos para los distintos modelos de botones

[1] Botón grande situado a la derecha del contenido de la entrada:

Código:

<div style="float:right;padding:4px;">
<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='box_count'/>
<script type="text/javascript" src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"/>
</div>

Para usar este mismo botón pero que se muestre a la izquierda del contenido de la entrada, cambiamos en el código anterior float:right por float:left


[2] Botón pequeño situado a la derecha del contenido de la entrada:

Código:

<div style="float:right;padding:4px;">
<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='button_count'/>
<script type="text/javascript" src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"/>
</div>

Para usar este mismo botón pero que se muestre a la izquierda del contenido de la entrada, cambiamos en el código anterior float:right por float:left