sábado, 31 de mayo de 2014

Poner botones redes sociales en las entradas de blogger

La vinculación de nuestros blogs con la redes sociales es algo importante y fundamental para obtener buenas visitas a neustro sitio sea cual sea su temario, así que hoy les compartiré y enseñaré como poner o colocar los botones de redes sociales en cada una de las entradas de nuestros blogs, al final se verá así:


Para lograr esto muy sencillo haremos los siguientes pasos:

1. Nos dirigimos  PLANTILLA | EDICIÓN HTML y allí buscamos el código </head> , antes de este pegamos 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>
Hecho esto; ahora buscaremos esta línea:


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

Si les sale dos veces la anterior línea peguenlo en la segunda aunque varia según el blog pueden probarlo debajo de las que están hasta que funcione, ahora justo debajo de ese código pegamos 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>

Y estuvo ahora en cada entrada de nuestro blog, aparecerán los botones sociales para compartir nuestras publicaciones.

Hasta la próxima,

10 comentarios:

  1. Amigo no logro colocarlo lo eh puesto despues de div class='post-footer-line post-footer-line-1' y nada y luego lo coloque despues de div class='post-footer' ya nada puedes ayudarme?? mi blog es http://computer0wnez.blogspot.mx/ espero me puedas ayudar gracias

    ResponderEliminar
    Respuestas
    1. Estuve viendo tu blog se me hace raro que no te lea perfectamente puedes colocar elementos después de:

      class="post-footer"

      Te recomiendo que la parte que va antes de:

      </head>

      La pegues anterior al mismo pero más arriba se me hace raro que no te funcione dale y luego me comentas como te fue.... !!

      Eliminar
  2. Bueno intente de todo y nada amigo mejor decidi quitar el codigo por completo no entiendo por que no agarra igual gracias por responder y tratar de ayudarme

    ResponderEliminar
    Respuestas
    1. Bueno amigo de nada muy raro porque yo los estoy usando en otro blog.. pero bueno suerte con tu sitio... !!

      Eliminar
  3. Bueno encontre el problema en mi plantilla va debajo de div class='post-footer' ya a quedado xD

    ResponderEliminar
    Respuestas
    1. bueno Ownez me agrada saber que pudiste si algo es cierto es que este tipo de publicaciones no puede ser general para cualquier blog porque pueden ocurrir casos como el tuyo... ! :D

      Saludos,

      Eliminar
  4. una cosa mas amigo nose si me puedas ayudar a cambiar el ancho de las entradas de mi post, no las que estan al principio si no que las entradas que ya abras ya estube buscando main warrper y outer pero no encuentro la forma nose si puedas ayudarme a buscar el codigo de ante mano gracias mi blog es http://computer0wnez.blogspot.mx/

    ResponderEliminar
    Respuestas
    1. Bueno puedes pasarte por este POST de mi blog... quizá de algo te sirva:

      http://www.blogginred.com/2012/08/jugando-con-el-ancho-del-blog-las.html

      mirando tu blog buscate esta línea y ensay

      #leftContent .inner

      O esta otra son las que miré:

      class="twelve columns"

      Espero te sirva..

      Saludos,

      Eliminar
  5. No puedo :c el botón de facebook me marca error se veía bien lástima :c

    ResponderEliminar
    Respuestas
    1. Hola Sena Michaelis Cómo se visualiza el error (?)

      Saludos,

      Eliminar

SÍGUENOS EN: