Agregar botón Twitter y Me gusta en blog de Blogger

José Jiménez · 28 Oct 2010

Hola compañeros, hace unos dias acabo de integrar los botones de twitter y facebook (me gusta) para mi blog en blogger, por si algunos no tenian el codigo aqui lo comparto, aclaro que el botón de twitter es el oficial y el el defacebook es megusta con contador, me estuve quebrando un poco la cabeza ya que si se agregan los botones a la pagina principal y haces un tweet o clic en megusta lo que estas compartiendo es solo la portada de tu blog ejemplo Portada - Home | Web Design, SEO, Hosting, Domains, Logos, Xtarting, Xmail.im @ Portada.com, de esta manera nos evitaremos este problema y se compartira el post, en el caso de el boton megusta va a aparecer en el perfil de quien de clic el enlace al post y otro hacia la portada de tu pagina. Dejo aqui los codigos y una preview.

Twitter

Insertar CODE, HTML o PHP:

<a class='twitter-share-button' data-count='vertical' data-lang='es' expr:href='&quot;http://twitter.com/share?text=&quot; + data:post.title + &quot;&amp;url=&quot; + data:post.url + &quot;&amp;via=tucuenta&amp;related=turecomendacion&quot;'/><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>

Facebook:

Insertar CODE, HTML o PHP:

<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url+ &quot;&amp;layout=box_count&amp;show_faces=false&amp;width=73&amp;height=61&amp;action=like&amp;font=tahoma&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:73px; height:61px'/>

Imagen:

Enlace eliminado

El codigo ya esta ajustado para que salga tal y como se muestra en la imagen, bien alineados, ya solo seria jugar con el estilo de la posicion dependiendo de nuestros gustos. Saludos :biggrin:

Mas abajo figura el codigo para Wordpress:biggrin:

Carlos Arreola · 28 Oct 2010

Muy bueno pues no había visto como ponerlo en blogger.

Franyer Rivas · 28 Oct 2010

execelente aporte gracias nunca he usado blogger como CMS pero podria servir para mis clientes xD
saludos ¡

blogs · 28 Oct 2010

y para ponerlo en wordpress

cual es el codigo que hay que poner y donde ponerno ?

José Jiménez · 28 Oct 2010

blogs dijo:
y para ponerlo en wordpress

cual es el codigo que hay que poner y donde ponerno ?

Amigo aqui esta para wordpress, son exactamente los mismos.

Twitter

Insertar CODE, HTML o PHP:

<a href="http://twitter.com/share" class="twitter-share-button" data-url="<?php the_permalink(); ?>" data-count="vertical" data-via="Borest" data-lang="es">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

Faecbook

Insertar CODE, HTML o PHP:

<iframe src="http://www.facebook.com/plugins/like.php?href=<?php the_permalink(); ?>&amp;layout=box_count&amp;show_faces=true&amp;width=73&amp;action=like&amp;font=arial&amp;colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:73px; height:61px"></iframe>

Saludos!

ulises · 9 Dic 2010

la idea esta genial, sin embargo no se en donde pegar el codigo, jeje. disculpa mi ignorancia, pero en que parte del codigo html debo de pegar el codigo?? gracias por tu ayuda y tambien a todos los colaboradores de foro beta =)

El Psicoasesor
Abriendo los horizontes de la psicologia

Alexander · 9 Dic 2010

Buen aporte y muy interesante Borest, pero en Blogger en que parte de la plantilla lo debo poner.

Saludos.

LizardisFm · 9 Dic 2010

pero en que parte coloco los codes ?

José Jiménez · 9 Dic 2010

LizardisFm dijo:
pero en que parte coloco los codes ?

Depende en que parte los quieras amigo, debajo del titulo, al final del post, etc. Un saludo.

Alexander dijo:
Buen aporte y muy interesante Borest, pero en Blogger en que parte de la plantilla lo debo poner.

Saludos.

Como ya lo mencione, es donde uno guste, por ejemplo si lo queremos debajo del post habria que pegarlo debajo de este codigo:

Insertar CODE, HTML o PHP:

    <div class='post-body entry-content'>

Un saludo.

jesus1227 · 11 Dic 2010

Me gusta esos botones para CONTADORES y si quiero ubicarlos debajo de cada entrada antes o despues de que codigo debo pegarlo :santaclaus:

bochito · 11 Dic 2010

HTML:

Para colocarlos en tu blog entra en Diseño > Edición de HTML, marca la casilla Expandir plantillas de artilugios y busca esta etiqueta:

    dijo:

    <b:if cond='data:post.title'>



Y justo debajo de ella pega esto:

    dijo:

    <!-- boton tweetmeme --> <div style='float: right;'> <ul style='list-style:none;'><li> <script type='text/javascript'> tweetmeme_url = '<data:post.url/>'; </script> <script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/></li> <br/> <!-- boton facebook --> <li><script>var fbShare = { url: '<data:post.url/>', }</script> <script src='http://widgets.fbshare.me/files/fbshare.js'/></li></ul> </div>

Asi queda mas o menos:

Leido primero en: Trucos blogger (Actualizados 4/12/10) - Taringa!

José Jiménez · 11 Dic 2010

bochito dijo:

HTML:

Para colocarlos en tu blog entra en Diseño > Edición de HTML, marca la casilla Expandir plantillas de artilugios y busca esta etiqueta:

    dijo:

    <b:if cond='data:post.title'>



Y justo debajo de ella pega esto:

    dijo:

    <!-- boton tweetmeme --> <div style='float: right;'> <ul style='list-style:none;'><li> <script type='text/javascript'> tweetmeme_url = '<data:post.url/>'; </script> <script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/></li> <br/> <!-- boton facebook --> <li><script>var fbShare = { url: '<data:post.url/>', }</script> <script src='http://widgets.fbshare.me/files/fbshare.js'/></li></ul> </div>

Asi queda mas o menos:

Leido primero en: Trucos blogger (Actualizados 4/12/10) - Taringa!

Los botones de arriba han tenido ya muchos problemas ya que no son los oficiales, yo recomiendo usar los que menciono para evitar problemas, saludos.

bochito · 11 Dic 2010

Borest dijo:
Los botones de arriba han tenido ya muchos problemas ya que no son los oficiales, yo recomiendo usar los que menciono para evitar problemas, saludos.

Es decir entonces, que cada vez que cree una entrada, debo colocar el codio en ella, en la edicion html de la entrada? y no a la plantialla de mi blog?

Edit:

Despues de meterle mano a la plantilla de mi blog y de dejarla inservible, decidi restaurarla y me he topado con que la plantilla ya trae ahora por default el boton de twitter entre otros

MarketingOnlineValencia · 13 Dic 2010

Si no quereis complicaros la vida con este tema acudid a AddThis - The #1 Bookmarking & Sharing Service tienes varias opciones de poner este tipo de botones, una de lleva el boton con contador de Twitter y Facebook y ademas uno con el total de marcadores, agregadores y redes sociales que se le han dado de alta, hay mas de 300 tipos

elNettO · 17 Dic 2010

no encontre esta linea :/

Insertar CODE, HTML o PHP:

    <div class='post-body entry-content'>

Alexander · 22 Dic 2010

Borest dijo:
Depende en que parte los quieras amigo, debajo del titulo, al final del post, etc. Un saludo.

Como ya lo mencione, es donde uno guste, por ejemplo si lo queremos debajo del post habria que pegarlo debajo de este codigo:

Insertar CODE, HTML o PHP:

<div class='post-body entry-content'>

Un saludo.

Gracias Borest, ya los coloque y quedaron bien.

Se agredece mucho el aporte.

elNettO dijo:
no encontre esta linea :/

Insertar CODE, HTML o PHP:

<div class='post-body entry-content'>

Debes Expandir plantillas de artilugios para buscar esa linea de codigo.

Acertijo · 22 Dic 2010

Estoy intentándolos poner en el típico gadget de tipo HTML/Javascript, pero el de Facebook no me funciona. Lo primero que me di cuenta es de que blogspot me añadía por su cuenta un cierre del iframe extra, así que adapté el código pero sigue fallando. Así es como lo tengo ahora mismo y solo me sale el de twiter:

Insertar CODE, HTML o PHP:

<iframe allowtransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url+ &quot;&amp;layout=box_count&amp;show_faces=false&amp;width=73&amp;height=61&amp;action=like&amp;font=tahoma&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:73px; height:61px'></iframe>

<a class='twitter-share-button' data-count='vertical' data-lang='es' expr:href='&quot;http://twitter.com/share?text=&quot; + data:post.title + &quot;&amp;url=&quot; + data:post.url + &quot;&amp;via=tucuenta&amp;related=turecomendacion&quot;'/><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></script></a>

¿Alguna idea?

Acertijo dijo:
Estoy intentándolos poner en el típico gadget de tipo HTML/Javascript, pero el de Facebook no me funciona. Lo primero que me di cuenta es de que blogspot me añadía por su cuenta un cierre del iframe extra, así que adapté el código pero sigue fallando. Así es como lo tengo ahora mismo y solo me sale el de twiter:

Insertar CODE, HTML o PHP:

<iframe allowtransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url+ "&layout=box_count&show_faces=false&width=73&height=61&action=like&font=tahoma&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:73px; height:61px'></iframe> <a rel='nofollow' class='twitter-share-button' data-count='vertical' data-lang='es' expr:href='"http://twitter.com/share?text=" + data:post.title + "&url=" + data:post.url + "&via=tucuenta&related=turecomendacion"'/><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></script></a>

¿Alguna idea?

He estado toqueteando otro rato pero no he conseguido que me funcionen los botones dentro del gadget HTML/Javascript de blogger. La causa principal es que el texto " data😛ost.url" solo se cambia correctamente por la URL si lo colocamos dentro de la plantilla, no como un gadget. En este caso aparece directamente ese texto en el HTML final. ¿Sabeis alguna forma de solucionar esto? ¿Cómo podría hacer referencia al nombre de la url desde el propio gadget?

José Jiménez · 31 Dic 2010

Acertijo dijo:
Estoy intentándolos poner en el típico gadget de tipo HTML/Javascript, pero el de Facebook no me funciona. Lo primero que me di cuenta es de que blogspot me añadía por su cuenta un cierre del iframe extra, así que adapté el código pero sigue fallando. Así es como lo tengo ahora mismo y solo me sale el de twiter:

Insertar CODE, HTML o PHP:

<iframe allowtransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url+ "&layout=box_count&show_faces=false&width=73&height=61&action=like&font=tahoma&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:73px; height:61px'></iframe> <a rel='nofollow' class='twitter-share-button' data-count='vertical' data-lang='es' expr:href='"http://twitter.com/share?text=" + data:post.title + "&url=" + data:post.url + "&via=tucuenta&related=turecomendacion"'/><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></script></a>

¿Alguna idea?

He estado toqueteando otro rato pero no he conseguido que me funcionen los botones dentro del gadget HTML/Javascript de blogger. La causa principal es que el texto " data😛ost.url" solo se cambia correctamente por la URL si lo colocamos dentro de la plantilla, no como un gadget. En este caso aparece directamente ese texto en el HTML final. ¿Sabeis alguna forma de solucionar esto? ¿Cómo podría hacer referencia al nombre de la url desde el propio gadget?

Si lo pones en un gadget deberas cambiar las url por la de tu blog, o también quieres que se comprat el post pero desde el sidebar? Un saludo.

Acertijo · 31 Dic 2010

Borest dijo:
Si lo pones en un gadget deberas cambiar las url por la de tu blog, o también quieres que se comprat el post pero desde el sidebar? Un saludo.

Al final llegué a esa conclusión, para usar el ejemplo en el sidebar tenía que poner una dirección fija, por lo que no conseguí meter la del post, si no que solo pude la del blog. Así que al final he dejado los botones de AdThis que tenía, aunque me gustaría poner los tuyos encima por ser más visibles. ¿Hay/sabeis alguna forma de poner la URL del post en un gadget de tipo HTML/Javascrip en el sidebar?

José Jiménez · 31 Dic 2010

Ahora que lo pienso, deberia de ser la misma forma, data.post.url, pero me imagino que solo funcionaría en la entrada individual, talves armes algo viendo esto Condicionales de Blogger | Ciudad Blogger - Trucos y tutoriales para tu blog un saludo!

Agregar botón Twitter y Me gusta en blog de Blogger

José Jiménez

Carlos Arreola

Franyer Rivas

blogs

José Jiménez

ulises

Alexander

LizardisFm

José Jiménez

jesus1227

bochito

José Jiménez

bochito

MarketingOnlineValencia

elNettO

Alexander

Acertijo

José Jiménez

Acertijo

José Jiménez

Temas similares

Privacidad y transparencia

Privacidad y transparencia