Botones Redes Sociales

Muchas veces queremos compartir una página web o algún contenido web en las distintas redes sociales. Es por esto que cada red social provee botones que se insertan en nuestra página de forma rápida y simple. A continuación veremos qué código hmtl insertar para tener nuestra página web un botón de Facebook, Twitter y Google Plus:

Facebook

(Soportado por Chrome, Firefox 3.6+, Safari, Internet Explorer 7+) Documentacion: https://developers.facebook.com/docs/reference/plugins/like/

Facebook tiene varias formas de implementarlo, pero la que mas sencillo nos resulto en nuestro caso con un iframe.

Ejemplo de codigo:

<iframe scrolling="no" frameborder="0" allowtransparency="true" style="border:none; overflow:hidden; width:140px; height:21px;" src="http://www.facebook.com/plugins/like.php?href=http://www.comunidadfusa.com.ar&locale=es_ES&layout=button_count&show_faces=true&width=140&action=like&font=arial&colorscheme=light&height=21"> </iframe>

Twitter

(Soportado por Chrome, Firefox 3.6+, Safari, Internet Explorer 7+) Documentacion: https://twitter.com/about/resources/buttons

Ejemplo de codigo:

<a href="https://twitter.com/share" class="twitter-share-button"  data-lang="es" data-count="none">Twittear</a>
 <script>!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'); </script>

Google Plus

(Soportado por Chrome, Firefox 3.6+, Safari, Internet Explorer 8+) Documentacion: https://developers.google.com/+/web/+1button/

Ejemplo de codigo:

<script type="text/javascript">
  window.___gcfg = {lang: 'es-419'};

  (function() {
 var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

Observaciones

Tener en cuenta que si en el botón de Facebook agregamos una url del sitio a compartir que no contenga punto (url no válida), éste botón no se visualizará. Asi mismo, el botón de Google Plus se mostrará pero al hacer click en él, se visualizará con un símbolo de advertencia.

El mas sencillo para implementar nos resultó el de twitter porque este resuelve todo solo y no necesita ponerle la url ya que la detecta de la página en la que estamos agregando el botón. Aparte de ser el mas compatible con todos los navegadores.