Widget para conseguir más seguidores en redes sociales

Las redes sociales son el complemento perfecto para promocionar una web, blog o cualquier tipo de producto. Es una buena forma de llegar al máximo número de personas re-dirigiéndolas a tus páginas y así incrementar el número de visitas en las mismas.

Pero de nada sirve tener cuenta en todas las redes sociales si no eres capaz de hacer que la gente las conozca y terminen siguiéndote. Es por eso que es importante equipar a tus páginas de una serie de elementos que harán que tus redes sociales sean visibles para cualquier persona que llegue a tu página a través de un buscador. Ofrecerle la opción de seguirte a través de las redes sociales, hará que pueda estar pendiente de tus próximas publicaciones y poco a poco vayas construyendo una buena comunidad de seguidores afines a tus intereses y a la temática de tu página.

En esto blog podéis ver varios elementos que hacen referencia a las redes sociales. Lo importante es que si alguien está interesado en tu contenido, es posible que se plantee el seguirte para así estar informado de las próximas publicaciones. En cambio, si los enlaces a las redes sociales en tu página están demasiado escondidos, o inexistentes, no tardará más de 2 segundos en desistir en su idea y salir de tu página sin llegar a convertirse en un seguidor.

Las partes importantes donde primero irá la gente a mirar esos elementos que hagan referencias a las redes sociales serán:

• En el sidebar de la página.
• Al final del artículo.
• En la parte superior del blog.

Por esa razón, si puedes tener enlaces o iconos de las redes sociales de tu blog en todas esas zonas de la página, seguro que aumentas el número de personas que te siguen.

A través de varios mensajes que me habéis escrito algunos de vosotros mediante el formulario de contacto o cualquier otro medio, he recibido preguntas acerca de cómo he ido añadiendo los diferentes elementos de las redes sociales en mi blog.

En vez de responder uno a uno, he decidido ir creando artículos para ir respondiendo a esas preguntas y así podréis disponer de la información todos vosotros por si queréis implementarlo en vuestros blogs.

Colocar un widget en la sidebar con enlaces a redes sociales

Una de las preguntas que recibí, era cómo había creado la tabla que hay en la sidebar de mi blog donde hace referencia a todas las redes sociales.

Desde que la puse ha habido un buen aumento progresivo en el número de seguidores en redes sociales, ya que esa parte del blog es de las primeras que miras si estás interesado en una página.

Para ayudar a los que me habéis preguntado, por si queréis tener una tabla igual o similar, voy a publicar el código del que está compuesto la misma.

Si estáis en WordPress, para tener esa tabla, tendréis que poner el código que pondré a continuación en un widget del tipo «Texto».

Si estáis en Blogger, tendréis que hacer lo propio con el widget que te permita introducir código HTML en la sidebar de tu blog.

El código a insertar será el siguiente:

<!– Styles –>
<style type=»text/css»>
#share-box-0 {
width:270px;
overflow:hidden;
}
#share-box-0 .gplusone {
background-color:#f5fcfe;
border:1px solid #d8e6eb;
border-top:1px solid #FFF;
font-size:.87em;
color:#000;
line-height:24px;
padding:9px 0 0 11px;
}

#share-box-0 .gplusone span {
display:inline-block;
vertical-align:middle;
height:20px;
margin-top:-17px;
}

#share-box-0 .fb-like-box {
border:1px solid #dcdcdc;
padding:5px 11px;
}
#share-box-0 .twitter-follow {
background-color:#eef9fd;
border:1px solid #c7dbe2;
border-top:0;
}

#share-box-0 .twitter-follow iframe {
margin:9px 11px;
}
#other-social-bar {
background-color: #D8E6EB;
border: 1px solid #B6D0DA;
box-shadow: 0 1px 1px #FFFFFF inset;
font-family: «Arial»,»Helvetica»,sans-serif;
font-weight: bold;
overflow: hidden;
height:100px;
padding: 0;
}
#other-social-bar ul {
list-style: none outside none;
padding-left: 4px;
}
#other-social-bar .other-follow {
color: #1E598E;
float: left;
height: 60px;
overflow: hidden;
padding: 0px 10px 7px;
width: 270px;
}
#other-social-bar .other-follow ul {
list-style: none outside none;
padding-left: 4px;
line-height:65px;
}
#other-social-bar .other-follow li {
border: 0 none;
display: inline;
font-size: 12px;
font-weight: bold;
text-shadow: 1px 1px white;
line-height:65px;
}
#other-social-bar .other-follow li a {
color: #1E598E;
display: inline;
font-size: 12px;
font-weight: bold;
text-shadow: 1px 1px white;
}
#other-social-bar .other-follow li.my-rss {
background: url(http://4.bp.blogspot.com/-3ZR8uAHB8QY/T-MLyuLqG4I/AAAAAAAAFxw/Zxk86OIXwJM/s000/rss-16×16.png) no-repeat scroll 0 0 transparent;
line-height: 2;
margin-bottom: 0;
padding: 0 3px 1px 20px;
width: 60px;

}
#other-social-bar .other-follow li.my-gplus {
background: url(http://2.bp.blogspot.com/-oV5JSdsA2Sw/T-MLyxNI7PI/AAAAAAAAFx4/rVvTQjUpjCE/s000/gplus-16×16.png) no-repeat transparent;
line-height: 2;
width: 60px;
padding: 0px 3px 1px 20px;
margin-bottom:0px;
}
#other-social-bar .other-follow li.my-pinterest {
background: url(http://4.bp.blogspot.com/-zYx6lF1–pw/T-MLzJGZcNI/AAAAAAAAFyA/R7emD2taC9s/s000/small-p-button.png) no-repeat transparent;
line-height: 2;
width: 60px;
padding: 0px 3px 1px 20px;
margin-bottom:0px;
}
#email-news-subscribe .email-box {
padding: 10px 10px;
font-family: «Arial»,»Helvetica»,sans-serif;
border-top: 0;
border-right: 1px solid #C7DBE2;
border-left: 1px solid #C7DBE2;
border-image: initial;
}
#email-news-subscribe .email-box input.email {
background:#FFFFFF;
border: 1px solid #dedede;
color: #999;
padding: 7px 10px 8px 10px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-o-border-radius: 3px;
-ms-border-radius: 3px;
-khtml-border-radius: 3px;
border-radius: 3px;
border-image: initial;
font-family: «Arial»,»Helvetica»,sans-serif;
}
#email-news-subscribe .email-box input.email:focus {
color:#333
}
#email-news-subscribe .email-box input.subscribe {
background: -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#FFCA00),color-stop(1,#FF9B00));
background: -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%);
-pie-background: linear-gradient(270deg,#ffca00,#ff9b00);
font-family: «Arial»,»Helvetica»,sans-serif;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border:1px solid #cc7c00;
color:white;
text-shadow:#d08d00 1px 1px 0;
padding:7px 14px;
margin-left:3px;
font-weight:bold;
font-size:12px;
cursor:pointer;
border-image: initial;
}
#email-news-subscribe .email-box input.subscribe:hover {
background: #ff9b00;
background-image:-moz-linear-gradient(top,#ffda4d,#ff9b00);
background-image:-webkit-gradient(linear,left top,left bottom,from(#ffda4d),to(#ff9b00));
filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffffff,endColorStr=#ebebeb);
outline:0;-moz-box-shadow:0 0 3px #999;
-webkit-box-shadow:0 0 3px #999;
box-shadow:0 0 3px #999
background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#ffda4d),color-stop(1,#ff9b00));
background:-moz-linear-gradient(center top,#ffda4d 0,#ff9b00 100%);
-pie-background:linear-gradient(270deg,#ffda4d,#ff9b00);
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border:1px solid #cc7c00;
color:#FFFFFF;
text-shadow:#d08d00 1px 1px 0
}
</style>

<div id=»share-box-0″>

<div class=»fb-like-box»>
<iframe src=»http://www.facebook.com/plugins/like.php?href=http://www.facebook.com/monetizados&amp;layout=standard&amp;show_faces=false&amp;width=350&amp;action=like&amp;colorscheme=light» scrolling=»no» frameborder=»0″ allowtransparency=»true» style=»border:none; overflow:hidden; width:250px; height:40px»></iframe></div>
<div class=»gplusone»>
<div class=»g-plusone po-stub» data-size=»medium» data-count=»true» data-callback=»fire_multitrack» data-href=»https://plus.google.com/u/0/b/100779594607355683235/100779594607355683235/posts«></div> <span>Recomendar en Google+</span>
</div>
<div class=»twitter-follow»>
<a href=»http://twitter.com/monetizados» class=»twitter-follow-button»>Seguir a @monetizados</a>
</div>
<div style=»background: #D8E6EB;» id=»other-social-bar»>
<ul class=»other-follow»>
<li class=»my-rss»>
<a target=»_blank» href=»https://www.monetizados.com/feed» title=»RSS» rel=»nofollow»>RSS Feed Monetizados</a>
</li><br>
<li class=»my-gplus»>
<a target=»_blank» href=»https://plus.google.com/u/0/b/100779594607355683235/100779594607355683235/posts» title=»Google Plus» rel=»nofollow»>Google Plus Monetizados</a>
</li><br>
<li class=»my-pinterest»>
<a target=»_blank» href=«http://pinterest.com/monetizados» title=»Pinterest» rel=»nofollow»>Pinterest Monetizados</a>
</li>
</ul>
</div>
</div>

<!– Scripts –>
<script type=»text/javascript» src=»https://apis.google.com/js/plusone.js»>{lang: ‘en’}</script>
<script type=»text/javascript» src=»http://platform.twitter.com/widgets.js»></script>

<div class=’clear’></div>

Aunque veáis que se corta alguna linea, solo tenéis que copiar ese texto y pegarlo en vuestro blog, se pegará el código completo. Fijaos que tendréis que sustituir las palabras que he puesto en negrita por las que correspondan a las distintas direcciones de tus redes sociales.

También podréis modificar los estilos o cualquier otra parte del código si deseáis para presentarlo de una forma diferente.

Espero que os sirva y si tenéis algún problema para añadirlo, podéis comentarme.

He de ser honesto y decir que este código lo saqué (más o menos parecido) de un blog donde explicaban también cómo ponerlo. Es de hace mucho y por tanto sería complicado encontrarlo ahora. Si alguien sabe de qué artículo hablo o incluso es el dueño de dicha entrada, que me lo comente y lo citaré como fuente.