Crea fácilmente botones de social media

Una herramienta para promover nuestro blog son las diversas plataformas de Social Media, por lo que es muy importante integrarlas a nuestro blog o página web

He aquí una forma fácil de generar botones para compartir contenidos o seguir alguna red en particular para las principales redes sociales (Twitter, Facebook, LinkedIn, Google+ y Pinterest)

¿Seguir o compartir?

Primero lo primero… ¿cuál es la diferencia entre seguir y compartir?

Seguir

Este botón genera seguidores o fans (dependiendo de la red social) al poner este botón creas visibilidad de tu marca ya que si alguien te sigue tus contenidos son mostrados en su plataforma y mostrados a los seguidores de este fan tuyo.

Compartir

Este botón hace que una persona muestre o comparta un contenido tuyo entre sus seguidores sin necesidad de seguirte él a ti.

Botones para Twitter

1) Botón “Seguir”

Visita https://twitter.com/about/resources/buttons#follow para personalizar el botón, luego copia y pega el código HTML que se genera en tu página web. (Nota: Para más información Twitter’s documentation.)

El código se visualiza así:

“<a href=”https://twitter.com/MKTConsulting4U&#8221; class=”twitter-follow-button” data-show-count=”false” data-size=”large”>Follow @MKTConsulting4U</a>
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?’http’:’https’;if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+’://platform.twitter.com/widgets.js’;fjs.parentNode.insertBefore(js,fjs);}}(document, ‘script’, ‘twitter-wjs’);”

2) Botón “Compartir”

Visita https://twitter.com/about/resources/buttons#tweet para personaalizar el botón, el texto y URL dentro del tweet, lenguaje y atributos como @mimarca o un hashtag #mimarca. coloca el código HTML generado en donde quieras que se coloque en tu página web. (Nota: Para más información Twitter’s documentation.)

El código se visualiza así:

“<a href=”https://twitter.com/share&#8221; class=”twitter-share-button” data-via=”MKTConsulting4U” data-size=”large”>Tweet</a>
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?’http’:’https’;if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+’://platform.twitter.com/widgets.js’;fjs.parentNode.insertBefore(js,fjs);}}(document, ‘script’, ‘twitter-wjs’);”

3) Botón “Hashtag”

Visita https://twitter.com/about/resources/buttons#hashtag para personalizar el botón.

El código se visualiza así:

“<a href=”https://twitter.com/intent/tweet?button_hashtag=TwitterStories&#8221; class=”twitter-hashtag-button” data-size=”large” data-related=”MKTConsulting4U”>Tweet #TwitterStories</a>
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?’http’:’https’;if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+’://platform.twitter.com/widgets.js’;fjs.parentNode.insertBefore(js,fjs);}}(document, ‘script’, ‘twitter-wjs’);”

4) Botón de Mención

Visita https://twitter.com/about/resources/buttons#mention para personalizar el botóntoma el código HTML y colócalo en donde quieras que aparezca.

El código se visualiza así:

“<a href=”https://twitter.com/intent/tweet?screen_name=MKTConsulting4U&#8221; class=”twitter-mention-button” data-size=”large” data-related=”MKTConsulting4U”>Tweet to @MKTConsulting4U</a>
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?’http’:’https’;if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+’://platform.twitter.com/widgets.js’;fjs.parentNode.insertBefore(js,fjs);}}(document, ‘script’, ‘twitter-wjs’);”

5) “Twitea esto”

Por suerte existe http://clicktotweet.com, herramienta gratuita que nos ayuda a generar una URL que podemos insertar en el texto como hipervínculo.

@MktConsulting4U expertos en Marketing Digital para tu empresa. “Twitea esto”

6) Widgets de Twitter

Visita https://twitter.com/settings/widgets/new, da click en ‘Create New,’ selecciona el Widget que deseas, selecciona y copia el código HTML y pégalo.

!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?’http’:’https’;if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+”://platform.twitter.com/widgets.js”;fjs.parentNode.insertBefore(js,fjs);}}(document,”script”,”twitter-wjs”);

El código se visualiza así:

“<a class=”twitter-timeline” href=”https://twitter.com/MKTConsulting4U&#8221; data-widget-id=”645049040212627457″>Tweets por el @MKTConsulting4U.</a>
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?’http’:’https’;if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+”://platform.twitter.com/widgets.js”;fjs.parentNode.insertBefore(js,fjs);}}(document,”script”,”twitter-wjs”);”

Facebook

1) Botón “Seguir”

Visita https://developers.facebook.com/docs/reference/plugins/follow/ para personalizar el botón, genera el códig (disponible en HTML5, XFBML, IFRAME, o URL) y colócalo en donde quieras que aparezca.

Facebook seguir 1

 

2) Botón “Me Gusta”

Visita https://developers.facebook.com/docs/reference/plugins/like-box/. para personalizar el botón, genera el códig (disponible en HTML5, XFBML, IFRAME, o URL) y colócalo en donde quieras que aparezca.

3) Botón “Enviar”

Visita https://developers.facebook.com/docs/reference/plugins/send/ y especifica la URL que será compartida, personalizar el botón, genera el código (disponible en HTML5, XFBML, IFRAME, o URL) y colócalo en donde quieras que aparezca.

Linkedin

1) Botón “Seguir”

Visita https://developer.linkedin.com/plugins/follow-company para personalizar el botón, genera el código y colócalo en donde quieras que aparezca.

linkedin seguir 1

2) PluginPerfil de la compañía

Crea tu perfil en https://developer.linkedin.com/plugins/company-profile-plugin, personalizar el botón, genera el código y colócalo en donde quieras que aparezca.

3) Botón “Compartir”

Visita https://developer.linkedin.com/plugins/share-button, especifica la URL a la que quieres enviar el tráfico, personaliza el botón, genera el código y colócalo en donde quieras que aparezca..

linkedin compartir 3

Google+

1) Botón “Seguir”

Visita https://developers.google.com/+/web/follow/, selecciona tu página de Google+ o tu perfil personal, personaliza el botón, genera el código y colócalo en donde quieras que aparezca.

Google plus Seguir 4

2) Google+ Badge

Visita https://developers.google.com/+/web/badge/, selecciona tu página de Google+ o tu perfil personal, personaliza el botón, genera el código y colócalo en donde quieras que aparezca.

3) Botón +1

Visita http://www.google.com/webmasters/+1/button/ para personalizar el botón, genera el código y colócalo en donde quieras que aparezca.

Google plus Botón 5

4) Botón “Compartir”

Visita https://developers.google.com/+/web/share/ para personalizar el botón, genera el código y colócalo en donde quieras que aparezca.

Google plus compartir 6

Pinterest

1) Botón “Seguir”

Visita http://business.pinterest.com/widget-builder/#do_follow_me_button, personaliza el botón, genera el código y colócalo en donde quieras que aparezca.



El código se visualiza así:

“<a data-pin-do=”buttonFollow” href=”http://es.pinterest.com/pinterest/”>Pinterest</a&gt;
<!– Please call pinit.js only once per page –>
//assets.pinterest.com/js/pinit.js

2) Botón “Pin It”

Visita http://business.pinterest.com/widget-builder/#do_pin_it_button personaliza el botón, genera el código y colócalo en donde quieras que aparezca.

El código se visualiza así:

“<a href=”//es.pinterest.com/pin/create/button/” data-pin-do=”buttonBookmark” data-pin-color=”red” data-pin-height=”28″><img src=”//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_red_28.png” /></a>
<!– Please call pinit.js only once per page –>
//assets.pinterest.com/js/pinit.js

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s