Tercer post de ayuda. Ya hemos visto en el segundo post de ayuda como crear secciones. En este veremos cómo añadir botones de redes sociales a una sección.
Recordemos, la estructura será la siguiente:
<div id="top">
<br />
REDES SOCIALES
<br /><br />
</div>
En esta sección vamos a añadir un botón de Facebook, Google+ y Twitter.
Lo primero, es añadir este código (necesario para el botón de Google+) antes de la etiqueta </head>:
<!-- Botón Google -->
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{lang: 'es'}</script>
Lo siguiente, es cambiar “REDES SOCIALES” por el siguiente código:
<!--Botón Página Facebook-->
<script>(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/es_ES/all.js#xfbml=1";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));</script>
<p><div class="fb-like-box" data-href="PAGINA_DE_TU_FACEBOOK" data-width="220" data-show-faces="false" data-stream="false" data-header="true"></div></p>
<!--Fin Botón Página Facebook-->
<!--Botón Google-->
<p><div align="center"><g:plusone size="tall"></g:plusone>
<!--Botón Twitter-->
<p><iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://platform.twitter.com/widgets/follow_button.html?screen_name=TWITTER_DE_TU_PAGINA&show_count=true&lang=es" style="width:220px; height:20px;"></iframe></p>
Nota: El nombre del Twitter se escribe sin el @
El resultado sería:
Podemos también añadir el botón de Taringa! si añadimos lo siguiente:
<!--Botón Taringa-->
<script type="text/javascript">(function(){var x=document.createElement('script'), s=document.getElementsByTagName('script')[0];x.async=true;x.src='http://widgets.itaringa.net/share.js';s.parentNode.insertBefore(x,s)})()</script>
<t:sharer data-layout="big_new"></t:sharer></div></p>
Ahora que tenemos la sección de compartir, veremos como poner botones para compartir un post en las redes sociales.
Si miramos debajo de cada post, podemos ver dos rectángulos grises. Uno con fecha de publicación del post y otro con etiquetas y fuente.
Cada uno de estos rectángulos comienza con <div id=”footer”> y termina con un </div> cerrándolo. Entre estas 2 etiquetas irá el contenido que queremos mostrar en ese rectángulo.
Teniendo esto claro, vamos a añadir un nuevo rectángulo, que usaremos para poner los botones de redes sociales.
Buscamos el siguiente código:
{block:Link}
<div class="link"><a href="{URL}" {Target}>{Name} »</a></div>
{block:Description}<div class="copy">{Description}</div>{/block:Description}
{/block:Link}
{block:Date}
<a href="{Permalink}">
<div class="footer for_permalink">
Nuestro rectángulo será el primero a mostrar, por eso vamos a situarlo entre {/block:Link} y {blockate}:
{block:Link}
<div class="link"><a href="{URL}" {Target}>{Name} »</a></div>
{block:Description}<div class="copy">{Description}</div>{/block:Description}
{/block:Link}
<div class="footer">
RECTÁNGULO CON BOTONES DE REDES SOCIALES
</div>
{block:Date}
<a href=”{Permalink}”>
<div class=”footer for_permalink”>
El resultado sería:
Primero, hay que añadir este código (necasario para el botón de Twitter) antes de la etiqueta </head>:
<!-- Botón Twitter -->
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
Ahora tenemos que cambiar “RECTÁNGULO CON BOTONES DE REDES SOCIALES” por el siguiente código:
<div class="footer">
<!--Botón Reblog -->
<a href="{ReblogUrl}?redirect_to=http%3A%2F%2F[b]URL_DE_TU_WEB_SIN_HTTP[/b]"><img src="http://assets.tumblr.com/images/iframe_reblog_alpha_es_ES.png?647"/></a>
<!--Botón Me gusta de Facebook-->
<iframe src="//www.facebook.com/plugins/like.php?href={Permalink}&send=false&layout=button_count&width=100&show_faces=false&action=like&colorscheme=light&font=trebuchet+ms&height=20" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:20px;" allowTransparency="true"></iframe>
<!--Botón compartir en Twitter-->
<a href="http://twitter.com/share?original_referer=[b]TUPAGINA[/b]/&source=tweetbutton&text=[b]TWITTER_DE_TU_PAGINA[/b]&url={Permalink}" class="twitter-share-button" data-count="horizontal" data-via="[b]TWITTER_DE_TU_PAGINA[/b]" data-lang="es">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
<!--Botón Twitter-->
<a href="https://twitter.com/share" class="twitter-share-button" data-url="{Permalink}" data-via="[b]TWITTER_DE_TU_PAGINA[/b]" data-lang="es">Twittear</a>
<!--Botón Tuenti-->
<a target="_blank" href="http://www.tuenti.com/share?url={Permalink}"><img alt="Tuenti" src="http://30.media.tumblr.com/tumblr_lwndg15Eoa1r1m0jso1_100.png"/></a>
<!--Botón Menéame -->
<a target="_blank" href="http://meneame.net/submit.php?url={Permalink}"><img src="http://29.media.tumblr.com/tumblr_lt13ajpr9s1r1m0jso1_r2_100.png" alt="Menéame"></a>
<!--Botón Google -->
<g:plusone size="medium" href="{Permalink}"></g:plusone>
</div>
Nota: Hay que hacer cambios en el botón de rebloguear: URL_DE_TU_WEB_SIN_HTTP es la URL de tu Tumblr, sin incluir el HTTP (ejemplo: delasazores.com), para que redireccione a nuestra web y no al Dashboard una vez reblogueado el contenido.
También hay que hacer cambios en el de Twitter: TUPAGINA es la URL de tu Tumblr (ejemplo: http://delasazores.com/). TWITTER_DE_TU_PAGINA es el nombre de tu Twitter. Como antes, se escribe sin el @.
El resultado sería:
Podemos también añadir el botón de Taringa! si añadimos lo siguiente:
<!--Botón Taringa -->
<script type="text/javascript">(function(){var x=document.createElement('script'), s=document.getElementsByTagName('script')[0];x.async=true;x.src='http://widgets.itaringa.net/share.js';s.parentNode.insertBefore(x,s)})()</script>
<t:sharer data-url="{Permalink}&" data-layout="small"></t:sharer>
Ahora vamos a añadir un nuevo rectángulo, que nos mostrará la URL de nuestro post para poder copiarla.
Es tan sencillo como añadir este código del rectángulo de redes sociales:
<div class="footer">
<!-- Enlace -->
Enlace: <input class="enlace" type="text" value="{Permalink}" onclick="this.select()" style="width: 430px;">
</div>
Nota: Con width: 430px indicamos el ancho que tendrá el input. Podéis poner el ancho que considéis correcto.
El resultado sería:
En el siguiente tutorial explicaré como cambiar los 2 últimos rectángulos para que el primero nos muestre Fecha y hora de publicación del post a la izquierda y número de notas y comentarios del disqus a la derecha y el segundo rectángulo nos mostrará Tags a la izquierda y Vía y Fuente a la derecha.
