83

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:

Enviar a Facebook


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:

Twett Facebook

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

Entradas Relacionadas:

83 comentarios:


SYSMEDESIGN

Gracias , Esta muy bueno :P

Dialoguista

Buen dato!!!

Unknown

Gracias, ahora mismo lo pongo en mi blog!!

Quisiera pedirte ayuda con un tema que no tiene nada que ver con este, quisiera poder contraer mis post, como tu lo haces, en los casos cuando alguien le da click a una etiqueta, y cuando pone entrada antiguas, quisiera que salgan contraidas!!! ayuda plz!!!

Tu blog es muy bueno, gracias por la ayuda!

Anónimo

Jhony Page Mira en esta entrada:
http://elescaparatederosa.blogspot.com/2007/04/ttulos-expandibles-en-los-post-de-las.html

Anónimo

Iva a ponerle esto a mi blog en cuanto lo lei aqui, pero despues recorde que mi blog no tiene muchas visitas todavia jejeje.

Ya sera luego, cuando talvez si se necesite.

Tengo ahora una pregunta:

¿Se puede usar el formulario de comentarios emergente solo en la pagina principal? Y en las paginas de las entradas individuales, usar el formulario incrustado.

azagra

Yo creo que es un botón innecesario ese, Facebook ya dispone un botón para eso,mediante el que lo que publicas en el blog,sale automáticamente en tu Facebook.

Unknown

Rosi hola!!! paso a saludarte, desearte buena semana y los besos :)

Unknown

Hmmm Rosa ... serás tú mi salvadora? No dude en convertirme en una de tus fieles seguidoras, después de descubrir tu trabajo. Es impresionante! Cuánto esfuerzo!

Vengo a remolque del Capitán Tormentas. Él me ha sugerido que te visite pues mis entradas no se actualizan en los blogs de mis seguidores ... y claro, aunque ilusión no me falta en este fascinte mundo del Blog, soy una pardilla en cuestiones técnicas. Algo estoy haciendo mal.

Muchas gracias por tu ayuda, no sabes lo agradecida que te estoy si puedes echarme una mano.

Muacc, Mela "elrincondemela.blogspot.com"

c

Hola Rosa, 2 preguntas: una, este boton es para que solo yo publique entradas en mi Facebook o la gente puede hacerlo en el suyo tambien?? otra pregunta, quiero agregar mis seguidores pero por cuetiones de diseño quiero que solo se vean en la pagina principal o en una entrada sola, llamada La gente dice... en mi blog peliculasantacruz, eso es posible?? Maria C

Anónimo

Don Choky No, eso no es posible.

Viviana

BanakaBanaka me lo habia recomendado, q bueno q lo pudiste postear

gracias!!!

Rick Wakeman

uuhh gracias Rosa por el dato, ahora lo he implementado en mi blog vinilosrock.blogspot.com. El problema es que estoy utilizando otro truco tuyo que hace que en la pagina principal se muestren solo un resumen de las entradas y ahora me aparece en botón de facebook en cada resumen. Como puedo hacerlo para qeu solo aparezca este botón cuando accedo a todo el contenido de la entrada y no en todos los resúmenes de la pagina principal???

de antemano, gracias

Anónimo

azagra No es lo mismo... con este, cualquiera de tus visitas envia la entrada que considera interesante en tu blog a SU Facebook... de ahí el contador, marca las veces que alguien ha compartido tu entrada en su Facebook.

Anónimo

Graciela Besitos cielo!!!:D

Anónimo

Mela Hay algún error en el feed de tu blog, aunque no se que exactamente...

Ve en tu panel de Blogger a Configuracion luego a la pestaña Feed del sitio y comprueba que tengas puesto "Completo" en Permitir feeds del blog, sino es así lo pones y guardas cambios.

Ve también en Configuración a Archivo y comprueba que tengas SI en ¿Habilitar páginas de entrada?

Anónimo

c La respuesta a tu primera pregunta en el comentario numero 13... a la segunda, no, no es posible añadir el gadget de seguidores en una entrada.

Anónimo

El Pape Incluye el código del botón dentro de esta condicional:
<b:if cond='data:blog.pageType == "item"'>
Aqui el código del botón
</b:if>

Sedrach

Exelente, me gusto mas este boton que el pasado que habia ubicado en mi blog.... Ya lo aplique pero en las lineas de marcadores sociales...
Gracias Rosa....

Alex González

Gracias Rosa, me ha servido ahorita lo estoy colocando en mi blog de prueba pero dejame ver en mis otros blogs y lo coloco.

GRACIAS

c

Gracias Rosa!!!! C

Unknown

Gracias Rosa por tu tiempo ... eres alucinante! Bien he comprobado los datos en Configuración, todo correcto pero en Archivo, ¿Habilitar páginas de entrada? ... no puedo seleccionar SI(ni NO), aparece en gris clarito pero como si estuviera inhabilitado. Alguna sugerencia? Sigo desesperada, no se actualizan las entradas! Kisses y espero noticias! elrincondemela.blogspot.com

Rick Wakeman

hey.. muchas gracias... quedó impecable¡¡¡¡ :D

Anónimo

Mela Estará en gris clarito e inhabilitado, pero supongo que dice SI ¿verdad?...porque entonces está correcto.

Dime...¿usas algún servicio de feed... como FeedBurner por ejemplo?

EM2.0

Gracias por la idea he probado a ponerlo en el post-footer y también da resultado.

JustMe

Muchas gracias! :)

paZtRy...

Tenia tanta ilusion de ponerle esto a mi blog y todo va bien hasta el momentode publicar la entrada en facebook la publica, pero lo hace con el texto de la columna derecha y no con el del post, habra una forma de arreglar eso, este es el blog en cuestion, es de pruebas.

http://perritosfrios.blogspot.com/

Anónimo

paZtRy... Lo siento, no puedo ayudarte, no he probado yo misma el botón...me limité a explicar tal como lo hacen en otros sitios, pero nadie me ha comentado nada como eso...

Ariel

Ya no está mi mensaje :S

Anónimo

אֲרִיאֵל Cual era, repitelo sino te importa... ayer algo pasó en Blogger o en mi blog, que ya me han comentado varios que no aparece su mensaje o que aparece y luego no está...:S

Ariel

Gracias Rosa, era sobre algo también raro que está pasando, porque de un tiempo a esta parte mi Blog aparecía con la columna de la izquierda debajo de las entradas. Yo no he hecho nada y ahora aparece normal.

Es decir, no es el problema de que en la vista de edición aparece todo en vertical, sino en la vista del blog.

Ariel

:$ qué pena, otra vez está igual y he probado en distintas dimenciones de pantalla, en distintos ordenadores y nada, todo esto es raro.
Quizá alguien más tenga o ha tenido ese problema.

Rosa, gracias por tu tiempo, en serio.

Anónimo

אֲרִיאֵל No se porque pienso que es un problema con el "leer más"... sino no se me ocurre otra cosa, pues las medidas están bien en la plantilla...

¿Qué sistema usas para el "leer más?

Ariel

Gracias Rosa, yo hice el sistema que tu colocaste acá hace meses, pero luego me pasé al nuevo editor de entradas y lo único que hice fue entrar por el Escritorio a FORMATO y borré los códigos que se tenían que poner según las indicaciones que diste.
Claro era los códigos de entradas expandibles que publicaste hace un tiempo, acá el link.

Voy a tratar de SUPRIMIR esos códigos siguiendo el prosedimiento a la inversa, espero todo salga bien, Rosa, Gracias, en serio gracias.

Juan Pablo Meza Recabarren

:D buenisim aporte tod funcinand de maravillas saudos!!!

Anónimo

אֲרִיאֵל Claro, eso es... no solo del editor, tienes que borrar todo lo añadido para el leer más... como bien dices, ve guiándote por esa entrada para hacerlo a la inversa...

HechoenMarketing

Hola Rosa, mi blog es http://www.moreadwords.com.ar/ tengo un problema con este código, al ponerlo no sé porque me toma en todos los post el mismo número de "compartidos" para todos los post, y cuando hago click en uno de ellos me muestra la cantidad real de post Ejemplos: en la home podras ver este post: Community Manager - http://www.moreadwords.com.ar/2009/11/community-manager.html en uno me dice 12 y cuando entro al post nada.
Espero a ver sido claro.
Saludos!

Anónimo

Akaztro O es que no has colocado el código en el lugar correcto o es un error del mismo botón en Facebook... más no puedo decirte al respecto.

*ADMINISTRADOR*

Muchas gracias Rosa me funciono a la perfección, claro que al principio no me funcionaba porque habian dos post.body y lo coloque en el segundo y ahy me funciono gracias Rosa con tu ayuda mi blog se vve impecable

JOVENES LLAMADOS A SERVIR "JOLLAS"

Gracias Rosa por tu aporte lo aplique en nuestro blog y quedo super

el link del blog es:

http://elcofredejollas.blogspot.com/

JOVENES LLAMADOS A SERVIR "JOLLAS"

ROSA, la instalacion no tuvo mayor problema pero he intentado usar el boton pero no me publica nada en facebook, no se que problema sea.

agradezco tu ayuda

http://elcofredejollas.blogspot.com/

Anónimo

JOVENES No tengo ayuda para eso... es cosa del propio botón y el servicio que lo proporciona y ahí yo no puedo hacer nada...

PONTENOVA.ES

Desde hace unos dias no deja compartir, se queda ahi pillado. Haber si lo arreglan.
Gracias Rosa.

priamo

Hola Rosa, mi pregunta se refiere a si cuando colocamos el cursor encima del icono FaceBook en lugar de salir un rastrera de palabrejas, podriamos colocar nuestra propio texto y como.
Gracias

Anónimo

priamo La verdad que no lo se... solo coloqué el botón para comprobar como funciona en un blog de pruebas... trataré de mirarlo, aunque no te prometo nada :S

Priamo

Hola de nuevo,he observado,por si te sirve de ayuda que en tu boton al ponerte encima dice " Enviar a facebook" eso es lo que yo quisiera poner en el mio y no sé como.
Una ultima pregunta podría colocarse el boton encima de la primera linea de texto? Que debo hacer para ello?
un saludo

Anónimo

Priamo Eso pasa en todas las imágenes de mi blog ya que añado en el código de la imagen la etiqueta "title" con lo que quiero que diga y elimino el enlace en la imagen (el que Blogger pone para que al pinchar se abra)...pero tu hablas del botón "real" eso es otra cosa...

Para lo otro, lo pegas antes de la línea que digo.

Unknown

como dicen mas arriba, es verdad que hace dias que no deja compartir, a ver si lo arreglan..

mi divernao

Rosa instale el contador y aparece correctamente. El problema es que no aparece el númere de veces compartido arriba. He enviado a facebook una entrada desde mi usuario y aparece el 1, pero cuando vuelvo a la entrada ya no está; entonces le pedi a alguién que la enviara y aparece un 2; pero al volver desaparece.

¿No sabes a que se deba?

Anónimo

Francisco Bórquez No se si leíste comentarios anteriores... parece ser que anda funcionando mal a ratos si... pero es cosa de allí.

Bilosony2™

Listo lo acabo de instalar con exito y acabo de dar uno de mis primeros pasos en esto de las redes sociales jeje:D

Anónimo

Bilosony2™ ¡Genial! :D

Xander Reyes

Rosa gracias por tus acostumbradas ayudas, lo hice y salio perfecto!!!...ahora bien, alguien sabe como hago para que salga compartido en un grupo que tengo de facebook y no en mi perfil personal ni mi pagina en facebook?, mi blog es OpinaConAlexander.Blogspot.com agradeceria un monton a cualquiera, ya que mi grupo de Facebook va creciendo mucho, pero va dejando atras mi perfil en cantidad de miembros el grupo se llama LOS ROMANENSES EN FACEBOOK, tiene solo 6 semana y lleva 1,494 miembros, me gustaria que fuera alli que se compartiera, gracias anticipadas.

Xander Reyes

Acabo de encontrar un supuesto fallo y es que cualquiera puede compartir esa entrada, o sea si alguien entra ami blog y comparte todas mis entradas, me hara un daño o me equivoco?.... OpinaConAlexander.Blogspot.com

Rosa

Alexander Reyes Es el código que allí proporcionan y no tengo idea de como hacer cuando es un grupo...
Por otro lado, así es... es para dar a conocer tus entradas y que cualquiera pueda hacerlo... no es un fallo, es que así es como trabaja y de lo que se trata...

TM

Excelente!!!

Anónimo

Hola Rosa mira yo he intentado poner un enlace para compartir en facebook cualquier entrada. Pero con una imagen en forma de icono. Como el que tiene en tu pagina me salio para Twitter pero para Facebook no me salio. me puedes ayudar. gracias :)

Anónimo

LAR Sería algo así:

<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url+ &quot;&amp;title=&quot; + data:post.title' target='_blank'> <img alt='FaceBook' src='URL DEL ICONO' style='border:0' title='Enviar a Facebook'/> </a>

Mamen Orcero

Hola Rosa. En primer lugar gracias por la ayuda que nos prestas y por la paciencia que nos dedicas.
Tengo enlazado el blog con facebook, pero ahora mantengo dos tertulias separadas ¿hay alguna manera de que los comentarios de los visitantes aparezcan tanto en el blog como en facebook independientemente de donde los hayan escrito? Un saludo.
Mi blog: http://teinvitoauncaf.blogspot.com/

Anónimo

MamenHasta donde se, eso no es posible.

Mamen Orcero

Gracias Rosa por la rápida respuesta. Ya me parecía a mí...es que lo queremos todo, ja ja. Un abrazo y de verdad gracias por el trabajo que haces.

Jaume Solé

Hola rosa,

He incluido el boton para compartir en facebook y a partir de este moemnto al cargar el bloc va muy lento. algunas veces se clava y no muestra los post.

gràcias
jaume

Jaume Solé

Tu codigo funciona merjor que el que tenia hasta ahora. Pero en el lateral me rompe la estetica de las entradas, como puedo hacer para qeu sea mas pequeño o bien colocarlo alfinalizar el post?

Anónimo

JaumeYo explico lo que hay... el botón es el que es, no hay más que esos tamaños.
En cuanto a incluirlo en las entradas pues también explico aquí donde colocarlo.
Cuando son servicios externos como este caso, yo me limito a exponer lo que hay, después cada uno decide si le conviene o no, pero casi siempre, por no decir siempre, en este tipo de servicios no hay modificaciones posibles.

Unknown

hola
muchas gracias,, tenía activado en el facebook, lo de notas para que se actualizara automáticamente, pero tardaba mucho, y últimamente, no lo hacía.
así, queda perfecto, y cuando yo quiero.
me encanta tú blog, nos ayuda muchisimo.

PALACIO CONGRESOS ALMERIA

MAGNIFICO, HACES UNA GRAN LABOR

Cocina

Hola ROSITA! acabo de ponerlo en mi blog,ya envie una entrada pero no veo que la haya contabilizado..osea no veo el numero
saludos!!
clau

Anónimo

Cocofansclub Ni idea... eso es cosa del botón, nada que podamos corregir ahí...

Unknown

Interesante Rosita :D muchas gracias ;)

Unknown

Hola Rosita =) ante todo agradecerte por todo lo que compartes con nosotros los mortales jeje. Tengo una consulta quiza me puedas ayudar, he implementado el codigo para poder ver al lado derecho de mi post el botoncito para enviar al facebook. Use el mismo codigo en mis 2 blogs, en el primero blog no parece el conteo de las veces que han sido enviados al facebook los post, se tiene que presionar en el botoncito para que se muestren. Esta entrada deberia mostrar 2 enviados al facebook:
http://jastrujillo.blogspot.com/2010/08/be-thou-example-songs-for-youth-efy.html

Asi como funciona perfectamente en este mi otro blog;
http://surplus21diary.blogspot.com/2010/08/aventura-en-el-morro-de-calzada.html
, probe usando el mismo codigo para ambos blog y solo en uno funciona, la razon no lo se quisiera que me puedas ayudar si fuera posible. Muchas gracias=)

Anónimo

Surplus21Pues no voy a poder la verdad, porque no tengo ni idea... si ambos códigos son iguales, deberían de funcionar de la misma manera... :O

Unknown

Sip cosa de locos hehe =) gracias por responder =)

Riki

Gracias Rosa. Picotazos de afecto. Yacoriki.

Mercedes España

Hola Rosa se puede cambiar lo de share y poner compartir, en el botón
Gracias por este blog

Anónimo

Mercedes España No, es una imagen incluida en el código del botón.

.::ZAURON::.

hola rosa como tendria q hacer para q quede al final de entrada??

desde ya gracias!

Anónimo

melade Pegarlo después de <data:post.body/>

Wuilmer Bolivar

Aplicado muchas gracias ;)

Rosa lo que estaba buscando y creo que no lo veo es la opción de utilizar los iconos de microblogging pero de forma animada, que al pasar el mouse sobre ellos se levanten o giren o realicen una animación.

Continuare buscando :d

Wuilmer Bolivar

Tengo un pequeño problema.! ^^

Resulta que los botones solo me aparecen en la pagina principal en la pagina de la entrada no me aparecen, alguna idea de como solucionar esto Rosa.? :$

Anónimo

Wuilmer Bolivar Si, se como son esos botones que dices, se usa una sola imagen en CSS3 o usando un efecto que se llama mouseover, pero yo no tengo nada de eso ahora mismo. ¿Has mirado en Vagabundia?

En cuanto a que solo se ven los iconos en la página principal, supongo que sea porque los has añadido dentro de una condicional (que desde aquí yo no puedo ver) para que solo se muestren ahí, como tienes el enlace a comentarios.

Wuilmer Bolivar

Hola Rosa, ya estoy buscando sobre mouseover...!! Gracias. ^^

Ahora solucione el problema anterior duplicando el código. lo deje donde estaba y lo agregue en una parte mas abajo y ahora sale en los temas y al principio.

Gracias por tu ayuda ;)

Astartea

genial me llevo este, ya que el otro no me funciona :l

Anónimo

ola rosa muy buen post!

tengo una granduda, lo que pasa es que tengo una barra de pestañas en mi blog ( una donde esta mi bio, otra donde esta mi menu de entradas y otra donde lleva ala pagina principal) y me gustaria saber como hago para que no parescan los botones de compartir de facebook y de Tweetmeme , en las pestañas de bio y de menu de entradas..

muchas gracias por estos excelentes post.. espero y puedas ayudarme con esto gracias!!

Anónimo

ilostbooks Cualquier cosa que "metas" dentro de esta condicional:
<b:if cond='data:blog.pageType != "static_page"'>
AQUÍ EL CÓDIGO
</b:if>

NO será visible en las páginas estáticas, así que lo que debes hacer es colocar el código de esos botones dentro de esa condicional, donde dice AQUÍ EL CÓDIGO

Publicar un comentario

Si vas a dejar una consulta, procura tener habilitado tu perfil en Blogger o deja la url del blog a revisar (no enlace).

Los comentarios están siendo moderados.

:) :(( :( :P :D :$ ;) :I :X :O |O :S