Agregar botones sociales (facebook, twitter y Google+) en tu blog o pagina web

Consejos, css, html, internet

Hola amigos, seguramente te habras percatado que muchos sitios webs, o el blog que visitas a diario, implementan botones como el ‘Me Gusta’ o el ‘+1′. Esta es una de las maneras de promocionar tu pagina web o blog es utilizando las herramientas que te brindan las redes sociales, en este caso nos centraremos en las 3 principales: facebook, twiiter y google+.

si visitas el area de desarrolladores o recursos, de dichas redes sociales, te proporcionaran el codigo para implementarlo en tu pagina web. En este caso vamos a implementar los botones grandes, ya que son los mas llamativos y visibles para tus visitantes.

el codigo de los 3 botones es el siguiente:

Facebook

<!------>
<iframe src="//www.facebook.com/plugins/like.php?href=aquilaurl&amp;send=false&amp;layout=box_count&amp;width=82&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font&amp;height=78" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:82px; height:78px;" allowTransparency="true"></iframe>
<!------>

Twitter

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

<a href="http://twitter.com/share?url=aquilaurl" rel="nofollow" class="twitter-share-button" data-text="<?php the_title(); ?>" data-count="vertical"  data-lang="es" data-related="yosoyvago">Tweet</a>
<!------>

Google+

<!-- debemos poner el siguiente codigo en la cabecera (al comenzar <body>) -->
<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>
<!------>

<!-- codigo del boton -->
<g:plusone size="tall" href="aquilaurl"></g:plusone>
<!------>

Agregar botones facebook, twiiter y google+ en wordpress

esta vez colocaremos los botones antes mencionadas en cada una de las entradas de tu blog, solo copia y pega el siguiente codigo en tu web.

Nota: debes ponerlo antes de <?php the_content(); ?> o <?php the_excerpt(); ?> (segun el diseño de tu plantilla).

<div class="sociales" style="background-color:#fff; margin-right:3px;">

	<span style="float:right; width:60px; height:72px">
	         <g:plusone size="tall" href="<?php the_permalink() ?>"></g:plusone>
	</span>

	<span style="float:right; width:72px; height:76px">

	<a href="http://twitter.com/share?url=<?php the_permalink() ?>" rel="nofollow" class="twitter-share-button" data-text="<?php the_title(); ?>" data-count="vertical"  data-lang="es" >Tweet</a>
         <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

	</span>

          <span style="float:right; width:82px; height:74px; text-align:center;margin-top:2px">

           <iframe src="//www.facebook.com/plugins/like.php?href=<?php the_permalink()?>&amp;send=false&amp;layout=box_count&amp;width=82&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font&amp;height=78" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:82px; height:78px;" allowTransparency="true"></iframe>

	</span>

</div>

El resultado es el siguiente:

botones sociales facebook twitter