Vamos a mostrar hoy como poner facilmente en nuestro blog estos botones sociales para compartir de forma rápida en nuestras entradas.
Lo primero como siempre es hacer una copia de seguridad de nuestra plantilla para que no tengamos luego sustos.
Puedes ver como se hace paso a paso en este post.
Tenemos dos formas de ponerla en la parte superior de nuestra entrada o en la parte inferior.
Una vez la tengamos nos vamos a :
Tema > Editar Html
Elegimos si es la parte posterior justo debajo del titulo de nuestra entrada tenemos que buscar este codigo.
Lo primero como siempre es hacer una copia de seguridad de nuestra plantilla para que no tengamos luego sustos.
Puedes ver como se hace paso a paso en este post.
Tenemos dos formas de ponerla en la parte superior de nuestra entrada o en la parte inferior.
Una vez la tengamos nos vamos a :
Tema > Editar Html
Elegimos si es la parte posterior justo debajo del titulo de nuestra entrada tenemos que buscar este codigo.
<div class='post-header'>
<div class='post-header-line-1'/>
<div class='post-header-line-1'/>
Si por el contrario lo queremos en el footer de la entrada tenemos que buscar este otro.
<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'>
<div class='post-footer-line post-footer-line-1'>
En todo caso te saldra dos veces este codigo pero usaremos la segunda ya que la primera es la de moviles.
Elege entre los diferentes estilos que tenemos.
Caja sencilla
Copia el siguiente codigo.
<b:if cond='data:blog.pageType == "item"'>
<div id='botones'>
<table border='0'>
<tr>
<td align='left'><iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url+ "&layout=button_count&show_faces=false&width=100&height=25&action=like&font=tahoma&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:107px; height:20px;'/></td><td align='center'><script src='http://apis.google.com/js/plusone.js' type='text/javascript'/><g:plusone expr:href='data:post.url' size='medium'/></td><td align='right'><a class='twitter-share-button' data-lang='es' href='https://twitter.com/share'>Twittear</a><script src='//platform.twitter.com/widgets.js' type='text/javascript'/></td>
</tr>
</table></div><style type='text/css'>table{border-collapse:separate;margin:0 0 1.5em;width:100%}#botones {border-bottom:1px solid #ebebeb;border-top:1px solid #ebebeb;height:40px;line-height:40px;margin:10px 0}</style></b:if>
<div id='botones'>
<table border='0'>
<tr>
<td align='left'><iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url+ "&layout=button_count&show_faces=false&width=100&height=25&action=like&font=tahoma&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:107px; height:20px;'/></td><td align='center'><script src='http://apis.google.com/js/plusone.js' type='text/javascript'/><g:plusone expr:href='data:post.url' size='medium'/></td><td align='right'><a class='twitter-share-button' data-lang='es' href='https://twitter.com/share'>Twittear</a><script src='//platform.twitter.com/widgets.js' type='text/javascript'/></td>
</tr>
</table></div><style type='text/css'>table{border-collapse:separate;margin:0 0 1.5em;width:100%}#botones {border-bottom:1px solid #ebebeb;border-top:1px solid #ebebeb;height:40px;line-height:40px;margin:10px 0}</style></b:if>
Caja sencilla alargada
Copia el siguiente codigo.
<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'>
<div class='post-footer-line post-footer-line-1'>
Caja sencilla al lateral de la entrada
Copia el siguiente codigo.
<b:if cond='data:blog.pageType == "item"'>
<div id='botones'>
<table border="0"><tr>
<td><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=63&action=like&font=tahoma&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:79px; height:60px'/></td>
</tr><tr>
<td><a class='twitter-share-button' data-count='vertical' data-lang='es' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></td>
</tr><tr>
<td><script src='http://apis.google.com/js/plusone.js' type='text/javascript'/><g:plusone size='tall'/></td></tr> </table></div>
<style type='text/css'>#botones{float:left;position:relative;width:90px;background:#fff;height:220px;margin-top:0px;z-index:1000;}</style></b:if>
<div id='botones'>
<table border="0"><tr>
<td><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=63&action=like&font=tahoma&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:79px; height:60px'/></td>
</tr><tr>
<td><a class='twitter-share-button' data-count='vertical' data-lang='es' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></td>
</tr><tr>
<td><script src='http://apis.google.com/js/plusone.js' type='text/javascript'/><g:plusone size='tall'/></td></tr> </table></div>
<style type='text/css'>#botones{float:left;position:relative;width:90px;background:#fff;height:220px;margin-top:0px;z-index:1000;}</style></b:if>
Iconos con efecto sombra y redondeo
Estos iconos son de un diseño muy atractivo, y ligeros de carga.
Abren otra ventana POP up! para compartir el enlace y después de haber echo esto se cierran,
Copia el siguiente codigo.
Iconos circulares efecto giro
<b:if cond='data:blog.pageType == "item"'>
<div id='botones-para-compartir'>
<a expr:onclick='"window.open(\"http://www.facebook.com/sharer.php?u=" + data:post.url + "\",\"gplusshare\",\"toolbar=0,status=0,width=548,height=325\");"' href='javascript:void(0);' rel='nofollow' title='Compartir en Facebook'><img alt='compartir en facebook' class='facebooki' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw2gKZEwLMqw1abWWIXup2_fjPCNOqd3w1_uSzy4WQynQhDBx5dgN2vLbuRV2YXl_LNk__VL_LRdSzLVjWmcCIFltNsWhNpBm0QESXlFBHpdodLe6kJQG5g9gAgmvG_cgYu1m75dyMEr4/s320/facebook.png' title='compartir en facebook' width='32'/></a>
<a expr:onclick='"window.open(\"https://plus.google.com/share?url=" + data:post.url + "\",\"gplusshare\",\"toolbar=0,status=0,width=548,height=325\");"' href='javascript:void(0);' rel='nofollow' title='Compartir en Google+'><img alt='compartir en google+' class='googlei' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibSmOmVwxeJwNWu9hcB-XruJNRadYi2BSElRQd-VjF2KDnjI4c3m7PK1sgwZ4G7Ebpu5fngbIRhPo27KixpdVCkWTpHEuNZzee7c17FGPIlHDvCf18H_dX7dDA2CfvKRQS8egZ3xkA8ic/s1600/Google%252B+alt.png' title='compartir en google+' width='32'/></a>
<a expr:onclick='"window.open(\"http://twitter.com/home?status=" + data:post.url + "\",\"gplusshare\",\"toolbar=0,status=0,width=548,height=325\");"' href='javascript:void(0);' rel='nofollow' title='Compartir en Google+'><img alt='compartir en twitter' class='twitteri' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs_DNThmu-_ZP5Z30phhHMqjO8UZrDn0lxcwqBYgu7MiWU4L7tJFyQPhMQsHK1ubV0kHkaQHpoF6xrNwMepQUA3Cr_KBe4ovzJYF5h6rJkdDuq5PtwKroSI3qfEcEy05c-fIV_AQ_yBtY/s1600/twitter.png' title='compartir en twitter' width='32'/></a>
<a expr:onclick='"window.open(\"https://www.pinterest.com/pin/create/button/?url=" + data:post.url + "\",\"gplusshare\",\"toolbar=0,status=0,width=548,height=325\");"' href='javascript:void(0);' rel='nofollow' title='Compartir en Google+'><img alt='compartir en pinterest' class='pinteresti' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9fIeEB1_yMaXTt8SKFl4Hp_78pMJbG-N241Zn8ztuhJTbqnyZj3mw_qFA2mFkNjHQXoMf5f44zsu6tBUTDJFeeZeFbz4Pa9_Wlphx3gHVcaMRb6iPjlaW-qpYB_TLZdW9f1d8-kLfRAk/s1600/pinterest.png' title='compartir en pinterest' width='32'/></a>
<a expr:onclick='"window.open(\"https://www.linkedin.com/shareArticle?mini=" + data:post.url + "\",\"gplusshare\",\"toolbar=0,status=0,width=548,height=325\");"' href='javascript:void(0);' rel='nofollow' title='Compartir en Google+'><img alt='compartir en likedin' class='likedini' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEha8CQLuVrJtQob9Kp0Uv3p8yBl1K2SBMdZL5YUujkpDpv2nJ5AeSpJVA59GIs3OOcoymgE9u7qiCAn-_4n-bWKan6QbtyOIa8z2GlCjQ_YITJMuTETiKdBP0HhuDjJMYM8uquuOmWUeD8/s1600/linkedin.png' title='compartir en likedin' width='32'/></a></div>
<style>#botones-para-compartir{ text-align:center;}.likedini:hover, .facebooki:hover, .twitteri:hover, .googlei:hover,.pinteresti:hover {border-radius:25px 25px 25px 25px;transition:all .3s ease-out;box-shadow: 0px 0px 5px #000; /* tamaño y color de la sombra */-moz-transition: all .5s;-webkit-transition: all .5s;-o-transition: all .5s;}.likedini, .facebooki, .twitteri, .googlei, .pinteresti {transition:all .3s ease-out;-moz-transition: all .5s;-webkit-transition: all .5s;-o-transition: all .5s;margin-left:10px; /* espacio entre cada boton */}</style></b:if>
<div id='botones-para-compartir'>
<a expr:onclick='"window.open(\"http://www.facebook.com/sharer.php?u=" + data:post.url + "\",\"gplusshare\",\"toolbar=0,status=0,width=548,height=325\");"' href='javascript:void(0);' rel='nofollow' title='Compartir en Facebook'><img alt='compartir en facebook' class='facebooki' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw2gKZEwLMqw1abWWIXup2_fjPCNOqd3w1_uSzy4WQynQhDBx5dgN2vLbuRV2YXl_LNk__VL_LRdSzLVjWmcCIFltNsWhNpBm0QESXlFBHpdodLe6kJQG5g9gAgmvG_cgYu1m75dyMEr4/s320/facebook.png' title='compartir en facebook' width='32'/></a>
<a expr:onclick='"window.open(\"https://plus.google.com/share?url=" + data:post.url + "\",\"gplusshare\",\"toolbar=0,status=0,width=548,height=325\");"' href='javascript:void(0);' rel='nofollow' title='Compartir en Google+'><img alt='compartir en google+' class='googlei' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibSmOmVwxeJwNWu9hcB-XruJNRadYi2BSElRQd-VjF2KDnjI4c3m7PK1sgwZ4G7Ebpu5fngbIRhPo27KixpdVCkWTpHEuNZzee7c17FGPIlHDvCf18H_dX7dDA2CfvKRQS8egZ3xkA8ic/s1600/Google%252B+alt.png' title='compartir en google+' width='32'/></a>
<a expr:onclick='"window.open(\"http://twitter.com/home?status=" + data:post.url + "\",\"gplusshare\",\"toolbar=0,status=0,width=548,height=325\");"' href='javascript:void(0);' rel='nofollow' title='Compartir en Google+'><img alt='compartir en twitter' class='twitteri' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs_DNThmu-_ZP5Z30phhHMqjO8UZrDn0lxcwqBYgu7MiWU4L7tJFyQPhMQsHK1ubV0kHkaQHpoF6xrNwMepQUA3Cr_KBe4ovzJYF5h6rJkdDuq5PtwKroSI3qfEcEy05c-fIV_AQ_yBtY/s1600/twitter.png' title='compartir en twitter' width='32'/></a>
<a expr:onclick='"window.open(\"https://www.pinterest.com/pin/create/button/?url=" + data:post.url + "\",\"gplusshare\",\"toolbar=0,status=0,width=548,height=325\");"' href='javascript:void(0);' rel='nofollow' title='Compartir en Google+'><img alt='compartir en pinterest' class='pinteresti' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9fIeEB1_yMaXTt8SKFl4Hp_78pMJbG-N241Zn8ztuhJTbqnyZj3mw_qFA2mFkNjHQXoMf5f44zsu6tBUTDJFeeZeFbz4Pa9_Wlphx3gHVcaMRb6iPjlaW-qpYB_TLZdW9f1d8-kLfRAk/s1600/pinterest.png' title='compartir en pinterest' width='32'/></a>
<a expr:onclick='"window.open(\"https://www.linkedin.com/shareArticle?mini=" + data:post.url + "\",\"gplusshare\",\"toolbar=0,status=0,width=548,height=325\");"' href='javascript:void(0);' rel='nofollow' title='Compartir en Google+'><img alt='compartir en likedin' class='likedini' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEha8CQLuVrJtQob9Kp0Uv3p8yBl1K2SBMdZL5YUujkpDpv2nJ5AeSpJVA59GIs3OOcoymgE9u7qiCAn-_4n-bWKan6QbtyOIa8z2GlCjQ_YITJMuTETiKdBP0HhuDjJMYM8uquuOmWUeD8/s1600/linkedin.png' title='compartir en likedin' width='32'/></a></div>
<style>#botones-para-compartir{ text-align:center;}.likedini:hover, .facebooki:hover, .twitteri:hover, .googlei:hover,.pinteresti:hover {border-radius:25px 25px 25px 25px;transition:all .3s ease-out;box-shadow: 0px 0px 5px #000; /* tamaño y color de la sombra */-moz-transition: all .5s;-webkit-transition: all .5s;-o-transition: all .5s;}.likedini, .facebooki, .twitteri, .googlei, .pinteresti {transition:all .3s ease-out;-moz-transition: all .5s;-webkit-transition: all .5s;-o-transition: all .5s;margin-left:10px; /* espacio entre cada boton */}</style></b:if>
Iconos circulares efecto giro
Estos iconos son de un diseño muy atractivo, y ligeros de carga.
Abren otra ventana POP up! para compartir el enlace y después de haber echo esto se cierran,
Copia el siguiente codigo.
<b:if cond='data:blog.pageType == "item"'> <div id='botones-para-compartir'> <a expr:onclick='"window.open(\"http://www.facebook.com/sharer.php?u=" + data:post.url + "\",\"gplusshare\",\"toolbar=0,status=0,width=548,height=325\");"' href='javascript:void(0);' rel='nofollow' title='Compartir en Facebook'><img alt='compartir en facebook' class='facebooki' height='40' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik1KYYuteLRWeKZ8Lru0qeBIzSDUayqePkeWzs8wWjkMdOpQ6yCzb00F-AyxkMTaH12pf-TMEXmzWS1qx6C55JgIrwD-Gtpp_PibFaX2raDzTsiSovIMCI6B3jDAZFej74tIZ48E_Y3aE/s1600/facebook-long.png' title='compartir en facebook' width='40'/></a> <a expr:onclick='"window.open(\"https://plus.google.com/share?url=" + data:post.url + "\",\"gplusshare\",\"toolbar=0,status=0,width=548,height=325\");"' href='javascript:void(0);' rel='nofollow' title='Compartir en Google+'><img alt='compartir en google+' class='googlei' height='40' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuYrzngG9WIu1RAqzzvJPQhcvsFadbfjhaE-5lSqLZ0PQ0eAG7DkxCCIEda80hPcXPxwuSx4cMV6gzK7WeucybelbwaM3etkm6grvn7tyqsqNc_GrmCgAachlAInxKBN2CJ8xQeiqhxBg/s1600/google-long.png' title='compartir en google+' width='40'/></a> <a expr:onclick='"window.open(\"http://twitter.com/home?status=" + data:post.url + "\",\"gplusshare\",\"toolbar=0,status=0,width=548,height=325\");"' href='javascript:void(0);' rel='nofollow' title='Compartir en Google+'><img alt='compartir en twitter' class='twitteri' height='40' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjY1MAKQJIokw8Zt4cebLh7DNRELacJhZlZ3R67Y7AiJRS5lA4sV_s8KCHJBUuRjW_LEUGqVI446G7uP6NDxPBGWSgVKRwUX-NOjlzmwnEyP6JzdvxlKTtVg_XJ8xdyPJK_z7LrAqBRhXA/s1600/twitter-long.png' title='compartir en twitter' width='40'/></a> <a expr:onclick='"window.open(\"https://www.pinterest.com/pin/create/button/?url=" + data:post.url + "\",\"gplusshare\",\"toolbar=0,status=0,width=548,height=325\");"' href='javascript:void(0);' rel='nofollow' title='Compartir en Google+'><img alt='compartir en pinterest' class='pinteresti' height='40' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtQMCqDmQW2uJtS_UtKiDoZ8qSBYJ8X1kGVcCdBu6LnoK7QKlDXqjc2t21O62hqk6XIJP1cYab6-buNoRsFdkTkzFB7Atz1K06Nh0yoXM6DEt9bNbYxVP0EHxKwLj_tStSewWVa8fqCjU/s1600/pinterest-long.png' title='compartir en pinterest' width='40'/></a> <a expr:onclick='"window.open(\"https://www.linkedin.com/shareArticle?mini=" + data:post.url + "\",\"gplusshare\",\"toolbar=0,status=0,width=548,height=325\");"' href='javascript:void(0);' rel='nofollow' title='Compartir en Google+'><img alt='compartir en likedin' class='likedini' height='40' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaoAYblX_R6pHBzvYssyCrbLHkCUGz1NvPEhyE6GzE9txsBIUXQqHJFRZNqAmk4dWFfCfKtnoQ_v_uZZkl0DzKy_N9qoDTDCQb9hGOlp-SAbqma6P2iKDbFB23xMSjyi54yMtTGJ8Lhx4/s1600/linkedin-long.png' title='compartir en likedin' width='40'/></a></div> <style>#botones-para-compartir{ text-align:center;}.likedini:hover, .facebooki:hover, .twitteri:hover, .googlei:hover,.pinteresti:hover {-webkit-transform: rotate(360deg);-moz-transform: rotate(360deg);transform: rotate(360deg);transition:all .3s ease-out;-moz-transition: all .5s;-webkit-transition: all .5s;-o-transition: all .5s;}.likedini, .facebooki, .twitteri, .googlei, .pinteresti {transition:all .3s ease-out;-moz-transition: all .5s;-webkit-transition: all .5s;-o-transition: all .5s;margin-left:10px; /* espacio entre cada boton */}</style></b:if>
Nota:
Pega el codigo que elijas entre la primera y segunda linea
Pega el codigo que elijas entre la primera y segunda linea
0 Comentarios
En breve revisaremos tu comentario para poder publicarlo.
Muchas gracias