Blog

Programación, desarrollo web y SEO

Insertar botones de Twitter en tu página

Cada vez está más extendido incluir los botones de las redes sociales más populares en tu página web, y como hace tiempo hablamos de incluir el de Facebook y el de Google plus, ahora es el turno de Twitter.

Insertar botones de Twitter

El proceso es bastante sencillo. Puedes irte a la web oficial de Twitter y seleccionar el tipo de botón que quieras incluir en tu página o bien insertar el código que hemos dejado preparado, cambiando la dirección por la tuya.

Esta es la página oficial de Twitter:

http://twitter.com/about/resources/followbutton

En esta post vemos como insertar tus botones de Twitter en tu website.

Boton de Twitter

Este es el código del botón para conseguir seguidores para tu website:

1
2
3
4
5
6
<a href="https://twitter.com/CodigoJavaO" class="twitter-follow-button" data-show-count="false" data-lang="es">Seguir a @CodigoJavaO</a>
<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>

Tienes que cambiar la url por la tuya. En este caso tienes que cambiar:
https://twitter.com/CodigoJavaO por

https://twitter.com/TU_PAGINA_EN_TWITTER

Insertando este código nos valdría para compartir un enlace a través de Twitter, es decir, haciendo click compartiría la url de tu website en su Twitter.

La modalidad de compartir enlaces a través de los botones de Twitter nos permitiría hacerlo de dos maneras, o bien compartiendo la URL que estés viendo en ese momento o bien fijar la URL que quieras que se comparta aunque estés en otra página de ese dominio.

Además también te permite escribir el texto del enlace que quieres que compartan.

Con este código nos compartiría el enlace de la página que estes viendo actualmente.

1
2
3
4
5
6
<a href="https://twitter.com/share" class="twitter-share-button" data-via="CodigoJavaO" data-lang="es">Twittear</a>
<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>

Con este otro código nos compartiría el enlace y el texto del enlace que hayamos personalizado:

1
2
3
4
5
6
7
<a href="https://twitter.com/share" class="twitter-share-button" data-url="https://codigojavaoracle.com" data-text="Tu Website de programación" data-via="CodigoJavaO" data-lang="es">Twittear</a>
<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>

En este caso deberías cambiar el campo data-url, el campo data-text y el campo data-via por lo de tu website, tu texto del enlace y por último tu usuario.
Sería así:

data-url=”http://TU_URL.com” data-text=”TU_DESCRIPCION” data-via=”TU_USUARIO”

Esta es la página oficial dónde puedes conseguir los botones de Twitter:

https://twitter.com/about/resources/buttons#follow

Share this post

Join the conversation


5 − tres =