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

Colocar el Fan Box de Facebook en Blogger

Una de las formas más sencillas de hacerlo gracias a V-Junkie

El Fan box es una aplicación de Facebook tipo botón “me gusta”, pero más grande y se muestra a los usuarios que se hicieron fan de tu Blog, para que lo pongas en la sidebar o donde desees.

Lo primero que tenemos que hacer es ir a Diseño > Elementos de la página > Añadir un elemento HTML/Javascripty pegamos el siguiente código:

<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/es_LA" type="text/javascript"></script><script type="text/javascript">FB.init("1b8f0f706c312c05f42224b5b3399f80");</script><fb:fan connections="8" width="270" profile_id="###############" stream=""></fb:fan>

Solamente cambiamos lo que está con el símbolo “#” por el ID de la página de Facebook. El ID son los 15 dígitos al final de la url, por ejemplo:

Ahora solamente guardamos los cambios y listo ya tendrán su Fan box en su Blog. Aquí un ejemplo de cómo quedaría:

Oculte las imágenes de los perfiles por razones de privacidad.

Enlace de V-Junkie

Read More

Poner el botón "Me gusta" de Facebook, en Blogger

Existen algunas maneras ya descritas en diferentes blogs sobre como poner el famoso botón "me gusta" de Facebooken los blogs que son publicados en la plataforma Blogger de Google.
Algunas de las entradas que encontrarás publicadas en otros sitios de la red están desactualizadas, otras siendo más actuales te proponen modos más o menos complejos de poner dicho botoncito en tu blog.

El problema está en que algunas de estas instrucciones te piden que modifiques tu plantilla en su código para incrustarlo ahí. Para algunos blogueros esta tarea puede resultar intimidante y hacer que desistan de hacerlo.

Bien, te voy a proponer un modo muy simple para que puedas colocar el botón Facebook en tu blog blogger.

Vayamos por pasos:

a) Conseguir el código del botón "me gusta"

Para esto sólo tienes que ir a la página de Facebook siguiendo este enlace: obtener un botón "me gusta" de Facebook

Ahi, o simplemente presionas en "get code" del Step 1 y de la ventana que aparezca copias el código que se muestra (para ser usado preferentemente en un gadget HTML/javascript en cualquier lugar de tu blog -mejor en alguna columna lateral o en el footer, ya que mostrará las caras de los usuarios), o para usar el botón DENTRO DE TUS ENTRADAS modificas algunos parámetros como el Ancho (width) y deselecciona (desmarca) "Show Faces" (Mostrar Caras) para evitar que aparezcan las caras de todos los que gustaron de tu entrada o blog, así lo haces más compacto y no ocupa excesivo e innecesario espacio al poner el botón dentro de tus entradas, luego pulsas "get code" y copias el código que salga. Guarda y pega en algún archivo de texto provisionalmente en tu computadora para usarlo en los siguientes pasos.

b) Pegar el código obtenido en tu blog

Ya tienes el código del botón "Me gusta" de Facebook que obtuviste en el paso anterior, ahora corresponde pegarlo en tu blog para que empiece a mostrarse.
Te dije que no modificaremos el código de tu plantilla blogger, sin embargo, si lo quieres intentar, una búsqueda en Google te permitirá encontrar las instrucciones para hacerlo, no es difícil, pero mi intención es que no te compliques con ello por si algo saliera mal.
Vamos pues, a poner el código en tu blog.

1.- En su propio espacio dentro de tu blog:

Una forma en extremo sencilla es que simplemente lo pegues dentro de un gadget html/javascript y que ubiques este en el lugar que prefieras dentro de tu blog, es decir: en Diseño ->Agregar gadget -> HTML/javascript. Pegas en su interior el código y luego guardar. A continuación desplazas y acomodas éste al lugar dentro de tu blog que gustes .

2.- Dentro de las entradas de tu blog:

Para tus nuevas entradas:

En Configuración -> Formato; encontrarás en la parte inferior una caja de texto que se llama "Plantilla de entrada", pega ahí el código que obtuviste para el botón "me gusta", y luego Guardar esos cambios. Desde este momento, y hasta que borres este código de este mismo lugar, siempre que escribas una nueva entrada, por defecto se insertará el botón Facebook en tus entradas. Verás que este código se inserta automáticamente cada vez que escribas nuevas entradas. Si prefieres que no aparezca en esa entrada en particular, simplemente deberás pulsar al estar Creando tu entrada, la pestaña "Edición de HTML", ahí podrás ver el código que se inserta, simplemente bórralo y ya.
Normalmente el botón se mostrará al final de tu entrada, si prefieres que aparezca al principio, comienza a escribir tu entrada bajo la pestaña "Edición de HTML" y escribe después del código del botón Facebook.
Si quieres insertar el botón Facebook en otra parte de tu entrada, bastará que una vez escrita, cambies la posición del código. Incluso podrás poner múltiples botones Facebook dentro de una entrada (quizás al principio y al final de ella), colocando dos o más veces el código del botón Facebook.

Para tus entradas antiguas:

Si no es un número muy grande de entradas las que tienes, simplemente edítalas, pegándoles el código de tu botón "me gusta". Si tienes muchas entradas, en ese caso te recomiendo que uses el método que introduce el código del botón en la plantilla de tu blog blogspot de Blogger.

En ambos casos, es decir ya sea en entradas nuevas o en entradas antiguas, debes pegar el código usando la pestaña "Edición de HTML", y no te preocupes si cuando vuelvas a la pestaña "Redactar" no se ve el código o el botón Facebook, ten la seguridad que cuando lo publiques estará ahí donde lo pusiste.

Para poner el botón Facebook en español

Por último, y para hacer que aparezca en español el botón, dentro del código del botón que obtuviste en la página de Facebook, reemplaza, si es el caso, el texto "en_US" por "es_ES" de lo contrario el botón se verá y mostrará leyendas en inglés.

Esperemos que en un futuro cercano exista dentro de Blogger la facultad de insertar este tipo de botones de una manera más simple, mientras tanto esta solución será válida y lo seguirá siendo incluso después.

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

Cómo instalar el Fan Box de Facebook oculto y deslizante

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.

Aunque Facebook Slide Likebox es una extensión de Joomla también podemos usarlo en Blogger.

Se trata de un gadget que muestra una pestaña en un extremo del blog, y al pasar el cursor sobre ella aparece el fanbox de Facebook con un efecto deslizante. Puedes verlo en esta misma entrada, se encuentra en el lado derecho de la ventana.

El gadget funciona con jQuery que es el que le da ese efecto deslizante, así que usaremos ese script, un poco de CSS y el FanBox de Facebook.

Lo primero es entrar en Diseño | Edición de HTML y antes de </head> pega el script:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>

< script type="text/javascript">
jQuery.noConflict();
jQuery(function (){
jQuery(".slide_likebox").hover(function(){
jQuery(".slide_likebox").stop(true, false).animate({right:"0"},"medium");
},function(){
jQuery(".slide_likebox").stop(true, false).animate({right:"-250"},"medium");
},500);
return false;
});
< /script>

Ahora antes de ]]></b:skin> agrega los estilos:

.slide_likebox {
float:right;
width:288px;
height:345px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2KPDtXBjd-X5csBo1_iE7ApMu3VHDGtfy-JoJo9cSOQfNwxW9TmBVPR0kfycTuLw1m5qQUV-Tz-OhhHMsBuFxaQg509TIcYqEN4DrBpKUZ6ala6tI-69QI5ekDaKXQOmziFQxkhxPAIE/) no-repeat !important;
display:block;
right:-250px;
padding:0;
position:fixed;
top: 130px;
z-index:1002;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
div.likeboxwrap {
margin-top:2px;
margin-left:-5px;
width:238px;
height:325px;
background-color:#fff;
overflow:hidden;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
div.likeboxwrap iframe {margin:-1px}

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

<div class="slide_likebox"> <div style="color: rgb(255, 255, 255); padding: 8px 5px 0pt 50px;"><span><div class='likeboxwrap'><iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fnombre-de-tu-pagina-de-facebook&amp;width=240&amp;colorscheme=light&amp;connections=15&amp;stream=false&amp;header=false&amp;height=350" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:240px; height:320px;" allowtransparency="true"></iframe></div></span></div></div>

Ese código contiene el Fanbox, así que cambia donde se indica el nombre de tu página, y listo.
No requiere muchos pasos ni mayor trabajo, a menos que quieras hacerle modificaciones.

La pestaña, así como el fondo del gadget es una imagen, así que si deseas cambiarle el color o tamaño tendrás que editar la imagen que se encuentra en el área de los estilos.
Lo ideal sería no modificar el tamaño, pero en caso de que desees hacerlo deberás -como dije- editar la imagen, cambiar las medidas tanto en los estilos como en el Fanbox, pero además mirar la entrada donde hablamos cómo agregar el fanbox sin borde, pues ese mismo procedimiento hemos usado aquí también, así que ahí podrás ver qué se necesita restar en las medidas del Fanbox.

Pero claro, eso es sólo si quieres modificar su tamaño, sino entonces no necesitarás nada más que los tres primeros pasos y podrás tener este Fanbox de Facebook, flotante y con efecto deslizante en tu blog.

Read More

11 Aplicaciones útiles recomendadas por Ciudad Blogger

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.

Que las páginas de Facebook ahora tengan el formato de timeline no significa que ya no podamos usar aplicaciones de terceros, la mayoría de ellas sigue funcionando pese a este cambio que no ha dejado a todos contentos.

En esta entrada veremos 11 aplicaciones para páginas de Facebook que pueden ayudarnos a tener mayor acercamiento y comunicación con nuestros fans. Son herramientas muy útiles para sacarle mayor provecho a esta red social.

Rumbletalk

Ya sabemos que el chat sólo se puede utilizar en los perfiles, sin embargo con Rumbletalk podemos tener un chat en la página de Facebook para que los fans y los administradores pueden platicar en tiempo real.

Este chat, a pesar de mostrar publicidad vale la pena por las grandes posibilidades que tiene para personalizarse, podemos cambiar el aspecto del chat, elegir si se aceptan invitados o sólo usuarios de Facebook, pausar el scroll de las conversaciones, filtrar palabras, etc. Es probablemente el mejor de su tipo.

Contact Me

Un formulario de contacto sencillo pero efectivo es el de Contact Me, que permite justamente eso, que los fans puedan ponerse en contacto con el administrador de la página de una forma simple y sin tantas complicaciones. Es muy fácil de usar y recomendable para páginas que desean ofrecer un medio de contacto cómodo para sus fans.

RSS Graffiti

¿Publicas muchas entradas al día? Entonces quizá no tengas tiempo de compartir las entradas de tu blog en Facebook. Con RSS Graffiti no hay excusas, esta aplicación sincroniza las actualizaciones por ti de forma automática. En Oloblogger hay un completo tutorial para configurarlo.

Twitter para Facebook

No todos los usuarios de Facebook usan Twitter, pero ese no es pretexto para que los fans no puedan enterarse de lo que publicas en esa red social. Twitter para Facebook es la aplicación oficial de Twitter que permite publicar en Facebook al mismo tiempo que lo haces en Twitter.

Twitter for Pages

A diferencia del anterior, Twitter for pages agrega una pestaña donde se muestran los últimos tweets realizados. Esta es una buena opción para quienes buscan hacerse de más seguidores de manera que desde esa pestaña puedan saber sobre qué temas son nuestros tweets y además aparece un botón para que nos puedan seguir.

Forum for Pages

Quién dice que no se puede tener un foro en Facebook. Con Forum for Pages puedes tener tu propio foro para que tus fans creen temas, participen e interactúen entre ellos. Una herramienta útil para aquellos que desean fomentar la participación de sus fans.

FAQ page

Los FAQs son las Preguntas Frecuentes (Frequently Asked Questions), y estas son indispensables si tienes una empresa y deseas añadir información extra, esa información que es la que tus clientes preguntan con mayor frecuencia. FAQ page lo que hace es añadir una pestaña con las preguntas y respuestas que tú elijas, para que tus fans puedan resolver sus dudas sin tener que consultarte.

YouTube for pages

¿Tienes un canal de YouTube que actualizas constantemente? Entonces esta aplicación es la indicada para ti. YouTube for pages es una aplicación que crea una pestaña que muestra los videos de tu canal de YouTube en tu página de Facebook. Esta es una buena forma para que tus fans vean los videos que subes y se suscriban a tu canal.

Google Plus Tab for Pages

Si tienes una página en Google+ esta es una aplicación que debes considerar; se trata de Google Plus Tab for Pages, una aplicación similar a la de Twitter for Pages, que crea una pestaña para mostrar tus últimas publicaciones hechas en Google+. Una buena opción para que otros usuarios nos agreguen a sus círculos.

LiveStream

Qué tal una video conferencia, o poder ofrecer a nuestros fans la transmisión de un evento exclusivo. Eso es posible con LiveStream, una aplicación también disponible para Facebook que nos permite transmitir video en vivo. Sin duda es una aplicación a la que se le puede sacar mucho jugo.

Static XFBML, Multiple Tab Builder

Aunque con el nuevo timeline las pestañas de bienvenida en Facebook ya no tienen mucho sentido, aun así pueden ser útiles cuando queremos añadir contenido externo a nuestra página de Facebook, ya que esta aplicación permite mostrar no sólo contenido diseñado en HTML, sino que también podemos usar iframes para mostrar nuestro blog, videos, galerías, y cualquier contenido que se nos pueda ocurrir. Static XFBML es una herramienta a la que le podemos dar muchos usos con un poco de creatividad.

Aunque todas estas aplicaciones son gratuitas, en su mayoría tienen algunas limitaciones ya que ofrecen versiones de pago. Aun así cumplen con su objetivo y pueden llegar a ser el complemento perfecto para nuestra página de Facebook.

¿Conoces alguna otra que te guste mucho?

Read More

Cómo agregar comentarios de Facebook en Blogger

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.

Uno de los temas más solicitados es cómo poner la caja de comentarios de Facebook en el blog, y es que a veces se vuelve más fácil comentar desde Facebook pues la mayoría está conectado a esa red social todo el tiempo, además no necesitamos ingresar con nuestros datos de Google para poder comentar en un blog que contenga este tipo de comentarios.

Este método lo vi en Vagabundia, donde explican cómo agregar el Plugin de comentarios de Facebook de manera que cada entrada tenga su propia caja de comentarios y sea independiente a las demás.

Antes de empezar asegúrate de tener los comentarios debajo de las entradas, pues el plugin lo pondremos en esa área así que es necesario tener los comentarios incrustados debajo de los posts.

Ahora sí, como primer paso entra en la Edición HTML del blog y marca la casilla Expandir plantillas de artilugios, luego busca la etiqueta:

<body>

Si usas una plantilla del Diseñador entonces la encontrarás como:

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

Debajo de cualquiera de ellas agrega esto:

<div id='fb-root'/>
< script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = &quot;//connect.facebook.net/es_LA/all.js#xfbml=1&quot;;
fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script>

Después busca esta parte:

</b:includable>
< b:includable id='status-message'>

Y justo arriba de ella pega esto:

<b:if cond='data:blog.url != data:blog.homepageUrl'>
< div id='comentariosFacebook'><div class='fb-comments' data-colorscheme='light' data-num-posts='5' data-width='500' expr:href='data:post.canonicalUrl'/></div>
< /b:if>

Con eso ya tendrás la caja de comentarios de Facebook en tus entradas (recuerda que debes ingresar a un post para poder verla).

La caja estará arriba de los comentarios de Blogger. Si quieres que esté debajo del formulario de comentarios entonces el código del plugin ponlo justo arriba de este código:

</div>
< b:if cond='data:post.includeAd'>

Dentro del código que añadimos veremos estos parámetros:

data-num-posts='5'
data-width='500'
data-colorscheme='light'

El primero es el número de comentarios que se mostrarán; el segundo el ancho del formulario; y el tercero el color del formulario, puedes cambiar light por dark

Hasta ahí ya tenemos el CommentBox de Facebook; si deseas personalizarlo un poco puedes colocar antes de ]]></b:skin> algunos estilos, por ejemplo:

#comentariosFacebook {
background:#F2F2F2; /* Color de fondo del contenedor */
width:520px; /* Ancho del contenedor */
padding:10px;
margin-top:0px; /* Cámbialo por -180px si lo has puesto debajo de los comentarios de Blogger */
}

Si quieres que cada vez que alguien haga un comentario te llegue una notificación de Facebook, y puedas moderar los comentarios, será necesario que crees una aplicación. Pero para ello es necesario tener verificada la cuenta de Facebook.

Si es así, entra a Facebook Developers y haz click en el botón Crear nueva aplicación.

Ahí escribe el nombre de la aplicación, acepta los términos y click en Continuar.

En la siguiente pantalla haz click en Sitio web, ahí escribe la URL de tu blog donde lo pondrás; también copia el número que está en App ID.

Ahora entra de nuevo en la Edición HTML de tu blog y pega antes de </head> esto:

<meta content='ID de USUARIO' property='fb:admins'/>
< meta content='ID de APLICACIÓN' property='fb:app_id'/>

En la ID de aplicación agrega la serie de números que copiaste. Y en ID de usuario agrega tu ID de Facebook, sino lo conoces ingresa a este enlace:

http://graph.facebook.com/usuario

Cambia donde se indica tu nombre de usuario y da click, ahí verás cuál es la ID de tu usuario de Facebook (Gracias a Siniestro por el tip).

Una vez hecho eso ingresa a una entrada para ver tu caja de comentarios y dale click en Configuración. Ahí verás varias opciones del plugin; en donde dice Moderadores, agrega tu nombre y guarda los cambios.

Una vez habiendo hecho todo lo anterior podrás moderar los comentarios y recibirás las notificaciones en tu cuenta de Facebook cada vez que alguien haga un comentario. Sino lo haces podrás seguir teniendo tu caja de comentarios de Facebook pero sin estas opciones.

Al final de la entrada he puesto una para que puedas probar el resultado, pero cualquier duda sobre el tema déjala en los comentarios de Blogger ;)

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

Colocar el botón Me gusta de Facebook en Blogger

En Facebook hay un plugin social en forma de botón llamado "me gusta" para las paginas y grupos que te agradan, pero ahora también ese botón lo podemos colocar en las entradas o posts de Blogger, así tus visitantes si les agrado o les sirvió tu información lo compartan en su perfil de Facebook y así tener más tráfico en tu Blog. 

Para colocarlo es muy fácil:

• Primero nos vamos a Diseño>Edición de HTML y expandimos los artilugios.
• Y buscamos el siguiente código:

<div class='post-footer-line post-footer-line-1'/>

• Debajo de esta línea pegamos lo siguiente:

<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url+ &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=450&amp;height=60&amp;action=like&amp;font=tahoma&amp;colorscheme=dark&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:20px'/>

Lo puedes añadir en cualquier parte pero se vería mejor debajo de cada entrada o post, ahora tenemos que cambiar algunos valores para que quede a nuestro gusto o dejarlo como esta, es opcional.

• layout: Estilo del botón. Valores: standard o button_count.

• show_faces: Se muestra la foto de avatar de la persona a la que le gusta el artículo. Valores: true o false.

• width: Anchura del iframe.

• height: Altura del iframe.

• action: Texto que se muestra en el botón. Valores like o recommend.

• font: Fuente de texto ya sea tahoma, arial, comic.

• colorscheme: Esquema de colores. Podemos utilizar light o dark.

Ya cuando lo modifiques a tu gusto, guardas y listo. Así quedaría el botón de Me Gusta:

Vía V-Junker

Read More

Cómo mostrar autómaticamente los posts de Blogger en Twitter

Socialize de Feedburner es una excelente herramienta para mostrar a nuestros seguidores de Twitter los posts que publicamos en nuestro Blog. De seguro han visto plugins, scripts y demás, pero la mejor, la que utilizo y nunca he tenido problemas es esta.

Para activar esta herramienta nos vamos a nuestra cuenta de Feedburner, seleccionamos el Feed que queremos utilizar en Twitter, de ahí le damos clic a Publicize, después a la opción de Socialize.

De ahí hay que seleccionar la opción de Add a Twitter account donde tenemos que iniciar sesión en Twitter, pero si ya lo están entonces les abrirá una ventana avisándoles si queremos conectar la cuenta con Feedburner, le damos permitir.

Una vez que veamos que nuestro usuario de Twitter estará seleccionado, solo falta darle unas modificaciones, como tipo de visualización de los títulos (solo el titulo, titulo y texto de la entrada, solo texto de la entrada), así como agregar el enlace hacia el post, texto adicional.

Mientras estemos modificando las opciones, nos mostrara una vista previa de los cambios hechos.

Una vez satisfechos por los cambios, activamos la herramienta y por ultimo le damos en guardar.

Ahora cada vez que publiquemos un post, se mostrara también ha nuestros seguidores de Twitter.

Si quieres recibir las actualizaciones del momento, te invito a suscribirte a nuestro Feed, al igual que nuestra cuenta deTwitter 

Enlace V-Junker

Read More