13 julio 2013

Seguidores de Facebook y Twitter en el lateral de tu Blog

Voy a mostrar como colocar los Seguidores de Twitter, Google+ y el Fanbox de facebook en el lateral del Blog.
Se muestra solo una pestaña fija a la derecha, y al pasar el cursor se abre mostrando el gadget de los seguidores. (el de Facebook solo funciona con páginas, no perfíl).


Para instalarlo en vuestros Blogs hay que seguir estos pasos:
1.- Ingresa en musicpaax.com/twitter, "generar código", autoriza a la aplicación y rellena el campo colocando tu nombre de usuario.

2.--Ir a Diseño-Añadir un gadget-Html/Javascript-Y en su interior colocamos lo siguiente:

<style>#face1{
position:fixed;
top:50px;
right:-250px;
float:right;
width:288px;
display:block;
padding:0;
z-index:1002;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
#google2 {
position:fixed;
top:210px;
right:-250px;
float:right;
width:288px;
display:block;
padding:0;
z-index:1004;
border-radius:10px;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
#twitter3 {
position:fixed;
top:370px;
right:-250px;
float:right;
width:288px;
display:block;
padding:0;
z-index:1004;
border-radius:10px;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
#face1:hover, #google2:hover, #twitter3:hover {
right:0px;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
div.likeboxwrap {
margin-top:-5px;
margin-left:-45px;
width:238px;
height:325px;
background-color:#fff;
overflow:hidden;
border-radius:10px;
}</style>

<div id='face1'>
<img src='http://3.bp.blogspot.com/-kDOYDN9J_vg/UbpSkqJ7prI/AAAAAAAAW_I/oZMAF0aUb8s/s1600/facebook.png' style='float:left;'/>
<div style='background: #3c5a98; height:325px; margin-left:38px;padding: 8px 5px 0pt 50px;border-radius: 0px 0px 0px 10px;'><span><div class='likeboxwrap'><iframe allowtransparency='true' frameborder='0' scrolling='no' src='http://www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/amorsevillista&width=240&colorscheme=light&connections=15&stream=false&header=false&height=350' style='border:none; overflow:hidden; width:240px; height:325px;'/></iframe>
</div></span></div></div>
<div id='google2'>
<img src='http://lh6.googleusercontent.com/-vQ5RYEg0TVU/UOCXFfh4mZI/AAAAAAAADz4/kWTI9_MxfPE/s159/goo_tab.png' style='float:left;'/>
<div style='background: #9A9FA8; height:325px; margin-left:38px;padding: 8px 5px 0pt 50px;border-radius: 0px 0px 0px 10px;'>
<span><div class='likeboxwrap' style="padding-left:20px; padding-top:15px; height:310px !important;">

<div class="g-plus" data-action="followers" data-height="300" data-href="https://plus.google.com/108543428426862782326" data-source="blogger:blog:followers" data-width="240">
</div>
<script type="text/javascript">
(function() {
window.___gcfg = {'lang': 'es'};
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>

</div>
</span></div>
</div>
<div id='twitter3'>
<img src='http://1.bp.blogspot.com/-welbyizfN9c/UbpSlLjzQnI/AAAAAAAAW_Y/gzSHutYnl6M/s1600/twitter.png' style='float:left;'/>
<div style='background: #00a0e8; height:325px; margin-left:38px;padding: 8px 5px 0pt 50px;border-radius: 0px 0px 0px 10px;'><span><div class='likeboxwrap'>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script>
<div class="twitter">
<iframe src="http://50.63.179.86/twitter/twitter.html?user=amorsevillista&no=17&h=325&t=light& scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:290px; height:325px;" allowtransparency="true"></iframe>
</div>
<div id="twitter-box"></div>
</div></span></div></div>

Cambiamos:
Para facebook: amorsevillista (por la vuestra)
Para Google+ : 108543428426862782326 por vuestra ID.
Para Twitter:  amorsevillista (por el vuestro)


Guardamos y Listo.



36 comentarios

Qué raro Antonio. Si me he metido antes.... Es verdad que no apareces en la lista de enlaces, ya lo he metido, pero qué raro....

y el de seguidores de blogger como se pondría? Gracias crack!

De momento parece difícil, lo he intentado de todos los medios, pero nada.

El 1 de Marzo se suprimió la página oficial de Google Friend Connect y de aquí se extraía la ID= del gadget de seguidores.
Al no tener o disponer de dicha ID, sería difícil colocar el gadget.

Saludos.

Toda explicación y ayuda para poner algún extra en un blog siempre viene bien.

Un saludo!

Tengo un problema antonio y es que no me sale el twiter ni el facebook y que yo sepa esta todo bien puesto.Gracias.

Tienes la segunda parte del código mál colocada, en Facebook tan solo debes colocar una vez el nombre de tu página y tienes la tuya y la mía, obsérvalo bién.

Aparte las direcciones de las nuevas páginas de Facebook comienzan con https:, en vez de http:, debes añadir la s.
Esto:https://www.facebook.com/Sevillista88
en lugar de esto:http://www.facebook.com/amorSevillista
Si aún tienes problemas, déjame en el formulario de contactos(arriba en menú) un email con tu contraseña de blogger y email, y del tirón te lo coloco.

Ya te lo he solucionado. A disfrutarlo ja ja.

Hola Antonio, tengo gregadas estas pestañas en mi blog desde hace un tiempo, sin haber tocado nada de golpe me ha desaparecido el contenido de la pestaña de twitter, solo muestra el espacio vacio de la pestaña.

Y esta bastante raro, imagino que es algo que estaba alojado en algun sitio y ha fallado, pero no se que puede ser, se te ocurre algo?

No soy mu ducho en estos temas, asi que te agradeceria explicaciones para tontos...=)

Mi blog, por si te sirve de algo verlo es: http://futbolbarsayotrashistorias.blogspot.com/

gracias por tu tiempo..y saludos

Weed, así es, desde la última actualización de Twitter el script que hacía funcionar los seguidores de Twitter, ha dejado de hacerlo.
Esperemos una pronta actualización de ello.

Saludos.

Antonio,

Algo asi me imaginaba, pasa con otros gadgets, me podrias indicar cual es exactamente el scrip, y busco otro para sustituirlo, es lo que hago otra veces, pero con el cambio del editor de blogger ahora me lio el triple y no me aclaro.

gracias por responder tan tapido, a pesar de que es un post viejo...=)

Weed, de momento no hay nada, llevo días investigando pero sin solución ninguna.
Hoy Olomán habla sobre algunas aplicaciones de Twitter, pero no he llegado a leer su entrada aún.

Espero que haya soluciones pronto. ! Un Saludo !

Hola Antonio, hice lo explicado y en Twitter me está saliendo otra cuenta la de un Matias, si me puedes decir que pasa, te agradezco.
Suerte y éxitos con Bacca

A mi me ocurrió lo mismo que ha Weed e Iván.
En primer lugar tenía instaladas las pestañas en mi blog y desde hace un tiempo dejó de funcionar la pestaña de Twitter como le pasó a Weed.
Hoy al ver tu actualización he ido directo a intentar arreglar la pestaña de Twitter, pero he comprobado que como le pasa a Iván me funciona bien con tu dirección twitter pero al poner la mía, me sale la cuenta de un tal Matías.

Gracias Antonio por el trabajo que haces.

Ya lo solucioné.
Lo que ocurre es que hay que registrarse (cada cual con su propia cuenta) en la web que se aloja el script " http://www.musicpaax.com/twitter "
para que te genere un código único para tu cuenta y pegarlo en el fanbox, sustituyendo el que nos has facilitado. Porque de lo contrario al cambiar únicamente el usuario te aparecerá siempre el Matías.
Al menos a mi me ha funcionado así.

Nuevamente, un saludo Antonio. Y gracias por todo.
Espero que no te moleste que haya compartido la solución al darme cuenta del fallo.

Efectivamente Iván, ya he corregido la entrada.

Jose, efectivamente es así, desde la última actualización de la Api de Twitter, hay que autorizar a cualquier aplicación y ese ha sido mi fallo.
Gracias por compartirlo.

Gracias lo estoy utilizando ahora en mi blog, muy buenoo

Antonio, cordial saludo, he creado un blog de pruebas y con respecto a este post en twitter me está saliendo otra cosa, te dejo el link para que lo veas http://blogpruebasemprendermlm.blogspot.com/
por favor me dices que está pasando,

Otra, suerte con Nacional en el amistoso. Gracias por haber hecho fuerza para que ganara la 12ava estrella, ahora vamos por la 13ava.

Iván, si generaste el código en musicpaax anteriormente, vuelve de nuevo a ESTA ENTRADA y empieza de nuevo.
Lo acabo de actualizar.

Listo Antonio, quedó muy bien, gracias por este truco, si le puedes agregar Google+ quedaría perfecto.

Mañana nos conversamos después del partido.

Suerte.

Antonio, cordial saludo, ya le añadí Google+, quedó perfecto, muchas gracias por este truco, ahora si estoy más contento, desde hace muchos días que lo quería así. Me concediste la petición de agregar esta red social, gracias infinitas.

Un abrazo.

Antonio, resulta que Twitter no está actualizando el número de seguidores, ya casi estoy en 800 y sigue mostrando los mismos 711 desde cuando lo implementé en mi blog emprendernegociosmultinivel.blogspot.com, que estará pasando?. Gracias por tu respuesta.

Iván, ya comenté que era una chapucilla para mostrar los seguidores, de todas formas puede ser que tarde en actualizarse.
Aún así, no creo que tenga importancia mostrar más o menos seguidores.

Antonio como estas?, tengo un problema con la caja de google+, no se me ven los seguidores, osea las caras, me queda la caja vacia..te dejo mi blog para que lo puedas corroborar
http://bibliadelprogramador.blogspot.com.ar/
Muchas gracias por todos los aportes sos un groso.
Sldos

Correcto Jose Luis, por lo que veo, está todo bien configurado, de todas formas coloca en el enlace mi url de google+ haber si salen los iconos, https://plus.google.com/u/0/+AmorSevillista-Antonio si se visualizan los míos es que debes esperar unos días porque tus seguidores son muy recientes.

puede ser que sea eso, recien hoy me hice la pagina y me agregaron, esperare unos dias..igualmente voy a probar con un ID.
Te hago una consulta a ver si sabes como hacerlo, ya que no lo encuentro en ningun lado "Subetiquetas", para diferenciar las etiquetas iguales de dos categorias diferentes y categorizarlas?.
Saludos

Jose Luis nunca he tratado con subetiquetas, pero te he encontrado esto, haber si te soluciona algo: Ver aquí

Buen Dia, al intalar esta aplicacion a mi blog no me sale las casillas de segir solo se mira este es mi sitio.

http://www.chepotetv.com/

probe con otro blog y si funciona que problema tendra mi blog?
gracias por tus aportes

tambien quisier saber como instalar la barra de herramientas fija que tiene tu web

gracias

Daniel, si colocas perfectamente las url de las redes no debes tener problemas.
!OJO! La url de Facebook no funciona con perfíl solo con páginas de Facebook.
La de Google+ debes colocar bien tu "ID" y en cuanto a Twitter debes primero generar código en Musicpaax.

Gracias por Responder. Todo lo hecho correctamente pero no logro que funcione en www.chepotetv.com ... pero en este blog " http://www.serieschepote.blogspot.com/ "funciona perfectamente. no se si sea problema de la plantilla o algo así.

Gracias

Daniel, posiblemente en el blog www.chepotetv.com te falte el script jquery:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script>

Cosa que en el otro blog lo tienes 3 veces y con una solo es suficiente.
Busca ajax/libs/jquery/ y verás que lo tienes repetido, elimina el primero 1.4.2 y el último 1.8.2

gracias amigo abia buscado mucho este codigo pero siempre el de twitter no funcionaba usted es un genio gracias amigo


Por favor, comente de acuerdo al tema del artículo.
Serán removidos todos los Comentarios con enlaces.
Si quieres recibir los nuevos comentarios marca "Avisarme"