12 septiembre 2013

Agregar botones para compartir en redes sociales

redes sociales

Hoy os voy a mostrar la forma de agregar unos botones para compartir tus entradas en las diferentes redes sociales con un efecto deslizable. Con ellos les permitirá a sus lectores del blog compartir sus entradas a través de los diferentes medios sociales. En este tutorial, los sitios sociales que he incluido son Facebook, Twitter y Google+. Así que veamos como instalarlos.



Como agregar estos botones a tu blog


Entra al panel de administración > Seleccione la Plantilla > Haga clic en Editar HTML >

Ahora sigue estos pasos:

1.- Como siempre, hay que instalar el plugin de jQuery. si tu blog ya tiene el plug-in de jQuery, sigue directamente al siguiente paso.
Si no añade el código siguiente antes de </ head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script>

2.- Empezamos a instalar la llamada al script y los estilos a las páginas individuales, colocando el siguiente código antes de </head>

<b:if cond='data:blog.pageType == "item"'> <style type='text/css'>/*<![CDATA[*/@import url(http://fonts.googleapis.com/css?family=Open+Sans:400);@import "//netdna.bootstrapcdn.com/font-awesome/3.0/css/font-awesome.css";#sbuttons { border-radius: 5px; padding: 14px 7px; background:#ffffff; width: 500px; overflow: hidden; margin: 2px auto 0; box-shadow:0 2px 3px rgba(71, 71, 71, 0.31);}.button { background: #DCE0E0; position: relative; display: block; float: left; height: 40px; margin: 0 7px; overflow: hidden; width: 150px; border-radius: 3px; -o-border-radius: 3px; -ms-border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px;}.icon { display: block; float: left; position: relative; z-index: 3; height: 100%; vertical-align: top; width: 38px; -moz-border-radius-topleft: 3px; -moz-border-radius-topright: 0px; -moz-border-radius-bottomright: 0px; -moz-border-radius-bottomleft: 3px; -webkit-border-radius: 3px 0px 0px 3px; border-radius: 3px 0px 0px 3px; text-align: center;}.icon i { color: #fff; line-height: 42px;}.slide { z-index: 2; display: block; margin: 0; height: 100%; left: 38px; position: absolute; width: 112px; -moz-border-radius-topleft: 0px; -moz-border-radius-topright: 3px; -moz-border-radius-bottomright: 3px; -moz-border-radius-bottomleft: 0px; -webkit-border-radius: 0px 3px 3px 0px; border-radius: 0px 3px 3px 0px;}.slide p { font-family: Open Sans; font-weight: 400; border-left: 1px solid #fff; border-left: 1px solid rgba(255,255,255,0.35); color: #fff; font-size: 16px; left: 0; margin: 0; position: absolute; text-align: center; top: 10px; width: 100%;}.button .slide { -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;}.facebook iframe { display: block; position: absolute; right: -15px; top: 10px; z-index: 1;}.twitter iframe { width: 90px !important; right: 5px; top: 10px; z-index: 1; display: block; position: absolute;}.google #___plusone_0 { width: 70px !important; top: 10px; right: 15px; position: absolute; display: block; z-index: 1;}.facebook:hover .slide { left: 150px;}.twitter:hover .slide { top: -40px;}.google:hover .slide { bottom: -40px;}.facebook .icon, .facebook .slide { background: #305c99;}.twitter .icon, .twitter .slide { background: #00cdff;}.google .icon, .google .slide { background: #d24228;} /*]]>*/</style></b:if>


Ahora añadimos los botones en la barra horizontal
3.- Ahora añadimos el siguiente código después de post-footer-line-1 (Normalmente hay dos, colócalo trás el segundo)
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='sbuttons'> <div class='facebook button'> <i class='icon'> <i class='icon-facebook'> </i> </i> <div class='slide'> <p> facebook </p> </div> <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=120&amp;height=20&amp;action=like&amp;font=tahoma&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:120px; height:20px'/> </div> <div class='twitter button'> <i class='icon'> <i class='icon-twitter'> </i> </i> <div class='slide'> <p> twitter </p> </div> <a class='twitter-share-button'  href='https://twitter.com/share'> Tweet </a> <script> !function(d,s,id){ var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?&#39;http&#39;:&#39;https&#39;; if(!d.getElementById(id)){ js=d.createElement(s); js.id=id; js.src=p+&#39;://platform.twitter.com/widgets.js&#39;;fjs.parentNode.insertBefore(js,fjs);}}(document, &#39;script&#39;, &#39;twitter-wjs&#39;); </script> </div> <div class='google button'> <i class='icon'> <i class='icon-google-plus'> </i> </i> <div class='slide'> <p> google+ </p> </div> <div class='g-plusone' data-size='medium'> </div> <script type='text/javascript'> (function() { var po = document.createElement(&#39;script&#39;); po.type = &#39;text/javascript&#39;; po.async = true; po.src = &#39;https://apis.google.com/js/plusone.js&#39;; var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(po, s); } )(); </script> </div> </div></b:if>

GUARDAR PLANTILLA!

CAMBIOS:
1.- Podéis cambiar el color de fondo de la barra horizontal.
En el primer código búsca background:#ffffff; y cambiar el #ffffff con su propio color.



24 comentarios

Me encanta, pero en mi blog se comporta raro con el Internet Explorer, como si pestañeara. Así que seguiré con los que tengo yo, que son muuuu feos. Os dejo mi peich por si quereis ver mis botones: FussionCook trastos de cocina

Antonio muchas gracias por el tutorial pero es que he editado la plantilla de mi blog en html, he seguido las instrucciones poniendo cada cosa en su sitio y no me salen los botones de compartir. ¿Deberían salir en las entradas que tengo ya hechas o en las que añada nuevas? Gracias y un saludo.

http://www.amorsevillista.com/2013/09/agregar-botones-para-compartir-en-redes.html

Antonio yo los veo sin complicaciones, te comento que solo se muestran en las páginas individuales.
Clikea en el título de cualquier entrada de tu blog y hay los verás.

Vaya!! Muchas gracias! Pensaba que salían en cada entrada desde la página principal del blog. Perdona las molestias. :D

¡Quedó fantástico! Mil gracias por la ayuda me fue MUY MUY útil. La pena es que no se pueda ver en la "vista general" y solo se vea en las entradas "particulares" pero queda precioso. Enhorabuena!

Por alguna extraña razón a mí no me funciona :(

como muda a transação de cada botão?

Equipe, O transsicion é em cada botão.

Hola muy interesante. Y funciona perfectamente, pero no encuentro el data-via para la cuenta twitter

Vincenzo, busca: <a class='twitter-share-button' y aquí coloca
data-via='nombre twitter' de esta forma te saldrá.

amigo no me funciono porfavor ayudame este es mi blog http://computer0wnez.blogspot.mx/

No lo veo colocado, así no puedo ayudarte.

Amigo ya eh clocado todo al pie de la letra y no me aprece y tampoco encontre lo de data-via='amorsevillista y el ultimo codigo lo coloque despues de div class='post-footer-line post-footer-line-1'> este es mi blog http://computer0wnez.blogspot.mx/ espero me puedas ayudar gracias

muy facil de hacer gracias :)

Ownez colócalo y veo donde se produce el fallo.
En cuanto a lo de data-via='amorsevillista, lo he suprimido porque algunos no lo han cambiado y tengo muchísimas notificaciones en twitter de otros blog.

Está muy guapo.Y el botón para compartir en whatsApp,¿cómo podría añadirlo a mis entradas?Muchas gracias por lo bien que lo explicas todo

Localiza en primer lugar comentarte que tienes un trozo de código de más en la plantilla y es el cierre de este trozo: hosting by TinyPic" /></a>" /> te sobra el " />.

Lo puedes observar al final del blog en la parte izquierda y concretamente sobre cookieassistant.com

En cuanto a lo del Whatsapp creo recordar que Olomán en su blog Oloblogger creó una entrada sobre ello.

Me dejas sorprendida con lo observador que eres,muchísimas gracias ya corregí el código.
Ya lo vi en Oloman pero no me quedó nada claro y no logré implementarlo

He seguido los pasos correctamente y se ven deformados.

No funcionan. Se ven de otra forma en todos los navegadores. No salen con esa imagen.

Saludos.

No funcionan. Se ven de otra forma en todos los navegadores. No salen con esa imagen.

Saludos.

Antonio directamente no lo he probado pero en el blog de pruebas sigue viendose de la misma forma en todos los navegadores.


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"