Botones Redes Sociales - Historial de revisiones

Maro: /* Google Plus */

2013-08-09T20:15:16Z

‎Google Plus

Maro: /* Twitter */

2013-08-09T20:14:42Z

‎Twitter

Maro: Página creada con '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…'

2013-08-09T20:12:55Z

Página creada con '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 nueva

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

<div class="g-plusone" data-size="medium" data-annotation="none" data-href="http://www.comunidadfusa.com.ar"></div>


<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>

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.

@@ Línea 40: / Línea 40: @@
   </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.

@@ Línea 18: / Línea 18: @@
 Ejemplo de codigo:
-  <div><a href="https://twitter.com/share" class="twitter-share-button"  data-lang="es" data-count="none">Twittear</a></div>
+  <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 ==