28 enero 2014

Barra para compartir en Redes Sociales bajo el título de la entrada.

barra para compartir redes sociales bajo titulo

Este es otro de los tantos tutoriales para compartir en las redes sociales, pero esta vez lo mostraremos bajo el título de la entrada del blog, consiguiendo un bonito efecto para que los lectores puedan compartirlo, pero seguro que le resultará útil a varias personas más. Hay muchos tutoriales en Internet de como colocar los botones, pero todos ellos sin una marcación clara y definida, por ello os traigo esta forma tan elegante de mostrarlo en vuestros blog.

También puedes ver otras formas de agregar los botones sociales:
Una elegante forma de agregar los botones sociales
Una simpática forma de agregar los botones sociales

Veamos como agregar estos botones bajo el título de la entrada:
PASO 1. Ir a plantilla → Edición Html.
PASO 2. Presiona "Ctrl+F" para que aparezca el buscador de tu navegador y busca esta linea: </head> y antes de ella coloca lo siguiente:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
// Twitter
(function (a, b, c){var d=a.getElementsByTagName(b)[0];if (!a.getElementById(c)){a=a.createElement(b);a.id=c;a.src=&quot;//platform.twitter.com/widgets.js&quot;;d.parentNode.insertBefore(a, d)}})(document, &quot;script&quot;, &quot;twitter-wjs&quot;);
</script>
<style type='text/css'>
#barrasocial {
float: left;
border-top: 1px solid #eaeaea;
border-bottom: 1px solid #eaeaea;
width: 580px;
margin-bottom: 20px;
margin-left: -10px;
margin-top: 10px;
}
.cabecera h5 {
float: left;
padding-right: 20px;
font-size: 16px;
padding-top: 14px;
text-transform: uppercase;
font-weight: bold;
margin: 0px;
padding-left: 10px;
}
.rtwitter, .rface, .g-plusones {
float: left;
border-left: 1px solid #eaeaea;
padding-left: 18px;
padding-top: 15px;
padding-bottom: 10px;
}
.g-plusones {
margin-left: 30px;
}
</style>
</b:if>

PASO 3. Presionamos de nuevo "Ctrl+F" y buscamos: <div class='post-header-line-1'/> y justamente debajo colocamos lo siguiente:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='barrasocial'>
<div class='cabecera'>
<h5>COMPARTE&#187;&#187;</h5>
</div>
<div class='rtwitter'>
<a class='twitter-share-button' expr:data-text='data:post.title' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a>
</div>
<div class='rface'>
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=button_count&amp;show_faces=true&amp;width=120&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:120px; height:21px'/>
</div>
<div class='g-plusones'>
<g:plus action='share' annotation='bubble' expr:href='data:post.url'/>
</div>
</div>
</b:if>
En ocaciones hay varias lineas iguales por lo que el buscador interno de tu navegador te mostrará varias, normalmente sería la segunda pero si no es así la colocaríamos en la primera.

Listo, ahora debajo de cada título de nuestros posts aparecerán los botones para compartir.

La barra con los botones para compartir solo son visibles en las entradas individuales.

26 comentarios

Solo quería darte las gracias por fin el blog esta funcionando....muchisima gracias por todo lo que he aprendido aquí que ha sido mucho....y muchisimas gracias por tu ayuda...

Gracias a ti, Atenea.
Para eso estamos, para intentar ayudar a los demás.

Muchísimas gracias Antonio y que gran Blog en verdad te felicito....

Saludos desde Colombia :)

Felicitaciones Andrés por el blog, te ha quedado "PERFECTO".

No sé si lo hago mal, pues sí me salen los botones (gracias!) pero les doy clic encima y no me llevan a ninguna parte... Creo que quedaron como imagen, seguro falta enlazarlos a las redes, me puedes indicar si puedes por favor como realizarlo, de antemano gracias. Saludos desde Colombia!!!

Telares, el primer código lo tienes mal instalado, va antes de </head> y no de <head>

Hola Antonio .estoy estudiando que ni tengo tiempo para ver loa bloq .. y te esta quedando muy bien ..Antes intente instalar esto y no fui capaz podías explicarme que hago mal .. un saludo maestro

David tendría que ver tu plantilla, envíamela por email.

hey amigo que genial esta este truco se lo voy a integrar a mi blog

Hola Antonio, igual que David, a mi no me aparece nada, ya me cercioré que estuviera antes del /head y nada.

Tal vez sea porque ya tengo redes sociales instaladas pero en el final de la entrada a mi me gustaria más al inicio.

Mi blog:http://seleccionmexicanadebaloncesto.blogspot.com

Gracias de antemano.
Instale las cajas de amigos en google+, fans de facebook y contactos de twitter deslizable en la lateral, y quedó perfecto a la primera !
Genial el artilugio.

muchas gracias como siempre, una duda hay alguna forma de que esta barra se mantenga mientras sigues bajando la pagina? algo así como tu contador de seguidores que esta en la parte derecha
gracias

Sanosuke mira esta entrada del Potro, creo que te puede valer.

hola amor sevillista otra vez con una duda (gracias por contestar las anteriores por cierto) lo que sucede es que yo puse estos botones en mi blog y funciono todo perfecto pero recien le cambie de plantilla a mi blog y ahora los botones ya no estan abajo del titulo si no al final del post ya volvi a hacer este mismo procedimiento pero nada (ademas creo que estos botones ya vinieron con esa plantilla y se reemplazaron los tuyos por que también vinieron con otros botones de otras redes sociales pero ya las borre)

y una cosa mas la caja de comentarios de facebook, g+ y blogger tambien la puse y funciono bien solo que como ahora la nueva plantilla tien fondo negro ya no se ven los comentarios de facebook, como puedo cambiarle el color de las letras para que sean blancas? y se puedan ver?

aca abajo te dejo una entrada de mi blog ahi esta lo que te dije de los botones para compartir que estan al ultimo y tambien hay un comentario de facebook que como puedes ver tiene letras plomas que no se leen

de antemano gracias y disculpa si son muchas preguntas

disculpa no puse el link :p
http://anime-rebornx.blogspot.com/2014/09/terra-formars-01-hdl-720p-mega-sup.html

Hola amigo de casualidad sabes como hacer botones personalizados de compartir mas contador en facebook

Sanosuke, observo que ya has solucionado lo de los botones y en cuanto a la caja de facebook deberías buscar este trozo de código : data-colorscheme='dark' y sustituir por este otro: data-colorscheme='light'

Zona catracha los botones de facebook y otras redes son díficiles de personalizar, lo que si se puede hacer son cajas personalizadas donde incluir los botones de las redes.

Gracias por la repuesta amigo me gustaría aprender solo voz me has enseñado lo que se agradezco, y por cierto te quedo genial el nuevo diseño del BLOG ñ.ñ

gracias por contestar ya logre corregir lo de los comentarios ahora tengo otro problema veras hace como una semana nombre a una persona autor en el blog y a venido creando sus entradas y todo, pero en sus post (solo en los de el) a mi y a otras personas que e preguntado nos figuran como "0" me gusta, pero en cambio el me dice que si le aparecen los me gusta por ejemplo en la entrada que te voy a dejar abajo a el dice que le sale "4" me gusta pero a mi y a otras dos personas que pregunte nos sale "0" me gusta y tambien otra problema cuando quiero poner los links de sus entradas (igual solo de sus entradas) en facebook, no me carga, osea yo pego el enlace y deberia cargar una imagen y el titulo de la entrada pero no carga nada, pero igual en cambio a el si le carga
todo esto solo me pasa con las entradas de el (no se si cuando nombre mas autores también les pasa a ellos) las entradas que yo creo andan normal, si tienes alguna solución a mi problema te agradecería que me lo dijeras

PD: esos botones no son los tuyos esos vinieron con la plantilla pero los me gusta se exportaron dela anterior plantilla que tenia (en la cual si estaban tus botones) si te fijas los botones vinieron originalmente al final de la entrada antes de los comentarios con otros dos botones mas solo que yo copie el código para que los tres principales queden bajo el nombre de la entrada

link de su entrada en la cual me dice que le salen "4" me gusta pero a mi me sale "0":
http://anime-rebornx.blogspot.com/2014/10/sword-art-online-2-15-hdl-720p-sub.html

link de una de mis entradas en la cual hasta el momento salen "23" me gusta
http://anime-rebornx.blogspot.com/2014/10/nanatsu-no-taizai-02-hdl-720p-mega.html

gracias y lo siento si es demasiado texto

Sanosuke de momento veo dos veces instalado el script de facebook: (<div id='fb-root'></div>
<script>(function(d, s, id) etc....}
y en segundo lugar podrías eliminar el código del botón: <div class='fb-like' data-action='like' data-layout='button_count' data-share='false' data-show-faces='false' data-width='800'></div>

y en su lugar colocar este:
<iframe allowtransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url+ &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=450&amp;height=40&amp;action=like&amp;font=tahoma&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:150px; height:40px'/>

Haber que tal.

amor sevillista no a sido nada de facebook a sido de blogger mismo algo sobre las direcciones url para cada pais y como ese autor es de mexico solo los mexicanos podian ver los likes y los comentarios, ya lo arregle con un codigo que saque de aqui:
http://www.oloblogger.com/2012/03/redireccion-de-dominios-por-paises.html
lastima que los likes y los comentarios se perdieron

Hola me encanta todo lo que pones en tu blog, es una gran ayuda pero tengo una gran duda, coloque todo como me has dicho y los botones me quedan arriba, al principio del post y me gustaria que se quedasen abajo. ¿Se puede hacer algo por eso?

Janeth para colocar el código debajo de la entrada, debes colocar el segundo código debajo del segundo <div class='post-footer-line post-footer-line-1'> que te encuentres en la plantilla.

como pusiste esa cosa cuando uno va a comentar lo que dice,


Por Favor, comente de acuerdo al tema del articulo.
Seran removidos todos los comentarios con enlaces.

Quisiera ponerselo a mi web

The master mira esta entrada de oloblogger : http://www.oloblogger.com/2013/01/mensaje-del-formulario-para-comentarios.html


Por favor, comente de acuerdo al tema del artículo.
Serán removidos todos los Comentarios con enlaces.
Si quieres recibir los nuevos comentarios marca "Avisarme"