3 Sitios para agregar una Barra Social a tu blog y viralizalo más...

Enorme artículo de Patricia Fuentes para Infoynet. Muy útil para bloggers que deseamos mejorar la viralidad del blog.

Ya todos los autores y autoras de blogs y páginas web reconocen la importancia de añadir características sociales a su sitio. La mayoría cuentan con insignias de las redes sociales a las que pertenecen para que sus visitantes puedan interaccionar con ellos desde las mismas. Muchos incorporan botones para que sus entradas o posts puedan ser compartidos en diversos servicios de la web 2.0. Las barras sociales son widgets que proporcionan éstas y otras muchas funcionalidades, y tienen la ventaja de permanecer siempre visibles, independientemente de la página que esté visitando el usuario del sitio. A continuación, ofrecemos una lista de 7 herramientas gratuitas para añadir una barra social a un blog o página web.

TurnSocial

La barra de TurnSocial permite incorporar 15 servicios de destino (entre ellos, Facebook, Twitter, LinkedIn y Google+), así como botones de acceso a nuestra página de Facebook, nuestro perfil de Twitter y el feed o hilo RSS de nuestro sitio web. Está especialmente indicada para negocios locales, ya que cuenta con herramientas de geolocalización como Foursquare, y de recomendación como Yelp.

Skysa

La barra de Skysa soporta 2 plataformas (Blogger y WordPress) y 4 servicios de destino (Facebook, Twitter, Google+ y Digg) de forma integrada, además de un botón de AddThis que amplía las posibilidades a más de 300. Ofrece un gran número de aplicaciones, entre ellas, la incorporación de mapas, galerías de imágenes de Flickr, traducción, etc. También permite personalizar el aspecto y la posición de la barra. Tiene una versión gratuita y dos de pago.

Read More

Instala botones flotantes para recomendar tu blog en face, twitter y +1

Artículo publicado en el blog Ciudad Blogger, uno de los sitios con más información sobre tecnología Blogger Ve la entrada en su blog original.

Una de las primeras cosas que me preguntaron cuando cambié de plantilla fue cómo poner el botón que aparece al final y que al presionarlo aparecen los botones para compartir el blog.
Ya saben que no me guardo nada y todo se los comparto, así que en esta entrada vamos a ver cómo poner esos botones para promocionar el blog.

Se trata de un botón flotante que al presionarlo aparecerá un contenedor con un efecto de desvanecimiento y en él, los botones de Facebook, Twitter y +1.

Con ellos podremos compartir la portada del blog, pues no sólo hay que promocionar las entradas sino también el blog en general.

El efecto de desvanecimiento lo lograremos con Scriptaculous y Prototype, así que quien use jQuery tendrá que hacer unos cambios para que ambas librerías puedan funcionar al mismo tiempo.

La instalación de estos botones es bastante sencilla, primero entra en la Edición HTML de la plantilla y antes de ]]></b:skin> agrega estos estilos:

#botones-like {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0px 0px 4px #696969;
-moz-box-shadow: 0px 0px 4px #696969;
box-shadow: 0px 0px 4px #696969;
background-color: #eee; /* Color de fondo del botón */
padding: 5px;
font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
font-size: 10pt; /* Tamaño del texto */
color: #999999; /* Color del texto */
text-align: center;
position:fixed;
bottom:5px;
right:30px;
}
#expandirBotones{
background:#eee; /* Color de fondo del contenedor */
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0px 0px 6px #696969;
-moz-box-shadow: 0px 0px 6px #696969;
box-shadow: 0px 0px 6px #696969;
position:fixed;
bottom:40px;
right:30px;
}

Ahora antes de </head> pega este código; si ya lo tuvieras no hace falta ponerlo otra vez:

<script src='http://www.google.com/jsapi'></script>
< script>
google.load("prototype","1.7.0.0");
google.load("scriptaculous", "1.9.0");
< /script>

Luego pega antes de </body> lo siguiente:

<a href='javascript:Void(0)' onclick='Effect.toggle(&apos;expandirBotones&apos;,&apos;appear&apos;); return false' style='text-decoration:none;'><div id='botones-like'>&#161;Recomienda este blog!</div></a>
< table border='0' id='expandirBotones' style='display:none'>
< tr>
< td>&lt;iframe allowTransparency=&#39;true&#39; frameborder=&#39;0&#39; scrolling=&#39;no&#39; src=&#39;http://www.facebook.com/plugins/like.php?href=http://nombre-de-mi-blog.blogspot.com&amp;layout=box_count&amp;show_faces=false&amp;width=72&amp;height=63&amp;action=like&amp;font=tahoma&amp;colorscheme=light&#39; style=&#39;border:none; overflow:hidden; width:72px; height:63px&#39;&gt;&lt;/iframe&gt;</td>
< td><g:plusone href='http://nombre-de-mi-blog.blogspot.com' size='tall'/><script type='text/javascript'>
window.___gcfg = {lang: &#39;es&#39;};
(function() {
var po = document.createElement(&#39;script&#39;); po.type = &#39;text/javascript&#39;; po.async = true;
po.src = &#39;https://apis.google.com/js/plusone.js&#39;;
var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(po, s);
})();
< /script></td>
< td><a class='twitter-share-button' data-count='vertical' data-lang='es' data-text='Me ha gustado este blog, seguro a ti también te gustará:' data-url='http://nombre-de-mi-blog.blogspot.com' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></td>
< /tr>
< /table>

Cambia la dirección de tu blog donde se indica, así como el mensaje que aparecerá en Twitter y listo.

En color verde puedes cambiar algunos aspectos del diseño, básicamente será el color de fondo y de texto.

El botón para compartir el blog aparecerá en todas las entradas, si deseas que aparezca sólo en la portada tendrás que encerrar el último código con la condicional que le corresponde.

Recuerda que no compartirá las entradas del blog, sino el blog en general. Si buscas botones para compartir las entradas puedes ver algunas opciones en la sección de Facebook.

Si ya estuvieras usando el botón +1 de Google entonces no hará falta repetir el código del script, así que busca esta línea todas las veces que la tengas y elimínala:

<script src='http://apis.google.com/js/plusone.js' type='text/javascript'/>

Sólo dejaremos el script que hemos puesto en este código, excepto si has decido poner los botones sólo en la portada, si así fuera entonces no hará falta quitar esa línea salvo algunas excepciones.

ACTUALIZACIÓN: En Internet Explorer el botón de Facebook no se ve bien cuando se agrega de esta forma.

Read More

Instala botones simple para agregar en redes sociales

Artículo publicado en el blog Ciudad Blogger, uno de los sitios con más información sobre tecnología Blogger Ve la entrada en su blog original.

Estos son unos botones muy sencillos pero muy prácticos para que nuestros lectores puedan seguirnos en las diferentes redes sociales. No es nada del otro mundo, sólo son iconos agrupados en una lista que tienen un efecto pushbutton al pasar el cursor sobre ellos.

Los botones son tres: Google +, Facebook, y Twitter, pero se pueden agregar más.

Puedes verlos en esta misma entrada.

• Agrégame en tus círculos
• Hazte fan en Facebook
• Sígueme en Twitter

Para poner estos botones de las redes sociales en tu blog sólo entra en Diseño | Edición de HTML y antes de ]]></b:skin> agrega los siguientes estilos:

/* Botones de Redes Sociales
----------------------------------------------- */
.BotonesSociales li {
border:1px solid #6E6E6E !important; /* Color del borde */
padding:5px !important;
margin:0 5px 6px 5px;
background:#ccc; /* Color de fondo */
list-style:none;
}
.BotonesSociales li a {
font-weight:bold; /* Texto en negrita */
text-decoration:none;
color:#1C1C1C !important; /* Color del texto */
}
.BotonesSociales li a:hover {
color:#2E9AFE !important; /* Color del texto al pasar el cursor */
position:relative;
top:1px;
left:1px;
}
.BotonesSociales span {
padding-left:10px;
}
.BotonesSociales img {
vertical-align:middle;
border:0;
}

Ahora entra en Diseño | Elementos de la página | Añadir un gadget | HTML/Javascript, y ahí pega esto:

<ul class="BotonesSociales">
< li><a href="https://plus.google.com/u/0/usuario"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVc0_l-onP7NQZAkOz8C7UjdsJz3-8rxC4EfYrGCsTH04n03hRM13KlwC9LxP86FAZnS3mo84cc98oYaVsRu3Xud_6lSgUr-Uj6MK3xmRJGwpmsYRYHFwgztrvvxXNt38_A1zn0blq_6A/" /> <span>Agrégame en tus círculos</span></a></li>
< li><a href="http://www.facebook.com/usuario"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGjcZs1S0vQQ-fHHiahAreIlU55tlxznCwOcUSmWBs98lMfVrTnRIoCVNTMPBHsWgVnYciLDScmaWE6ooTtmbMOhAzaLY7lzD1J0HNI_QGgwMtADA7YAt2V1QBKr4t9AnltBPbv3m7HCQ/" /> <span>Hazte fan en Facebook</span></a></li>
< li><a href="http://twitter.com/usuario"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjImdffQa05S154iK8PVKk6TJO3QnxUVt7hhD1iUJbATSO9PTYj42goSEKy48abbnqLsdM8BBZMfH4KfrE3fNcsUOv-iIsoRl8UjU7IGrijts5qzq5yAZx2Q6yBVbC5FX5SnJqotxj-1VQ/" /> <span>Sígueme en Twitter</span></a></li>
< /ul>

Para finalizar cambia los nombres de usuario o ID donde se indica en color rojo y listo. Puedes modificar la apariencia cambiando los estilos en las anotaciones que están de color verde dentro del primer código.

Si quieres agrega más botones sólo añade antes de </ul> una línea como esta por cada botón extra cambiando la URL del enlace, la URL de la imagen y el texto:

<li><a href="URL del enlace"><img src="URL de la imagen" /> <span>Texto</span></a></li>

Y ahora sí, es todo.

Read More

Publica automáticamente en Twitter, Facebook y Google+ desde Blogger

Sácale partido a tu Blog, pon tus entradas y actualizaciones en Twitter automáticamente de una manera sencilla y rápida. Podrás incluso hacerlo con esta herramienta en otras redes sociales como Facebook o Linkedin.
El uso de las redes sociales es un valor incuestionable para la correcta promoción de un Blog. Desde Blogger siempre actualizamos la información de nuestro pequeño rincón de Internet en Google+.

Como herramienta de comunicación social, la aplicación de Google es excelente pero no la única. Tenemos Facebook y Twitter como las más utilizadas a parte de G+.

Con anterioridad hemos visto cómo publicar nuestras entradas automáticamente en Facebook o hasta meter un pequeño marco para Twitter en nuestro Blog. En este artículo paso a paso nos vamos a centrar en la publicación de nuestras entradas de una manera automática en Twitter o en cualquier suscriptor que admita RSS que podamos necesitar. Podremos publicar nuestras entradas virtualmente donde necesitemos.

Los Bloggers que utilizan Twitter suelen utilizarlo para publicar sus entradas. Resulta engorroso en muchas ocasiones salirse de Blogger para copiar el enlace correspondiente a nuestro Blog, seleccionar la foto adecuada, etc...

Sin necesidad de recurrir a programación de ninguna clase, podemos actualizar automáticamente en Twitter o en cualquier aplicación que admita datos con RSS, nuestros contenidos. ¿Quieres aprender cómo hacerlo de una manera sencilla y rápida?.

¿Cómo vamos a hacerlo?

Dado que queremos publicar en Twitter o en cualquier herramienta compatible con datos RSS nuestras entradas de Blogger automáticamente, emplearemos el Feed de nuestro Blog para llevarlo a cabo.

Tal como comentamos en el artículo sobre cómo publicar los últimos comentarios de nuestros usuarios en la página principal de nuestro Blog, un Feed, dejando a un lado los aspectos puramente técnicos, consiste en un documento electrónico que forma parte de tu Blog, mediante el cual podemos comunicar a nuestros suscriptores las últimas actualizaciones que hemos realizado en el mismo.

Los suscriptores pueden ser nuestros usuarios, otros blogs, herramientas de webmaster para actualizar mapas del sitio, aplicaciones de redes sociales... 

Si quieres ver el Feed de tu Blog por curiosidad, sólo tienes que poner en el navegador http://feeds.feedburner.com/NOMBRE_DE_TU_BLOG. Por ejemplo el de Diarios de la Nube es http://feeds.feedburner.com/diariosdelanube

Paso a paso:

1) Nos conectamos a la web http://twitterfeed.com/  escribiendo dicha URL en el navegador o haciendo "clic" en el enlace que te he proporcionado a tal efecto.

Página principal de la Web Twitterfeed, la cual utilizaremos para publicar automáticamente nuestras entradas en Twitter o en cualquier aplicación compatible con nuestro Feed.

2) Pulsa el botón "REGISTER NOW" para dar de alta tu cuenta en el servicio.

Página para darnos de alta en el servicio.

3) Rellena los datos solicitados: tu dirección de correo electrónico, la password que vas a utilizar con su correspondiente confirmación y rellena las letras del "Captcha" o imagen de reconocimiento "contra robots" que te son solicitadas. Llegados a este punto siempre debes leer los términos del contrato y la política de privacidad.

Rellena los datos solicitados. Lee la política de privacidad  y los términos del contrato.

4) Rellena el nombre que le desees poner a tu Feed. Te recomiendo que sea el del nombre de tu Blog para luego no perderte si lo vas a usar con más Feeds. En la caja de texto "BLOG URL or Feed URL" introduce la URL de tu Blog o la URL de tu Feed: http://feeds.feedburner.com/NOMBRE_DE_TU_BLOG. Por ejemplo el de Diarios de la Nube es http://feeds.feedburner.com/diariosdelanube.

5) Cuando hayas metido la URL de tu Feed o tu Blog, recuerda comprobar que no hay errores en la dirección que has proporcionado y que tu Feed está funcionando con normalidad. Pulsa el botón a la derecha de la caja de texto donde escribes tu Feed llamado "test rss feed" para comprobar que el resultado es correcto. Si todo va bien verás una pantalla como la que te muestro con todos los datos rellenos del feed de mi blog. Pulsa el botón de la parte inferior izquierda de la página "Continue to Step 2" para proseguir con el alta del servicio.

Tweetfeed relleno con los datos del feed del blog. Comprobación del Feed correcta.

6) Ahora estás en "STEP 2: Configure Publishing Services". Aquí simplemente indicarás en qué servicios quieres que se publiquen tus entradas automáticamente cuando las publiques en Blogger (gracias a la utilización de tu Feed).

Listo para seleccionar dónde quieres publicar tus entradas automáticamente.

7) Si haces "clic" por ejemplo sobre "Twitter", te abrirá una pantalla para que autorices a Twitterfeed a publicar tu Feed en tu perfil de Twitter.  Pulsa el botón "Authenticate Twitter".

8) Se te redireccionará a la página de autorización de aplicaciones de Twitter, indicándote qué necesidades va a solicitar a Tweeter Twitterfeed para poder publicar tus entradas.

Autorizando en nuestro perfil de Tweeter la publicación de entradas por medio de la aplicación externa Twitterfeed

9) Una vez autorizada Twitterfeed a publicar en tu perfil de Twitter las entradas de tu Blog, se te redirecciona de nuevo a la pantalla de creación de la cuenta twitterfeed. Aquí ya finalizas pulsando el botón "Create service" (debajo del formulario). Observa que aparecerá en el combo de la parte superior del formulario el nombre de tu perfil en Twitter.

Twitterfeed autorizado, ya sólo queda pulsar "Create service"

10) Volverás a la pantalla de elección de otras aplicaciones receptoras de feed. Aquí si quieres puedes hacer lo mismo para Facebook, Linkedin, APP.net, etc... Observa que en la parte superior en "Active Services" ya tienes listado el de tu feed con Twitter. Si ya has terminado pulsa "All Done!".

11) Si pulsas "All Done" dejas terminada la creación del Feed que actualizará automáticamente tus entradas en Twitter o en las aplicaciones que hayas rellenado en el paso 9.

¡Todo listo!, ya tienes preparado Twitter para recibir tus entradas cuando las actualices por medio del Feed de tu Blog.

¡Eso es todo!, ya tienes tu Twitter listo para recibir tus entradas automáticamente. Es importante que sepas que no es inmediato, puede tardar un rato en función de cuando Twitterfeed informa de actualizaciones a Twitter. Notarás que según publiques nuevas entradas se verán en Twitter.

 

-Artículo escrito por Miguel para www.diariosenlanube.com

 Link http://www.diariosdelanube.com/2013/05/publica-las-entradas-de-tu-blog.html#.Uq6WIaZ4LIU

Read More

Muestra tú último tweet en Blogger con una miniaplicación

Ahora que otros sistemas para mostrar tweets andan fallando porque a Twitter no le gustó demasiado eso de que terceras partes sacaran aplicaciones por doquier, aquí tenéis un código basado en la API de este servicio de graznidos, que os mostrará el último mensaje lanzado por un determinado usuario.

Tal y como viene redactado está listo para insertar como gadget en la barra lateral, aunque necesitáis al menos de un ancho de 335px para que se acomode bien. 

El código es algo largo porque permite bastantes más opciones que las que yo usé para este fin concreto, pero como casi todos los parámetros son autoexplicativos (CSS casi literal), las podréis aprovechar para hacer otras cosas.

Esto como siempre es sólo un ejemplo y cambiando el estilo podréis conseguir otros resultados distintos de este.

Flickr: Secuencia de fotos de andrew hall1bit.ly/Tk9HENabout 1 hour ago · reply · retweet · favorite

<style>
#ultimotweet { position:relative; width:335px; height:94px; margin:0 auto;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZiVvRavw_Lwe1tG547lQsdSAcu5Sk_BTw3uYd497xH9VxUTARxu7WLQPBBVXIDu9pJdiWK86mZ7dxhJBEb-x28kEPt6jIeo8CnlBx5UOPL4Ozs8-dT-z_h211bQQdsdXRKq4n-kQbu6A/s1600/twitter.png);}
.twtr-widget .twtr-tweet-wrap { position:absolute; top:10px; left:90px; overflow: hidden; padding:0px; margin:0; zoom:1; width:235px !important;}
.twtr-doc { font-size:12px;}
.twtr-hd, .twtr-user, .twtr-ft { display:none;}</style>
<div id="ultimotweet">
<script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 1,
interval: 5000,
width: 335,
height: 94,
theme: {
shell: {
background: 'transparent',
color: '#000'
},
tweets: {
background: 'transparent',
color: '#333',
links: '#999'
}
},
features: {
scrollbar: false,
loop: true,
live: true,
behavior: 'all'
}
}).render().setUser('oloman').start();
</script></div>

Imprescindible cambiar el usuario al final del código (en verde) por el vuestro o bien por el de otra cuenta cualquiera si eso es lo queréis.


Gracias por tu visita al Blogger Magazine, las últimas novedades de los mejores maestros bloggers.
-Autor: Oloblogger

Read More