Mostrando entradas con la etiqueta Facebook. Mostrar todas las entradas
Mostrando entradas con la etiqueta Facebook. Mostrar todas las entradas

martes, 26 de marzo de 2013

Pagar con un tweet contenido recibido del blog


Pay with a tweet



Pay with a tweet o "pague con un tweet" traducido al español, es un sistema de pago social, con el cual es posible ofrecer un producto a cambio de un tweet, aunque opcionalmente también funciona con una publicación en facebook.



Este servicio se inició hace algún tiempo y goza de cierta popularidad. Es utilizado en sitios web para la difusión de cualquier tipo de contendido que pueda ser descargado, como imágenes, e-books, música, y otros archivos. Esta misma idea ya ha sido materializada por la compañia Kellogg's, en donde era posible recibir una caja de sus productos a cambio de un tweet, en una tienda que fue creada para ese propósito.




Cómo funciona Pay with a tweet


Es simple, una vez que se haya enviado el tweet o publicación a Facebook, usando el botón que se facilita en la página, se recibe automáticamente el link de descarga del producto que se está promocionando.



Desde las opciones de configuración, puedes agregar el texto que llevará el tweet, limitar la cantidad de personas que pueden enviar un tweet, así como también establecer una fecha de vencimiento para tu campaña "pague con un tweet".






Quién puede usarlo



En general, cualquier persona que tenga un sitio web y que quiera difundir su contenido. Si eres por ejemplo diseñador gráfico y estás ofreciendo a la venta un set de iconos, podrías ofrecer una porción de éstos a cambio de un tweet. Igualmente puedes ofrecer un e-book de recetas de cocina, consejos de belleza, o cualquier otra cosa de valor que pueda ser descargada y que quieras promover.





Cómo obtener el botón de Pay with a tweet





 Es fácil, para obtenerlo solo sigue estos pasos:




  1. Vas a la página de Pay with a tweet.

  2. Haz click en el botón que dice "Crea un botón de pago".

  3. Rellena todos los campos del formulario, y selecciona las opciones que quieres que tenga el botón.

  4. Acepta los términos y condiciones (una vez que los leas), y obtén el código en "Crear mi botón".


Una vez conseguido el código del botón,  puedes agregarlo a la página donde mostrarás el contenido que vas a ofrecer para ser descargado.



Y listo, ya habrás obtenido un botón para empezar tu campaña de pague con un tweet ;)




Conclusiones 


Pay with a tweet representa un medio muy efectivo para promocionar contenido, donde las dos partes involucradas se ven beneficiadas.



Del mismo modo que puedes utilizar la dirección web del archivo para descargarse, una vez que se haga el tweet, podrías por ejemplo agregar la dirección de una página estática, donde tuvieses material exclusivo.

jueves, 31 de enero de 2013

Widget para que sigan y recomienden tu blog. Incluye: Botones de Twitter, Facebook, Insignia de Google+ y RSS

Creo que todos estamos de acuerdo en la importancia que tiene el tener en nuestro blog las vías que permitan estar en contacto con nuestros lectores/seguidores a través de las distintas redes sociales que usamos. Por ello, ponemos botones de Twitter, Facebook y Google+, de ese modo cualquier usuario puede acceder a nuestras páginas en dichas redes sociales, seguirnos o recomendarnos.



Pensado en eso y en alternativas efectivas para que puedas poner en tu blog, y así facilitarle a tus usuarios que sigan y/o recomienden tu contenido, vamos a integrar todos esos botones en una cajita contenedora para que todas las opciones estén siempre accesibles.



Esta cajita contendrá:

1. El botón de seguir de "Twitter para que te puedan seguirte desde ahí, sin tener que ingresar a tu página de Twitter".

2. El botón de Facebook, para que los usuarios recomienden tu blog.

3. La insignia standar de Google+, para que puedan agregarte a un círculo y hacer +1 a tu blog.

4. Agregaremos también la vía para que se suscriban al blog, pensando en que usas FeedBurner. También un icono para que puedan suscribirse usando algún agregador, de los muchos disponibles.



Tal y como la puedes ver a continuación:






Widget con botones redes sociales




Cómo agregar la cajita




Notas: Para la cajita tenga la apariencia que puedes ver, he hecho ajustes claves. En el caso de la insignia de Google+ por ejemplo, el ancho de ésta es mayor al ancho de la cajita contenedora, ésto para que no se vea una caja dentro de otra caja (la de la insignia dentro del contenedor).



El ancho de la cajita contenedora, es de 275 pixeles, por lo tanto, tu columna lateral deberá tener un ancho mayor a éste. Se puede reducir la cajita y hacer los ajustes para que todo se vea bien proporcionado, pero ésto lo recomiendo a usuarios que ya sepan algo de CSS y además hay que considerar que casi todos los botones e insignia, requieren un ancho mínimo para que se muestren con sus características.



Bien, pues dicho lo anterior, ahora veamos cómo agregaras la cajita, y como ya todo está integrado, tú sólo tendrás que agregar los códigos a tu blog, y editarlos con tus datos.




  1. Primero, agregas el CSS de la cajita, yendo a Plantilla > Personalizar > Avanzado > Añadir CSS. De ese modo, podrás hacer cambios y ver el resultado desde ahí. No olvides aplicar los cambios en Aplicar al blog.



    CSS


    /* Caja Redes */

    ul#caja-redes{

    width:275px

    padding:0;

    margin:0;

    list-style:none;

    background:#f7f7f7;

    border:1px solid #dcdcdc;

    overflow:hidden;

    }

    ul#caja-redes strong, li.c-rss{

    color:#848484;

    font-size:12px;

    }

    ul#caja-redes li{

    overflow:hidden;

    }

    li.cg-plus{

    height:108px;  

    padding-bottom:6px;     

    border-right:1px solid #dcdcdc;

    border-bottom:1px solid #dcdcdc;

    margin:0 -1px 0 -5px;

    }

    li.c-fb{

    border-bottom:1px solid #dcdcdc;

    padding:8px 3px 2px;

    margin:5px;

    }

    li.c-tw, li.c-mail{

    margin:5px;

    padding:6px 3px 0;

    }

    li.c-rss{

    float:left;

    margin:5px;

    padding:0 4px 4px;

    }

    a.c-rss {

    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw2c14hk33exbYBIkrR8WTVo1xAD22YjRp7y7q3L-_9Mvd3Ue_yYuKifRDpqTdErns3eOJ-eaquKFJEKSSGyFz7InTzUsQWJ_hbjPXE39Wf7pjoL_TX0bFqkWrLK6-yIoK5xm7qYfLyO0/s1600/rss1.png) no-repeat 25% 40%;

    display:inline;

    padding:0 0 1px 26px;

    color:#848484;

    }

    input[type="text"].campo, input[type="submit"].enviar {

    border:1px solid #dcdcdc;float:left;color:#848484;display:block; height:20px;font-size:11px;}

    input[type="text"].campo{text-indent:3px;width:145px; margin-right:-3px;}

    input[type="submit"].enviar {height:24px;cursor:pointer;text-shadow:0 1px 0 #fff;

    background:-webkit-linear-gradient(top,white,#d8d8d8); 

    background:-moz-linear-gradient(top,white,#d8d8d8); 

    background:-ms-linear-gradient(top,white,#d8d8d8); 

    background:-o-linear-gradient(top,white,#d8d8d8);}


  2. Luego, Vas a "Diseño" y seleccionas un gadget en la sección de la columna lateral, con la opción de HTML/Javascript, y pones el siguiente código que tendrás que editar con tus datos. Una vez editados, guarda los cambios.


  3. <ul id="caja-redes"><li class="c-fb"><iframe src="//www.facebook.com/plugins/like.php?locale=es_ES&amp;href=http%3A%2F%2Fwww.compartidisimo.com&amp;send=false&amp;layout=standard&amp;width=260&amp;show_faces=false&amp;font&amp;colorscheme=light&amp;action=like&amp;height=42" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:260px; height:42px;" allowtransparency="true"></iframe> </li> <li class="c-tw"><a href="https://twitter.com/compartidisimo" class="twitter-follow-button" data-dnt="true"  data-lang="es" data-dnt="true">Seguir a @compartidisimo</a> <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> </li> <li class="cg-plus"><div class="g-plus" data-width="286" data-href="//plus.google.com/109627432877953314897" data-rel="publisher"></div> <!-- Inserta esta etiqueta después de la última etiqueta de insignia. --> <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/plusone.js';     var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);   })(); </script> </li> <li class="c-mail"> <form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=compartidisimo&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'><strong>Compartidísimo directamente a tu e-mail</strong><p><input class='campo' name='email' placeholder='ingresa tu e-mail' type='text'/></p><input name='uri' type='hidden' value='compartidisimo'/><input name='loc' type='hidden' value='es_ES'/><input class='enviar' type='submit' value='Suscríbete'/></form> </li> <li class="c-rss">O suscríbete por otras vías:<a class="c-rss"  href="//feeds.feedburner.com/compartidisimo" title="Vía RSS" target="_blank">RSS</a></li> </ul>


      Edita los datos, de arriba hacia abajo tomando en cuenta que en:

      • www.compartidisimo.com pones la URL de tu blog, omitiendo el http:// pondrías por ejemplo miblog.blogspot.com, pensado que usas subdominio. 

      • compartidisimo ahí pones el nombre de usuario de Twittter.

      • Seguir a @compartidisimo  es el texto del botón de twitter.

      • 109627432877953314897 ahí pones el ID de tu página de Google+, o el del perfil. Para conseguir ese número tienes que ir a la página en Google+, y copiar la numeración que aparece en la barra de direcciones de tu navegador.

      • compartidisimo ahí pones la URI de FeedBurner. Puedes obtenerla accediendo a la página de FeedBurner,y luego haces click en el icono de RSS que está a un lado del nombre de tu blog, luego se abrirá una ventana con tus feeds. El nombre de la URI es el texto que aparece después de la barrita diagonal "/" en la barra de direcciones. 

      • Compartidísimo directamente a tu e-mail ese es el texto que aparece antes del campo para que ingresen el e-mail para la suscripción del blog.

      • compartidisimo otra vez pones la URI de FeedBurner.

      • O suscríbete por otras vías: este es el texto que esta antes del icono de RSS.

      • compartidisimo ahí va de nuevo la URI de FeedBurner.






    ¡Y listo!, ya habrás agregado una cajita con todos los elementos para que sigan y recomienden tu blog ;)






    Notas finales:


    • El código que esta de morado es de los scripts de Twitter y Google+ respectivamente (de arriba hacia abajo) Si ya usas algunos de esos elementos, no vuelvas a agregar el script, y asegúrate que esté colocado hacia abajo después del último botón.

    • En el caso de la sección de facebook, no vayas a disminuir el alto en el código (si usas el mismo ancho) , ya que hasta ahora, se muestran distintas leyendas si has o no ingresado a tu cuenta de Facebook.



    Seccion de Facebook



    Ah!, a propósito de facebook, hace mucho que quité el botón para que hagas me gusta al blog, agradezco a quienes compartieron el enlace sin que yo tuviese el botón.  Todos los me gusta se perdieron al hacer el cambio de dominio, así que si te gusta el blog, no olvides compartirlo en Facebook haciendo "Me gusta" ;)



    ¿Quieres ver la cajita en acción?, entonces echa un vistazo a la demostración.






    Importante: Si vas agregar la insignia usando el perfil, y no una página de Google+, necesitarás cambiar el alto del espacio reservado para la insignia, (ya que ahí no se muestran los avatares, y por lo tanto, ésta es menos alta). Lo haces en esta parte del CSS (del paso 1)


    li.cg-plus{

    height:108px


    ...

    Cambia 108px,  por 52px. Ten cuidado de no borrar el punto y coma al final.



    Enlaces de las páginas de las distintas redes sociales, con los botones oficiales

    Botón de Seguir de Twitter

    Botón de Me gusta de Facebook

    Insignia de Google+





    domingo, 6 de enero de 2013

    Fanbox para Facebook, Twitter, y Google Plus, flotantes y con efecto deslizante

    AVISO
    La API de Twitter cambió y ahora requiere autenticación para obtener los datos de los seguidores, por tal motivo éste y los demás fanbox para Twitter han dejado de funcionar. Si me entero de una solución u otra alternativa lo publicaré de inmediato.


    Hace algún tiempo vimos cómo poner el fanbox de Facebook flotante y con efecto deslizante. En esa ocasión usamos un plugin de jQuery que aunque es bueno tiene la desventaja que la versión gratuita sólo permite poner una pestaña nada más, además que quienes usan otras librerías tenían problemas de compatibilidad.

    En esta ocasión lo haremos sólo con CSS, de manera que no utilizaremos ni un solo sript y podremos mostrar no sólo una sino tres pestañas, el fanbox de Facebok, el fanbox de Google+, y el fanbox de Twitter.
    Puedes ver un ejemplo en esta misma entrada, lo verás del lado derecho de la ventana.

    Bien, para poner estos fanbox flotantes en el blog sólo tenemos que ir a Diseño | Añadir un gadget | HTML/Javascript y ahí pegar el siguiente código:
    <style>
    #flotante1 {
    position:fixed;
    top:100px;
    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;
    }
    #flotante2 {
    position:fixed;
    top:240px;
    right:-250px;
    float:right;
    width:288px;
    display:block;
    padding:0;
    z-index:1003;
    border-radius:10px;
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    -o-transition: all 1s;
    }
    #flotante3 {
    position:fixed;
    top:380px;
    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;
    }
    #flotante1:hover, #flotante2:hover, #flotante3: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>

    <!-- Primera pestaña -->
    <div id='flotante1'>
    <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOT-PJJOXUppKsnPtk8_vm4MtMkj43jlUoVkWTK49byVkmAiY-u50TN35Y_GyHrHJOPuOR-OvH4YBUYJgm-WWFscl8yOorEBrx5JIX7pHSdP17K331NfYeo5z-C4NlCIQePWE6k-kEnw4/' 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=http%3A%2F%2Fwww.facebook.com%2Fnombre-de-la-página-de-facebook&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>

    <!-- Segunda pestaña -->
    <div id='flotante2'>
    <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJJVTcwpfVVNTMFWshgrJujLBjoHPQ_LM7zhHUMQ1BXR_WjHa-e4peMKFZQQ2cU3HBO4eSbzCwnzm5uF42BYeHkChbGcHnqKJeGiz6oPwlmtfpSz9DZMCmqglKBVQt1T9YK4bJMYz-j3g/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/XXXXXXXXXXXXXX" 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>

    <!-- Tercera pestaña -->
    <div id='flotante3'>
    <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQ7PhcprVv8SXPIGA8nNPj4d4odLyhwRvxpoFamn3l-U8n7Rehx6w4EeCjH3MSko8FvWa17jm5Ucp2kg1jofOpopfbiJ879g34b2LOGxXzRFdQ3kVhZZ41Ae5kbR0BJZUkhMzPQ5aJfG4/' 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>
    <style>
    .follow_box_widget{overflow: hidden; padding-left: 5px; padding-right: 5px; padding-top: 5px; background-color: #fff transparent; position: relative; margin: auto;}
    .follow_box{font-size: 11px; font-family: "lucida grande",tahoma,verdana,arial,sans-serif; color: #333; line-height: 1.28; text-align: left; direction: ltr;}
    .follow_box .follow_top{padding: 5px 10px 0px 5px; margin-bottom: 8px; min-width: 230px; overflow: hidden;}
    .follow_box .profileimage{float: left; width: 40px; height: 40px; padding: 0px; margin: 0 10px 4px 0;}
    .follow_box img{border: 0;}
    .follow_box a{cursor: pointer; color: #3B5998; text-decoration: none;}
    .follow_box a:hover{text-decoration: underline;}
    .follow_action{padding: 0 0 0 8px;}
    .follow_box .follow_action .name{line-height: 15px; font-size: 14px; font-weight: bold;}
    .follow_box .follow_button{margin: 5px 0 0;}
    .follow_box .total{min-width: 230px; overflow: hidden; display: block;}
    .follow_box .connections{padding: 5px 0 4px 0px; border-top: solid 1px #D8DFEA; border-bottom: 1px solid #CCC; min-height: 150px;}
    .follow_box .connections .connections_grid{padding-top: 5px; overflow: hidden;}
    .follow_box .clearfix{zoom: 1;}
    .follow_box .connections .connections_grid .grid_item{float: left; margin:0px; margin-right: 5px; margin-bottom: 8px; overflow: hidden; width: 50px;}
    .follow_box .connections .connections_grid .grid_item .name{font-size: 9px; color: gray; overflow: hidden; padding-top: 2px; text-align: center; white-space: nowrap;}
    .follow_box .connections .connections_grid .grid_item img{width: 48px; height: 48px;}
    .follow_box .follow_widget_footer{ cursor: default; width: 100%; min-width: 230px; overflow: hidden;}
    .follow_box .footer_border{ margin-top: 5px;}
    .follow_box .uiImageBlock{line-height: 14px;}
    .follow_box .follow_widget_footer .footer_logo{float: left; margin-right: 5px;}
    .follow_box .follow_widget_footer .footer_text{cursor: default; color: #808080; font-size: 9px; float: left;}
    .follow_box .follow_widget_footer .footer_text a.footer_text_link{color: #808080;}
    .follow_box .titlecase{text-transform:capitalize;}
    </style>
    <script>
    /*
    * Twitter Follow Box jQuery Plugin
    * http://jobyj.in/twitter-follow-box-widget/
    * Copyright 2012, Joby Joseph
    * Free to use under the MIT license.
    * http://www.opensource.org/licenses/mit-license.php
    */
    (function(a){a.fn.followbox=function(b){function f(a,b){if(a>100)a=100;var c=new Array;for(var d=0;d<a;d++){c.push(b[d])}var e=c.join();return e}var c=a(this);var d="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV-y76crGcjrratuOI4lbVbBGwf2Js1b3lATBAnR30LCzcOAeFc0R-LNSepI3MMmvwHL0xbsC9j_LphssHXr7t9fO-8cVNpzt8YrTWSzhmGQ8DktjNkdgVha3f0q6jbF3AkYkf6gDOZ1I/";var e=a.extend({user:"jobysblog",width:292,height:252,theme:"light",border_color:"#AAA",bg_color:"#fff",bg_image:"",title_color:"#3B5998",total_count_color:"#333",follower_name_color:"#BBB"},b);a.ajax({url:"http://api.twitter.com/1/users/lookup.json?screen_name="+e.user+"&include_entities=true",dataType:"jsonp",success:function(b){var g=e.width-2;var h=e.height-2;var i=e.height-115;var j=parseInt(e.width/55);var k=parseInt(i/69)+1;var l=j*k;c.html('<div class="follow_box_main" style="border: 1px solid #bbb; width: '+g+"px; height: "+h+'px;"><div class="follow_box_widget"><div class="follow_box"><div><div class="follow_top clearfix"><a href="http://www.twitter.com/'+e.user+'" target="_blank"><img class="profileimage img" src="'+b[0].profile_image_url_https+'" alt="'+b[0].name+'"></a><div class="follow_action"><div class="name_block"><a href="http://www.twitter.com/'+e.user+'" target="_blank"><span class="name titlecase">'+b[0].name.toLowerCase()+"</span> @"+b[0].screen_name+'</a></div><div class="follow_button"><iframe allowtransparency="true" frameborder="0" scrolling="no" src="//platform.twitter.com/widgets/follow_button.html?screen_name='+e.user+'&show_count=false&show_screen_name=false&lang=es" style="width:100px; height:20px;"></iframe></div></div></div><div class="connections"><span class="total"><span class="follow_box_follower_count">'+b[0].followers_count+'</span> personas siguen a <b class="titlecase">'+b[0].name.toLowerCase()+'</b></span><div class="connections_grid clearfix" style="height:'+i+'px;"></div></div></div><div style="height: 23px"><div class="follow_widget_footer"><div class="footer_border"><div class="clearfix uiImageBlock"><a class="footer_logo" target="_blank" href="http://jobyj.in/twitter-follow-box-widget"><img src="'+d+'"/></a><div class="footer_text"><a class="footer_text_link" target="_blank" href="http://jobyj.in/twitter-follow-box-widget">Twitter Social Plugin</a></div></div></div></div></div></div></div></div>');if(e.theme=="dark"){c.find(".follow_box_main").addClass("dark")}c.find(".follow_box_follower_count").text(c.find(".follow_box_follower_count").text().replace(/(\d)(?=(\d\d\d)+(?!\d))/g,"$1,"));if(a.browser.msie&&!a.support.boxModel)a(".follow_box .connections").css("padding-bottom","14px");if(e.theme=="custom"){c.find(".follow_box_main").css({"border-color":e.border_color,"background-color":e.bg_color,"background-image":'url("'+e.bg_image+'")'});c.find(".follow_box a").css({color:e.title_color});c.find(".follow_box .total").css({color:e.total_count_color})}a.ajax({url:"https://api.twitter.com/1/followers/ids.json?cursor=-1&screen_name="+e.user,dataType:"jsonp",success:function(b){var d=f(l,b.ids);a.ajax({url:"https://api.twitter.com/1/users/lookup.json?user_id="+d+"&include_entities=true",dataType:"jsonp",success:function(b){for(var d=0;d<b.length;d++){var f=a.trim(b[d].name);var g=f.split(" ");var h='<div class="grid_item"><a href="http://twitter.com/'+b[d].screen_name+'" target="_blank"><img class="img" src="'+b[d].profile_image_url+'" alt=""><div class="name titlecase">'+g[0].toLowerCase()+"</div></a></div>";c.find(".connections_grid").append(h)}if(e.theme=="custom"){c.find(".connections .connections_grid .grid_item .name").css({color:e.follower_name_color})}}})}})}})}})(jQuery)
    </script>
    <script>
    $(document).ready(function(){
    $('#twitterfollowbox').followbox({
    'user':'usuarioTwitter',
    'height':'300',
    'width':'260',
    'theme':'custom',
    'border_color':'#ffffff',
    'bg_color':'#ffffff',
    'bg_image':'',
    'title_color':'#3B5998',
    'total_count_color':'#333333',
    'follower_name_color':'#BDBDBB'
    });
    });
    </script>
    <div id="twitterfollowbox" class="follow-box-container"> </div>

    </div></span></div></div>
    Agrega donde se indica el nombre de tu página de Facebook, también pon la ID de tu página de Google Plus en donde están las equis en rojo, y el nombre de tu usuario de Twitter también donde se indica en color rojo.

    El ID de tu página de Google Plus lo puedes ver ingresando a tu página, y al final de la URL aparecerán una serie de letras y números, ese es tu ID.

    En el caso del fanbox de Twitter hemos usado el fanbox para Twitter que vimos recientemente, pero puedes usar otro, o bien, quitar la pestaña, o sustituirla por otro contenido, pues al menos ese fanbox sí usa jQuery y puede causar incompatibilidad con otros scripts.

    En caso de que quieras cambiar alguna pestaña por otro tipo de contenido tendrás que localizar la URL de la imagen de la pestaña (color azul) y sustituirla por la que diseñes, luego quitar el contenido de la pestaña (según sea el caso) y en su lugar poner el código que desees.

    La ventaja de este método es que no usamos scripts para las pestañas, ni para esconderlas, ni para mostrarlas, ni para el efecto deslizante. La contra es que el efecto deslizante son transiciones con CSS por lo que los navegadores que no son modernos no podrán ver el efecto de deslizamiento. Fuera de esto último es un método que además de ser fácil de aplicar también es una buena opción para tener tus distintos fanbox agrupados y mostrándolos de una forma elegante y original.




    ACTUALIZACIÓN 1:
    Si el fanbox de Facebook te marca error puede ser porque aún no tienes una URL personalizada en tu página de Facebook, en esos casos deberás cambiar esta parte:
    http%3A%2F%2Fwww.facebook.com%2Fnombre-de-la-página-de-facebook
    Por esta:
    http%3A%2F%2Fwww.facebook.com%2Fpages%2Fnombre-de-la-página-de-facebook%2FXXXXXXXXXXXXXXX
    Ahí además de poner el nombre de tu página donde se indica deberás poner en las equis una serie de números que aparecen al final de la URL de tu página de Facebook.

    ACTUALIZACIÓN 2:
    Es preciso mencionar nuevamente que el fanbox de Twitter sí usa jQuery por lo que si ya tienes alguna versión de jQuery o si usas otra librería de scripts como Scriptaculous entonces no se verá, en esos casos habrá que eliminar la versión de jQuery que incluye el gadget y/o hacer unos cambios para que sea compatible con Scriptaculous. Para más información mira la entrada sobre el fanbox de Twitter.

    martes, 13 de noviembre de 2012

    Iconos de redes sociales arriba del blog que giran al pasar el cursor



    Constantemente me preguntan sobre la forma de poner arriba del blog iconos que enlacen a las redes sociales como tengo ahora mismo en esta plantilla, y es que tener iconos como estos a la vista incrementa la posibilidad de que los lectores puedan seguirnos por las distintas redes sociales ya que les dejamos el acceso a ellas de una forma más visible.
    Hay varias formas de hacerlo, nosotros lo haremos usando una lista desordenada que incluirá los iconos de Facebook, Twitter, Google+ y el feed del blog, y como un extra haremos que los iconos giren al pasar el cursor sobre ellos, como estos:


    Para poner estos íconos sociales en tu blog entra en la Edición HTML de la plantilla y agrega antes de ]]></b:skin> los estilos:
    /* Iconos de redes sociales
    ----------------------------------------------- */
    #social-iconos {
    width:100%;
    height:50px;
    margin-bottom:10px;
    display:block;
    clear:both;
    }
    .social-icons{display:table}
    .social-icons ul {
    list-style-image:none;
    list-style-position:outside;
    list-style-type:none;
    text-align:right;
    padding:5px 5px 0 0
    }
    .social-icons ul {
    padding:0;
    float:right;
    margin-bottom:0;
    }
    .social-icons li.social_icon {
    background:none !important;
    padding-left:0 !important;
    display:inline;
    float:left;
    margin-left:6px;
    }
    .social-icons li:hover {
    -moz-transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(-360deg);
    }

    Luego SIN expandir los artilugios busca esta línea:
    <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
    Arriba de ella agrega la estructura:
    <div class='social-icons' id='social-iconos'>
    <ul>
    <li class='social_icon'><a href='http://facebook.com/usuario'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgASLCD675KLthbEOMqRAqJs-6Ubrxh7oqi-eQZhUXW41tivnjwPYtU0qpem6Q5b42QdI28JkFvp70TnUr7ZfsomvzF_EwGV_GpL9Pl5CfRf24dkE83yfnBqV7H5YJlydOevS2atHIao98/s36/social-facebook.png'/></a></li>

    <li class='social_icon'><a href='http://twitter.com/#!/usuario'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9HnrK5i5Z3G9f3efWFAwpCD9rzkiQi73XBDqsgmZKQwwosaE7vXMDQBKZhDNYTEvMCoACW8a_ipWaHteCI-ZI5gLmwFKvrUlOnb7uuGTDoRn8zHBwr7TywyQpFpbVdpF3qcssF8oj0Vg/s36/social-twitter.png'/></a></li>

    <li class='social_icon'><a href='https://plus.google.com/XXXXXXXXXXXXXXXXXX/about'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1s_7_y6hBDyG4URVxGVJUG5dCoNbyCtdHdqHEiNpCEapV6mCPpvv9ZmkPzExR8i1yJ6we6cYZaod95vlRXPEW-mKDlHNhytmr_pOtT5H8YXLjpxBzCKRma0XFv0wqTPmOMrJ77B_rdp8/s36/social-googleplus.png'/></a></li>

    <li class='social_icon'><a href='http://nombre-de-mi-blog.com/feeds/posts/default'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5rTgdBLP8oK0K5uGo-Dgauf7E2VIfk0D2UDVd7B_E69tM3-bvUzVp6nwyS5A0hsQKVTU0Ev_6OhK0-Do5x0aGPgXEyKDYBptjBpYdijbxRhrjqA0X5B29qju8c1WZzDIxvQ9bSmIWyxY/s36/social-rss.png'/></a></li>

    </ul></div>
    Cambia lo que está en color rojo por tus datos y listo. El primero es tu usuario de Facebook, el segundo el de Twitter, el tercero deberás cambiar las X por el ID de tu perfil de Google+, y en el cuarto deberás poner el nombre de tu blog.

    Por supuesto que puedes añadir más iconos si lo deseas, sólo deberás agrega antes </ul></div> una línea como esta por cada icono extra que quieras:
    <li class='social_icon'><a href='URL del enlace'><img border='0' src='URL de la imagen'/></a></li>

    Aunque están pensados para mostrarse arriba del blog puedes ponerlos donde tú quieras, incluso puedes ponerlos en un elemento HTML/Javascript, eso quedará a elección de cada quien.

    El efecto que gira está hecho con CSS3 así que en navegadores antiguos este efecto no funcionará.
    Los iconos son de Iconfinder excepto el de Google+ que lo he diseñado yo, pero pueden sustituirse por los iconos de tu elección.


    domingo, 8 de julio de 2012

    Botones para compartir flotantes que se deslizan al bajar


    Hace poco veíamos una manera de poner debajo de los títulos botones para compartir en las redes sociales, de forma flotante, es decir, que éstos permanecían visibles aun cuando se bajara el scroll de la página.

    En esta ocasión veremos algo similar, digo similar porque aunque también se mantienen flotantes, éstos botones para compartir las entradas del blog bajan junto con el scroll de la página pero con un ligero efecto deslizante, además, éstos botones se encontrarán del lado izquierdo de las entradas. Incluiremos sólo los botones básicos: Facebook, Google+ y Twitter, sin embargo se pueden agregar más o cambiarlos por otros.

    Puedes ver el ejemplo aquí mismo en esta entrada, al bajar la página verás que los botones también bajan, y al subir de nuevo los botones regresarán a su lugar.

    Para poner estos botones flotantes para compartir usaremos un script muy corto de jQuery.
    Lo primero es ingresar a Plantilla | Edición de HTML, marcar la casilla Expandir plantillas de artilugios y pegar antes de </head> lo siguiente:
    <script src='//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js' type='text/javascript'/>
    <script type='text/javascript'>
    // <![CDATA[
    $(function() {
    var offset = $("#BotonesFlotantes").offset();
    var topPadding = 15;
    $(window).scroll(function() {
    if ($(window).scrollTop() > offset.top) {
    $("#BotonesFlotantes").stop().animate({
    marginTop: $(window).scrollTop() - offset.top + topPadding
    });
    } else {
    $("#BotonesFlotantes").stop().animate({
    marginTop: 0
    });
    };
    });
    });
    // ]]>
    </script>
    <style>
    #BotonesFlotantes {
    position: absolute;
    left: -100px; /* Distancia desde la izquierda */
    border: 1px solid #FB5F55; /* Borde del contenedor */
    border-right: 0px;
    padding: 10px;
    background-color: #FFF; /* Color de fondo del contenedor */
    z-index:9;
    }
    #BotonesFlotantes div {
    margin: 10px 0;
    }
    </style>
    Luego buscamos esta línea:
    <div class='post-header'>
    Y debajo de ella pega lo siguiente:
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div id='BotonesFlotantes'>
    <div><iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url+ &quot;&amp;layout=box_count&amp;show_faces=false&amp;width=73&amp;height=63&amp;action=like&amp;font=tahoma&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:73px; height:63px'/></div>

    <div><a class='twitter-share-button' data-count='vertical' data-lang='es' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></div>

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

    </div>
    </b:if>
    Guarda los cambios y listo.
    En el primer código hemos puesto tanto el script como los estilos ya que ambos son muy breves. Ahí verás en color verde a qué corresponde cada área.
    Donde dice /* Distancia desde la izquierda */ debes modificarlo hasta que quede a la distancia correcta según tu plantilla. Ahí mismo verás dónde cambiarle el borde y fondo del contenedor.

    Estos botones se verán sólo en las entradas individuales, de otra forma no funcionarían.
    Si quisieras agregar más botones entonces añádelos antes de </div> y cada uno encerrado entre <div> y </div>

    Recuerda que este gadget usa jQuery, por lo que si ya tienes la última versión de jQuery no hace falta repetir el script. Y si usas Mootools o Scriptaculous debes aplicar unos cambios al script.

    Sino te aparecieran, pon la /* Distancia desde la izquierda */ en 0px, si tampoco aparecen entonces el último código ponlo arriba de <data:post.body/>

    jueves, 21 de junio de 2012

    Facebook y las redirecciones por país de Blogger bloqueadas por supuesto SPAM

    Desde hace unos días algunos usuarios han reportado problemas al compartir las entradas en Facebook, aparece un mensaje que dice: "El contenido que intentas compartir incluye un enlace que fue bloqueado por ser spam o inseguro."



    Salvo los casos de que un enlace de verdad haya sido reportado por considerarse SPAM, parece que el problema está en las redirecciones de los dominios por país que Blogger implementó hace algún tiempo, y aunque curiosamente no sucede con todas las extensiones, parece que al menos con la extensión .MX sí pasa esto, por qué, quién sabe.

    Pero si ese es el problema entonces la solución es compartir las entradas con la URL canónica, es decir, la que termina en .com nada más, o bien, usar un script que evite la redirección, tal como Oloman ha explicado en esta entrada.

    Puedes ver un ejemplo poniendo en práctica lo siguiente, intenta compartir este enlace en Facebook:
    http://nombre-de-mi-blog.blogspot.mx/2011/10/blog-post.html

    Como verás, tiene la extensión .mx y al querer publicarlo aparece el mensaje de advertencia que dice que la URL ha sido bloqueda.
    Pero si compartes el mismo enlace sin la extensión del país entonces no ocurre lo mismo y se publica sin problema:
    http://nombre-de-mi-blog.blogspot.com/2011/10/blog-post.html

    Así que si ese fuera tu caso la solución como dije es, al compartir las entradas quitar la extensión del país, o mejor aun, usar un script que evite la redirección.

    domingo, 17 de junio de 2012

    Botones para compartir que se detienen y flotan al bajar la página


    Resulta cada vez es más importante que nuestras entradas sean valoradas y compartidas en las redes sociales, así que para muchos mantener visibles los botones para compartir es indispensable.
    Y una buena forma de mostrar siempre los botones es hacerlos flotantes, de manera que el lector pueda seguir viéndolos aun cuando baje el scroll de la página.

    Lo que hace este script de jQuery es que cuando un elemento, en este caso los botones, lleguen "al tope" de la página se quedarán flotando en una posición fija.
    Puedes ver aquí mismo el resultado, baja el scroll de la página, y los botones que están a continuación se quedarán flotando. Si vuelves a la parte de arriba entonces los botones regresarán a su lugar.

    • votar



    Esta barra de botones la pondremos debajo del título de las entradas, la barra incluye los botones de Facebook, Twitter, Google+, Bitácoras, y Pinterest.

    Lo primero es entrar en Plantilla | Edición de HTML y marcar la casilla Expandir plantillas de artilugios. Pegamos antes de </head> el script:
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

    <script type='text/javascript'>
    //<![CDATA[
    $(function() {
    var $flotarbotones = $("#botonesflotantes"),
    $window = $(window),
    offset = $flotarbotones.offset();
    $window.scroll(function() {
    if ($window.scrollTop() > offset.top) {
    $flotarbotones.css({'position' : 'fixed', 'width' : '650px', 'top' : '0px'});
    } else {
    $flotarbotones.css({'position' : 'absolute', 'top' : 'auto'});
    }
    });
    });
    //]]>
    </script>
    Ahora antes de ]]></b:skin> pegamos los estilos de la barra:
    #botonesflotantes {
    width: 650px; /* Ancho de la barra */
    height: 18px;
    padding: 8px 0 10px 0;
    position: absolute;
    background: #eee; /* Color de fondo */
    border: 1px solid #E6E6E6; /* Borde */
    border-radius:5px;
    z-index: 99;
    }
    .botonesflotantes {
    margin-left: 5px !important; /* Distancia de los botones desde la izquierda */
    }
    .botonesflotantes li {
    float: left;
    margin-left: 5px;
    list-style:none;
    }
    Por último, debajo de <div class='post-header'> agrega el siguiente código:
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div style='padding:5px 0 35px 0;clear:both;'>
    <div id='botonesflotantes'>
    <ul class='botonesflotantes'>

    <!-- Botón de Facebook -->
    <li><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=100&amp;height=25&amp;action=like&amp;font=tahoma&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:100px; height:25px;'/></li>

    <!-- Botón de Twitter -->
    <li><a class='twitter-share-button' data-lang='es' href='https://twitter.com/share'>Tweet</a><script src='//platform.twitter.com/widgets.js' type='text/javascript'/></li>

    <!-- Botón de Google+ -->
    <li><script src='http://apis.google.com/js/plusone.js' type='text/javascript'/><g:plusone expr:href='data:post.url' size='medium'/></li>

    <!-- Botón de Bitácoras -->
    <li><a expr:href='&quot;http://bitacoras.com/anotaciones/&quot; + data:post.url'><img alt='votar' expr:src='&quot;http://widgets.bitacoras.com/votar/mini/&quot; + data:post.url' style='vertical-align:middle;border:0;float:right; margin-left:0px;' title='Votar este artículo en Bitacoras.com'/></a></li>

    <!-- Botón de Pinterest -->
    <li><a class='pin-it-button' count-layout='horizontal' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;description=&quot; + data:post.snippet' style='margin:0 10px 5px 0;'>Pin It</a> <script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/></li>

    </ul>
    </div>
    </div>
    </b:if>
    Si quieres que los botones estén al final de la entrada entonces el código anterior pégalo antes o después de <div class='post-footer'>

    Verás que en el primer código aparece en color verde el ancho de la barra, y también aparece en los estilos, si cambias el tamaño deberás hacerlo en ambos. Toma en cuenta que son varios botones, por lo que no se recomienda hacerla más angosta, de lo contrario algunos botones se bajarán. En caso de que decidas hacerla más angosta entonces quizá sea necesario eliminar algún botón.

    En el último código verás a cuál botón corresponde cada código, por si quisieras quitar alguno de ellos.

    Si la barra quedara encimada al texto de las entradas entonces cambia el 35px por un valor más alto.
    Los botones se verán únicamente al ingresar a las entradas individuales, de otra forma los botones se encimarían unos con otros al bajar la página.

    miércoles, 6 de junio de 2012

    Mostrar algunos datos de Facebook usando jQuery

    La librería jQuery posee una serie de funciones simples que facilitan la forma en que podemos acceder a los datos de un feed en forma Json. La función getJSON es uno de esos métodos simplificados donde, en principio, bastaría colocar la dirección URL a leer.
    $.getJSON('URL_A_LEER', function(variable) {
    // aca hacemos algo con los datos
    });
    Usando esa función, podríamos leer cierta información que nos da Facebook, por ejemplo, algunos datos relativos a una página web o a las entradas de Blogger tales como la cantidad de Me Gusta que tiene, las veces que fue compartida, etc.

    Esos datos son accesibles en esta dirección:

    http://api.ak.facebook.com/restserver.php?v=1.0&method=links.getStats&urls=URL_PAGINA&format=json

    así que podemos crear un script que la lea y luego, interpretar lso datos para mostrarlos en un DIV cualquiera que agregamos ahí donde quisiéramos verlo:
    <div id="FBejemplo"></div>
    y lluego, debajo de eso, podríamos poner el script para leer los datos de la página donde nos encontremos:
    <script>
    var jsonUrl = "http://api.ak.facebook.com/restserver.php?v=1.0&method=links.getStats&urls="+location.href+"&format=json&callback=?";
    $.getJSON(jsonUrl, function(data) {
    // armamos la salida de esos datos
    var salida = "Me Gusta: " + data[0].like_count); // la cantidad de Me Gusta de esa página
    salida+ = "Comentarios: " + data[0].comment_count); // la cantidad de comentarios de Facebook
    salida+ = "Compartido: " + data[0].share_count); // la cantidad de veces que fue compartida
    // y la escribimos
    $("#FBejemplo").html(salida);
    });
    </script>
    Hay otros datos accesibles tales como data[0].click_count, data[0].commentsbox_count y un dato general que suma todas las interacciones: data[0].total_count

    No hace falta que los datos sean de la página que estamos viendo, podrían ser de cualquier otra, por ejemplo, acá se muestra lo que devuelve Facebook cuando coloco la URL del home:

    miércoles, 16 de mayo de 2012

    Crear un gadget de Facebook usando Json (3)

    Voy a insistir en que la forma de mostrar los datos que leemos de un feed usando Json es subjetiva y podemos hacer casi cualquier cosa, sólo hay que saber cuáles son y aprender la forma de manipularlos, armando la salida de modo personal (más información: 1, 2)

    En este último ejemplo, vamos a tratar de diferenciar el contenido y mostrarlo de distinto ¿Qué contenido? Por ejemplo trataremos a las imágenes que subimos a Facebook de modo diferenciado, mostrándolas más grandes o con un formato especial ¿Cómo podríamos hacer esto? leyendo el HTML y verificando la dirección URL de esas imágenes; una posibilidad:
    var externo = elHtml.indexOf("safe_image.php");
    La variable externo tendrá un valor mayor o igual a cero si dentro del contenido se encuentra ese texto que indica que la imagen no la hemos subido nosotros sino que es externa, ya sea porque lo que compartimos es un enlace o un video así que, si se trata de ese tipo de entradas, armaré un DIV de un tipo; por el contrario, si no se encuentra ese texto y hay una imagen, esa imagen la hemos subido nosotros y la URL es algo así:
    https://fbcdn-photos-a.akamaihd.net/......./xxxxxxx_s.jpg
    Donde el _s final indica que el tamaño de la imagen es pequeño (small) y es el dato que contiene el feed; mide 130 pixeles de ancho; si cambio _s por _n vería la imagen original con su tamaño normal, lo mismo si pasaría si usara _b..

    Podría usar esas pero son muy grandes así que elegiré una intermedia y cambiare _s por _a que me dará una imagen de 180 pixeles de ancho.

    ¿Cómo haría eso? Por ejemplo, de este modo:
    laImagen = laImagen.replace("_s.jpg","_a.jpg")
    No son las únicas alternativas; _t es una miniatura de 75 pixeles, _o nos devuelve una imagen de 540 pixeles y _q o _x también tienen 180 pixeles ¿Por qué? No sé. Habrá que preguntarles a ellos.

    Ahora que tengo todos los pedazos y un lio bárbaro en al cabeza, me dedico a armar la función y ver qué sale:
    <,script type='text/javascript'>,
    //<,![CDATA[

    function extraer_imagen(htmltag) {
    var s, a, b, c, d;
    var imagen = "";
    s = htmltag;
    a = s.indexOf("<img");
    b = s.indexOf("src=\"",a);
    c = s.indexOf("\"",b+5);
    d = s.substr(b+5,c-b-5);
    if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) {
    imagen = d;
    }
    return imagen;
    }

    function feedFacebook(json) {
    var entry, mensaje, enlace, elResumen, elHtml, externo, laImagen;
    var salida = "";
    for (var i = 0; i < json.responseData.feed.entries.length; i++) {
    entry = json.responseData.feed.entries[i];

    // los datos del feed
    mensaje = entry.title;
    enlace = entry.link;
    elResumen = entry.contentSnippet;
    elHtml = entry.content;

    // los datos que verifico
    externo = elHtml.indexOf("safe_image.php");
    laImagen = extraer_imagen(elHtml);

    // y voy armando la salida
    salida += "<div class='cadaitem'>";

    if(externo!=-1) {

    // enlaces
    salida += "<div class='titulo'><a href='" + enlace + "' target='_blank' >" + mensaje + "</a></div>";
    salida += "<div class='contenido enlace'>";
    salida += "<img src='" + laImagen + "'/>";
    salida += "<p>" + elResumen + "</p>";
    salida += "</div>";
    salida += "<div class='clear'></div>";

    } else {

    // imágenes
    salida += "<div class='contenido imagen'>";
    if(laImagen) {
    laImagen = laImagen.replace("_s.jpg","_a.jpg");
    salida += "<a href='" + enlace + "' target='_blank'><img src='" + laImagen + "'/></a>";
    if(mensaje) { salida += "<span>" + mensaje + "</span>"; }
    if(elResumen) { salida += "<span>" + elResumen + "</span>"; }

    }
    salida += "</div>";

    }
    salida += "</div>";

    }
    document.getElementById('divFACEpage').innerHTML=salida;
    }

    //]]>,
    <,/script>,
    El resto es un poco de CSS:
    <,style>,
    #divFACEpage {
    margin: 0 auto;
    width: 250px;
    }
    .cadaitem {
    background-color: #FFF;
    font-family: Tahoma;
    font-size: 13px;
    margin-bottom: 5px;
    }
    .cadaitem .clear {
    clear:both;
    padding:10px;
    }
    .cadaitem .contenido.enlace {
    width:250px;
    }
    .cadaitem .titulo {
    overflow: hidden;
    padding: 10px;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
    }
    .cadaitem .titulo a {
    color:DeepSkyBlue;
    font-weight:bold;
    }
    .cadaitem .contenido.enlace img {
    float: left;
    max-width: 100px;
    padding: 0 10px;
    }
    .cadaitem .contenido.enlace p {
    color: #666;
    float: right;
    font-size: 11px;
    overflow: hidden;
    padding-right: 10px;
    width: 120px;
    word-wrap: break-word;
    }
    .cadaitem .contenido.imagen {
    position:relative;
    }
    .cadaitem .contenido.imagen img {
    display: block;
    margin: 0 auto;
    padding: 20px 0;
    }
    .cadaitem .contenido.imagen:hover span {
    display: block;
    }
    .cadaitem .contenido.imagen span {
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    color: #FFF;
    display: none;
    font-size: 11px;
    margin: 0 20px;
    padding: 10px;
    position: absolute;
    text-align: center;
    top:30%;
    width: 200px;
    }
    <,/style>,

    martes, 15 de mayo de 2012

    Crear un gadget de Facebook usando Json (2)

    En la primera parte hablaba de crear un gadget a partir de los datos de un feed de Facebook pero ¿cómo se diseña el gadget? Tal como se diseña un post, usando HTML y haciendo que sea la función el que escriba esos códigos. Para esto no hay un solo método, hay muchas formas; yo uso siempre el mismo, creo una variable de texto, voy "sumando" las distintas etiquetas y cuando termina el bucle, la "escribo" en el DIV.

    El resto, es subjetivo; me imagino un gadget que colocaré en la sidebar así que será "angosto" y estaría más interesado en mostrar imágenes que en mostrar textos así que, para complicarme la vida, debería "detectar" esas imágenes y separarlas de los textos. Usaré sólo cuatro datos: entry.title, entry.link, entry.content y entry.contentSnippet; no me meteré con la fecha que requiere códigos más largos para formatearlas de manera "razonable" y quisiera mantener todo lo más simple posible para concentrarme en lo que realmente me parece importante aunque, como dije, todo esto es absolutamente subjetivo y esa es justamente lo verdaderamente interesante de Json, que con los mismos datos, podemos armar cosas completamente distintas.

    ¿Por que no pensar primero el modelo que quisiera que se viera escribiendo el HTML tal como haría en una entrada? Un ejemplo:
    <div class='cadaitem'>
    <div class='titulo'>
    <a href='URL_entrada' target='_blank' > ... el texto del mensaje ... </a>
    </div>
    <div class='contenido'>
    <img src='URL_imagen'/>
    <p> ... aquí pondría el resumen ... <p>
    </div>
    </div>
    Bastaría establecer las reglas de estilo CSS para cada cosa u ordenarlas de cualquier otro modo y luego, usar eso en la función, agregando los datos correspondientes:
    salida += "<div class='cadaitem'>";
    salida += "<div class='titulo'>";
    salida += "<a href='"+enlace+"' target='_blank' >"+mensaje+"</a>";
    salida += "</div>";
    salida += "<div class='contenido'>";
    salida += "<img src='"+laImagen+"'/>";
    salida += "<p>"+elResumen+"<p>";
    salida += "</div>";
    salida += "</div>";
    Pero ... me falta laImagen; debo "encontrarla" dentro del contenido (entry.content) y para eso, usaré una función extra que es la misma que usamos en Blogger para detectar al primera imagen de las entradas:
    function extraer_imagen(htmltag) {
    var s, a, b, c, d;
    var imagen = "";
    s = htmltag;
    a = s.indexOf("<img");
    b = s.indexOf("src=\"",a);
    c = s.indexOf("\"",b+5);
    d = s.substr(b+5,c-b-5);
    if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) {
    imagen = d;
    }
    return imagen;
    }
    Así que en mi función, la variable laImagen será:
    var elHtml = entry.content;
    var laImagen = extraer_imagen(elHtml);
    o directamente:
    laImagen = extraer_imagen(entry.content);

    domingo, 13 de mayo de 2012

    Crear un gadget de Facebook usando Json (1)

    Muchas veces hablamos de los feeds de un sitio web ¿que son? En realidad, nada especial, son, como todo lo que vemos en internet, archivos de alguna clase, una serie de "números" ordenados de alguna forma que los navegadores interpretan y nos muestran de acuerdo a ciertas reglas universales; el resultado, será una imagen, un video, un texto o ... un feed.

    Ese "orden" en que está escrito, define su contenido. Un feed es un archivo de tipo XML, es decir, un texto con etiquetas especiales que es generado por el servidor (Blogger, YouTube, Twitter o cualquier otro) y que contiene los datos de nuestro blog o de un sitio determinado; bien podría decirse que es un "resumen" del contenido de un sitio que nos permite acceder a esa información y visualizarla directamente en el navegador o, lo que es más común, utilizando algún software especial.

    Si colocamos la URL de un feed en la mayoría de los navegadores, estos lo interpretarán y mostrarán su contenido como si fuera una página web minimizada. Chrome, por el contrario, mostrará su código, es decir, el texto del archivo cosa que también podemos ver en todos los otros, si les solicitamos ver el código fuente de la pagina.

    Si hacemos eso, veremos una serie de etiquetas que dependerán del formato de ese archivo de feeds ya que hay varios sistemas (Atom, RSS2) algunos más simples y otros mucho más complejos pero, lo básico es siempre similar. Cada entrada se encuentra contenida entre las etiquetas <item> </item> o <entry> </entry> dentro de la cual hay otras con el título, la fecha, el autor, etc.
    <entry>
    <title> xxxxxxx </title>
    <link> xxxxxxx </link>
    <published> xxxxxxx </published>
    <content> xxxxxxx </content>
    </entry>
    Todo es teoria ya que, en realidad, si bien hay una cierta normalización de esos datos, cada sistema puede (y lo hace) agregar etiquetas o atributos especiales; por eso es que muchos de ellos incluyen documentación extra donde nos dicen cuáles son los datos y cómo debemos interpretarlos. Para eso, para interpretarlos, se usan diferentes lenguajes; en Blogger, las cosas no son tan fáciles ya que sólo podemos usar JavaScript que tiene sus limitaciones y es ahí donde entra a jugar el misterioso Json que es una palabrita que vemos constantemente y a través de la cual se arman la gran mayoría de los gadgets que utilizamos.

    En este caso, podríamos decir que Json que no es otra cosa que un ese mismo archivo de feeds, "re-armado" con un formato diferente adaptado, justamente, para que podamos leerlo con JavaScript. Cuando solicitamos que se cargue un archivo de feeds en formato Json, lo que obenemos es una serie de variables ordenadas con el contenido y leerlas es fácil, el problema está en "saber" cuales son esas variables ya que pueden ser muy variadas.

    Una herramienta que ayuda en este asunto es el llamado Google Ajax Feed API ya que nos simplifica la tarea, interpretando los datos de los distintos feeds y enviándonos datos que tienen siempre la misma estructura por lo tanto, podemos leer cualquier feed y mostrarlo como se nos de la gana.

    Vamos a ver un ejemplo concreto, intentaremos mostrar nuestra página de Facebook ya que esta, dispone de un feed ¿cuál es? algo como esto:
    https://www.facebook.com/feeds/page.php?format=atom10&id=XXXXXXXXXX
    donde XXXXXXXXXX es el ID de nuestra página que es el que nos muestra el navegador cuando entramos en ella:
    https://www.facebook.com/pages/Vagabundia/215401628483231
    https://www.facebook.com/pages/Gem-BLOG/395197195477
    ¿No tiene un ID y sólo tiene un nombre? busquen el emlace a Notificaciones que se ve en la parte superior y copien el enlace; el ID son los números que siguen a id=:
    http://www.facebook.com/Infinitos.Magazine
    http://www.facebook.com/notifications?id=151205601565278
    Vamos al grano. Necesitamos el script que tiene dos partes, la llamada al API de Google y una función que interpretará y mostrará los datos en un DIV con cierto ID. La función la ponemos en cualquier parte, por ejemplo, antes de </head>:
    <,script type='text/javascript'>,
    //<,![CDATA[
    function feedFacebook(json) {
    var entry, mensaje, enlace, elResumen;
    var salida = "";
    for (var i = 0; i < json.responseData.feed.entries.length; i++) {
    entry = json.responseData.feed.entries[i];
    var mensaje = entry.title;
    var enlace = entry.link;
    var elResumen = entry.contentSnippet;
    salida += "<p>" ;
    salida += mensaje + "<br/>";
    salida += enlace + "<br/>";
    salida += elResumen + "<br/>";
    salida += "</p>";
    }
    document.getElementById('divFACEpage').innerHTML=salida;
    }
    //]]>,
    <,/script>,
    Luego, donde queramos que se muestre el resultado, un DIV vacío:
    <div id="divFACEpage"></div>
    Y debajo, el script que llama al API de Google:
    <,script type='text/javascript'>,
    //<,![CDATA[
    var URLFEED = "https://www.facebook.com/feeds/page.php?format=atom10&id=XXXXXXXXXX";
    var NUMFEED = 5;
    var archivofeeds = "http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num="+NUMFEED+"&output=json&q="+encodeURIComponent(URLFEED)+"&callback=feedFacebook";
    var nuevo = document.createElement('script');
    nuevo.setAttribute('type', 'text/javascript');
    nuevo.setAttribute('src', archivofeeds);
    document.getElementsByTagName('head')[0].appendChild(nuevo);
    //]]>,
    <,/script>,
    ¿Qué hace esta última? cargar el script con el API de Google indicándole la dirección del feed (URLFEED), la cantidad de entradas que queremos leer (NUMFEED) y el nombre de la función que interpretará esos datos (callback=feedFacebook)

    Justamente, es esta función lo que hará la diferencia ya que, los datos serán siempre los mismos y lo que luego variará es la forma en que los mostremos. La función es un bucle que va leyendo item por item guardándolos en una variable a la que llamamos entry; como esos datos son un array, accedemos a ellos con el nombre de la variable, un punto y el nombre del dato en si mismo. El API nos dará los siguiente datos:

    entry.title es el título del item (el título de una entrada de un blog o, en este caso, el mensaje que hayamos agregado) y corresponde al contenido de la etiqueta <title>
    entry.link es la dirección URL de ese item y corresponde al contenido de la etiqueta <link>
    entry.content es el contenido HTML de la entrada, etiquetas <content> <summary> o <description>
    entry.contentSnippet es un resumen de ese mismo contenido, en formato de texto plano, es decir, sin etiquetas HTML
    entry.publishedDate es la fecha en un formato similar a este "20 May 2012 10:20:30 -0300"
    entry.author es el nombre del autor y en este ejemplo no existe
    entry.description es un texto adicional o subtítulo que tampoco existe
    entry.categories es la lista de etiquetas que tampoco existe

    En este ejemplo, simplemente guardamos algunos de esos datos en otras variables y los mostramos así nomás, uno debajo del otro; el mensaje, la URL y el resumen:

    Obviamente, nada especial pero, en realidad, eso es todo lo que necesitamos; sabiendo cuales son los datos, podemos armar nuestros propios gadgets, diseñando el formato en que quisiéramos mostrarlos.

    domingo, 15 de abril de 2012

    El plugin Recommendations Bar para Facebook

    Recommendations bar es un nuevo plugin social de Facebook que se encuentra en estado beta es decir, podemos usarlo pero aún está en desarrollo y puede tener algún tipo de problema eventual o sufrir algún cambio en el futuro. Por ahora, aparentemente, sólo será visible para desarrolladores.

    En principio, lo que hace es establecer nuevos métodos para permitir que los usuarios compartan artículos en sus perfiles.

    El plugin se adosa siempre a la parte inferior página, quedado fijo a derecha o izquierda y apenas se carga, se colapsa para transformarse en un botón con el texto Me Gusta o Recomendar y un ícono extra que permite expandirlo:

    Recommendations Bar para Facebook

    Por defecto, veremos un enlace diciendo Social Reading is Off; si hacemos click en él, se abrirá la típica ventana de Facebook solicitando autorización para que el plugin interactue con nuestra cuenta. De ahí en más, el usuario sólo deberá hacer click en Recomendar para que la entrada sea publicada en su perfil de Facebook.

    Recommendations Bar para Facebook
    Recommendations Bar para Facebook

    Es importante aclarar que nuestra plantilla debe incluir la etiqueta META correspondiente porque sino, no funcionará:
    <meta property="og:type" content="article"/>
    El plugin se agrega como cualquier otro usando código XFMBL así que debemos tener esto inmediatamente después de <body>
    <div id="fb-root"></div>
    <script>
    //<![CDATA[
    (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 = "//connect.facebook.net/es_ES/all.js#xfbml=1&appId=APP_ID";
    fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
    //]]>
    </script>
    Con eso, ya podemos agregar la etiqueta correspondiente de modo simple:
    <fb:recommendations-bar action='recommend' />
    o incluyendo opciones como la URL del sitio:
    <fb:recommendations-bar action='recommend' site='http://vagabundia.blogspot.com/'/>
    Cuando vemos la página de los desarroladores, uno de los datos que podemos modificar es URL of the article pero, desconozco a que hace referencia y por l oque probé, no parece necesario ya que toma siempre la direccion de la página donde estemos.

    Hay otros parámetros configurables:

    Trigger indica la forma en que se lanzará el plugin, por defecto dice onvisible y puede seleccionare un valor (X%) o manual
    Verb to display es el texto a mostrar (Recomendar o Me Gusta)
    Side es left o right, la posición donde se mostrará
    Domain es el dominio de nuestro blog

    Tambien hablan de read_time, ref, num_recommendations y max_age que no son muy claras pero, con las que se agregan por defecto es más que suficiente para la mayoría de los sitios.

    ¿Y donde poner esto en la plantilla? En cualquier parte porque siempre se mostrará fijo en al parte inferior; probablemente, lo mejor es condicionarlo para que sólo funcione en las entradas individuales:
    <b:if cond='data:blog.pageType == "item"'>
    <fb:recommendations-bar action='recommend' site='http://vagabundia.blogspot.com/'/>
    </b:if>
    No es el el único plugin en modo beta, en este momento también hay otro llamado Add to timeline pero, no puedo decir nada de él porque me ha resultado confuso de entender su funcionamiento y para qué sirve