// API callback
leerpostetiquetas({"version":"1.0","encoding":"UTF-8","feed":{"xmlns":"http://www.w3.org/2005/Atom","xmlns$openSearch":"http://a9.com/-/spec/opensearchrss/1.0/","xmlns$blogger":"http://schemas.google.com/blogger/2008","xmlns$georss":"http://www.georss.org/georss","xmlns$gd":"http://schemas.google.com/g/2005","xmlns$thr":"http://purl.org/syndication/thread/1.0","id":{"$t":"tag:blogger.com,1999:blog-33571139"},"updated":{"$t":"2023-11-19T03:42:25.111-03:00"},"category":[{"term":"Blogger"},{"term":"CSS"},{"term":"herramientas"},{"term":"JavaScript"},{"term":"servicios"},{"term":"Google"},{"term":"curiosidades"},{"term":"humor"},{"term":"HTML"},{"term":"blogs"},{"term":"Firefox"},{"term":"personal"},{"term":"iconos"},{"term":"wallpapers"},{"term":"YouTube"},{"term":"campañas"},{"term":"JQuery"},{"term":"beatlemania"},{"term":"imagenes"},{"term":"json"},{"term":"Twitter"},{"term":"animacion"},{"term":"opiniones"},{"term":"musica"},{"term":"historias"},{"term":"Scriptaculous"},{"term":"copyright"},{"term":"Facebook"},{"term":"plantillas"},{"term":"publicidades"},{"term":"Feedburner"},{"term":"juegos"},{"term":"meme"},{"term":"indice"}],"title":{"type":"text","$t":"Vagabundia"},"subtitle":{"type":"html","$t":"Algo más y algo menos."},"link":[{"rel":"http://schemas.google.com/g/2005#feed","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/posts\/default"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/-\/Facebook?alt=json-in-script\u0026max-results=100"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/search\/label\/Facebook"},{"rel":"hub","href":"http://pubsubhubbub.appspot.com/"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"generator":{"version":"7.00","uri":"http://www.blogger.com","$t":"Blogger"},"openSearch$totalResults":{"$t":"23"},"openSearch$startIndex":{"$t":"1"},"openSearch$itemsPerPage":{"$t":"100"},"entry":[{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-8380142542768813896"},"published":{"$t":"2012-06-07T00:03:00.001-03:00"},"updated":{"$t":"2012-06-07T00:03:00.250-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Facebook"},{"scheme":"http://www.blogger.com/atom/ns#","term":"json"}],"title":{"type":"text","$t":"Mostrar algunos datos de Facebook usando jQuery"},"content":{"type":"html","$t":"\u003Cdiv style=\"text-align: justify;\"\u003ELa librería jQuery posee una serie de funciones simples que facilitan la forma en que podemos acceder a los datos de un \u003Ci\u003Efeed\u003C\/i\u003E en forma Json. La función \u003Ca href=\"http:\/\/api.jquery.com\/jQuery.getJSON\/\" target=\"_blank\"\u003EgetJSON\u003C\/a\u003E es uno de esos métodos simplificados donde, en principio, bastaría colocar la dirección URL a leer.\u003C\/div\u003E\u003Cpre\u003E$.getJSON('\u003Cspan style=\"color: #FFFF00\"\u003EURL_A_LEER\u003C\/span\u003E', function(\u003Cspan style=\"color: #FFFF00\"\u003Evariable\u003C\/span\u003E) {\n  \/\/ aca hacemos algo con los datos \n});\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003EUsando 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.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nEsos datos son accesibles en esta dirección:\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cspan style=\"margin-left:50px;\"\u003Ehttp:\/\/api.ak.facebook.com\/restserver.php?v=1.0\u0026method=links.getStats\u0026urls=\u003Cspan style=\"color: #FFFF00\"\u003EURL_PAGINA\u003C\/span\u003E\u0026format=json\u003C\/span\u003E\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nasí 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:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;div id=\"FBejemplo\"\u0026gt;\u0026lt;\/div\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003Ey lluego, debajo de eso, podríamos poner el script para leer los datos de la página donde nos encontremos:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;script\u0026gt;\n  var jsonUrl = \"http:\/\/api.ak.facebook.com\/restserver.php?v=1.0\u0026method=links.getStats\u0026urls=\"+location.href+\"\u0026format=json\u0026callback=?\";\n  $.getJSON(jsonUrl, function(data) {\n    \/\/ armamos la salida de esos datos\n    var salida = \"Me Gusta: \" + data[0].like_count); \/\/ la cantidad de Me Gusta de esa página\n    salida+ = \"Comentarios: \" + data[0].comment_count); \/\/ la cantidad de comentarios de Facebook\n    salida+ = \"Compartido: \" + data[0].share_count); \/\/ la cantidad de veces que fue compartida\n    \/\/ y la escribimos\n    $(\"#FBejemplo\").html(salida);\n  });     \n\u0026lt;\/script\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003EHay 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\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nNo 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:\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cstyle\u003E#FBejemplo {margin-left: 150px;} #FBejemplo div {background: transparent url() no-repeat scroll left top;color: #EEE; font-family: Tahoma;font-size: 20px;height: 32px;line-height: 32px;margin: 10px 0;padding: 0 0 0 45px;} #FBejemplo #e1 {background-image:url(http:\/\/3.bp.blogspot.com\/-0Rd2ew50qJg\/T7Vh77lgoRI\/AAAAAAAAUOk\/kPU06WPcg6A\/s00\/fb1.png);} #FBejemplo #e2 {background-image:url(http:\/\/4.bp.blogspot.com\/--yxfV4Hfg90\/T7Vh8EQMDEI\/AAAAAAAAUOw\/tWdiHkXXKBg\/s00\/fb2.png);} #FBejemplo #e3 {background-image:url(http:\/\/4.bp.blogspot.com\/-bDGWDQq6-Lg\/T7Vh8zKZiiI\/AAAAAAAAUO8\/cZLQkRqYS_E\/s00\/fb3.png);} \u003C\/style\u003E\u003Cdiv id=\"FBejemplo\"\u003E\u003Cdiv id=\"e1\"\u003E\u003C\/div\u003E\u003Cdiv id=\"e2\"\u003E\u003C\/div\u003E\u003Cdiv id=\"e3\"\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cscript\u003Evar archivo = \"http:\/\/vagabundia.blogspot.com\/\";var jsonUrl = \"http:\/\/api.ak.facebook.com\/restserver.php?v=1.0\u0026method=links.getStats\u0026urls=\"+archivo+\"\u0026format=json\u0026callback=?\";\n$.getJSON(jsonUrl, function(data) {\n$(\"#e1\").html(\"Me Gusta: \" + data[0].like_count);$(\"#e2\").html(\"Comentarios: \" + data[0].comment_count);$(\"#e3\").html(\"Compartido: \" + data[0].share_count);\n});\u003C\/script\u003E\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/8380142542768813896\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2012\/06\/mostrar-algunos-datos-de-facebook.html#comment-form","title":"15 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/8380142542768813896"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/8380142542768813896"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2012\/06\/mostrar-algunos-datos-de-facebook.html","title":"Mostrar algunos datos de Facebook usando jQuery"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"thr$total":{"$t":"15"}},{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-3303749564973401881"},"published":{"$t":"2012-05-17T00:03:00.002-03:00"},"updated":{"$t":"2017-03-25T02:26:52.329-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Facebook"},{"scheme":"http://www.blogger.com/atom/ns#","term":"json"}],"title":{"type":"text","$t":"Crear un gadget de Facebook usando Json (3)"},"content":{"type":"html","$t":"\u003Cdiv style=\"text-align: justify;\"\u003E\u003Cimg class=\"izquierda\" src=\"http:\/\/1.bp.blogspot.com\/-VlSme48Ibkk\/T6riYzNNezI\/AAAAAAAAUKU\/Hq46-64Uohw\/s200\/rssfeeds3.jpg\" \/\u003EVoy 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: \u003Ca href=\"http:\/\/vagabundia.blogspot.com\/2012\/05\/crear-un-gadget-de-facebook-usando-json.html\" target=\"_blank\"\u003E1\u003C\/a\u003E, \u003Ca href=\"http:\/\/vagabundia.blogspot.com\/2012\/05\/crear-un-gadget-de-facebook-usando-json_16.html\" target=\"_blank\"\u003E2\u003C\/a\u003E)\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nEn 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:\u003C\/div\u003E\u003Cpre\u003Evar externo = elHtml.indexOf(\"safe_image.php\");\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003ELa variable \u003Cspan style=\"font-weight: bold;\"\u003Eexterno\u003C\/span\u003E 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í:\u003C\/div\u003E\u003Cpre\u003Ehttps:\/\/fbcdn-photos-a.akamaihd.net\/.......\/xxxxxxx_s.jpg\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003EDonde el \u003Cspan style=\"font-weight: bold;\"\u003E_s\u003C\/span\u003E final indica que el tamaño de la imagen es pequeño (small) y es el dato que contiene el feed; mide \u003Ca href=\"https:\/\/fbcdn-photos-a.akamaihd.net\/hphotos-ak-ash3\/543486_405059682850757_215401628483231_1303901_1621725191_s.jpg\" target=\"_blank\"\u003E130 pixeles\u003C\/a\u003E de ancho; si cambio \u003Cspan style=\"font-weight: bold;\"\u003E_s\u003C\/span\u003E por \u003Cspan style=\"font-weight: bold;\"\u003E_n\u003C\/span\u003E vería la imagen original con su \u003Ca href=\"https:\/\/fbcdn-photos-a.akamaihd.net\/hphotos-ak-ash3\/543486_405059682850757_215401628483231_1303901_1621725191_n.jpg\" target=\"_blank\"\u003Etamaño normal\u003C\/a\u003E, lo mismo si pasaría si usara \u003Cspan style=\"font-weight: bold;\"\u003E_b.\u003C\/span\u003E.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nPodría usar esas pero son muy grandes así que elegiré una intermedia  y cambiare \u003Cspan style=\"font-weight: bold;\"\u003E_s\u003C\/span\u003E por \u003Cspan style=\"font-weight: bold;\"\u003E_a\u003C\/span\u003E que me dará una imagen de \u003Ca href=\"https:\/\/fbcdn-photos-a.akamaihd.net\/hphotos-ak-ash3\/543486_405059682850757_215401628483231_1303901_1621725191_a.jpg\" target=\"_blank\"\u003E180 pixeles\u003C\/a\u003E de ancho.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n¿Cómo haría eso? Por ejemplo, de este modo:\u003C\/div\u003E\u003Cpre\u003ElaImagen = laImagen.replace(\"_s.jpg\",\"_a.jpg\")\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003ENo son las únicas alternativas; \u003Cspan style=\"font-weight: bold;\"\u003E_t\u003C\/span\u003E  es una miniatura de 75 pixeles, \u003Cspan style=\"font-weight: bold;\"\u003E_o\u003C\/span\u003E nos devuelve una imagen de 540 pixeles y \u003Cspan style=\"font-weight: bold;\"\u003E_q\u003C\/span\u003E o \u003Cspan style=\"font-weight: bold;\"\u003E_x\u003C\/span\u003E también tienen 180 pixeles ¿Por qué? No sé. Habrá que preguntarles a ellos.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nAhora que tengo todos los pedazos y un lio bárbaro en al cabeza, me dedico a armar la función y ver qué sale:\u003C\/div\u003E\u003Cpre\u003E\u0026lt,script type='text\/javascript'\u0026gt,\n\/\/\u0026lt,![CDATA[\n\nfunction extraer_imagen(htmltag) {\n  var s, a, b, c, d;\n  var imagen = \"\";\n  s = htmltag;\n  a = s.indexOf(\"\u0026lt;img\");\n  b = s.indexOf(\"src=\\\"\",a);\n  c = s.indexOf(\"\\\"\",b+5);\n  d = s.substr(b+5,c-b-5);\n  if((a!=-1)\u0026\u0026(b!=-1)\u0026\u0026(c!=-1)\u0026\u0026(d!=\"\")) {\n    imagen = d;\n  }\n  return imagen;\n}\n\nfunction feedFacebook(json) {\n  var entry, mensaje, enlace, elResumen, elHtml, externo, laImagen;\n  var salida = \"\";\n  for (var i = 0; i \u0026lt; json.responseData.feed.entries.length; i++) {\n    entry = json.responseData.feed.entries[i];\n\n    \/\/ los datos del feed\n    mensaje = entry.title;\n    enlace = entry.link;\n    elResumen = entry.contentSnippet;\n    elHtml = entry.content;\n\n    \/\/ los datos que verifico\n    externo = elHtml.indexOf(\"safe_image.php\");\n    laImagen = extraer_imagen(elHtml);\n\n    \/\/ y voy armando la salida\n    salida += \"\u0026lt;div class='cadaitem'\u0026gt;\";\n\n    if(externo!=-1) {\n\n      \/\/ enlaces\n      salida += \"\u0026lt;div class='titulo'\u0026gt;\u0026lt;a href='\" + enlace + \"' target='_blank' \u0026gt;\" + mensaje + \"\u0026lt;\/a\u0026gt;\u0026lt;\/div\u0026gt;\";\n      salida += \"\u0026lt;div class='contenido enlace'\u0026gt;\";\n      salida += \"\u0026lt;img src='\" + laImagen + \"'\/\u0026gt;\";\n      salida += \"\u0026lt;p\u0026gt;\" + elResumen + \"\u0026lt;\/p\u0026gt;\";\n      salida += \"\u0026lt;\/div\u0026gt;\";\n      salida += \"\u0026lt;div class='clear'\u0026gt;\u0026lt;\/div\u0026gt;\";\n\n    } else {\n\n      \/\/ imágenes\n      salida += \"\u0026lt;div class='contenido imagen'\u0026gt;\";\n      if(laImagen) {\n        laImagen = laImagen.replace(\"_s.jpg\",\"_a.jpg\");\n        salida += \"\u0026lt;a href='\" + enlace + \"' target='_blank'\u0026gt;\u0026lt;img src='\" + laImagen + \"'\/\u0026gt;\u0026lt;\/a\u0026gt;\";\n        if(mensaje) { salida += \"\u0026lt;span\u0026gt;\" + mensaje + \"\u0026lt;\/span\u0026gt;\"; }\n        if(elResumen) { salida += \"\u0026lt;span\u0026gt;\" + elResumen + \"\u0026lt;\/span\u0026gt;\"; }                \n\n      }\n      salida += \"\u0026lt;\/div\u0026gt;\";\n\n    }\n    salida += \"\u0026lt;\/div\u0026gt;\";\n\n  }\n  document.getElementById('divFACEpage').innerHTML=salida;\n}\n\n\/\/]]\u0026gt,\n\u0026lt,\/script\u0026gt,\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003EEl resto es un poco de CSS:\u003C\/div\u003E\u003Cpre\u003E\u0026lt,style\u0026gt,\n  #divFACEpage {\n    margin: 0 auto;\n    width: 250px;\n  }\n  .cadaitem {\n    background-color: #FFF;\n    font-family: Tahoma;\n    font-size: 13px;\n    margin-bottom: 5px;\n  }\n  .cadaitem .clear {\n    clear:both;\n    padding:10px;\n  }\n  .cadaitem .contenido.enlace {\n    width:250px;\n  }\n  .cadaitem .titulo {\n    overflow: hidden;\n    padding: 10px;\n    text-align: center;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    word-wrap: normal;\n  }\n  .cadaitem .titulo a {\n    color:DeepSkyBlue;\n    font-weight:bold;\n  }\n  .cadaitem .contenido.enlace img {\n    float: left;\n    max-width: 100px;\n    padding: 0 10px;\n  }\n  .cadaitem .contenido.enlace p {\n    color: #666;\n    float: right;\n    font-size: 11px;\n    overflow: hidden;\n    padding-right: 10px;\n    width: 120px;\n    word-wrap: break-word;\n  }\n   .cadaitem .contenido.imagen {\n    position:relative;\n  }\n  .cadaitem .contenido.imagen img {\n    display: block;\n    margin: 0 auto;\n    padding: 20px 0;\n  }\n  .cadaitem .contenido.imagen:hover span {\n    display: block;\n  }\n  .cadaitem .contenido.imagen span {\n    background-color: rgba(0, 0, 0, 0.5);\n    border-radius: 10px;\n    color: #FFF;\n    display: none;\n    font-size: 11px;\n    margin: 0 20px;\n    padding: 10px;\n    position: absolute;\n    text-align: center;\n    top:30%;\n    width: 200px;\n}\n\u0026lt,\/style\u0026gt,\u003C\/pre\u003E\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/3303749564973401881\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2012\/05\/crear-un-gadget-de-facebook-usando-json_17.html#comment-form","title":"6 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/3303749564973401881"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/3303749564973401881"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2012\/05\/crear-un-gadget-de-facebook-usando-json_17.html","title":"Crear un gadget de Facebook usando Json (3)"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/1.bp.blogspot.com\/-VlSme48Ibkk\/T6riYzNNezI\/AAAAAAAAUKU\/Hq46-64Uohw\/s72-c\/rssfeeds3.jpg","height":"72","width":"72"},"thr$total":{"$t":"6"}},{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-6285411396220351227"},"published":{"$t":"2012-05-16T00:09:00.000-03:00"},"updated":{"$t":"2017-03-25T02:27:30.230-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Facebook"},{"scheme":"http://www.blogger.com/atom/ns#","term":"json"}],"title":{"type":"text","$t":"Crear un gadget de Facebook usando Json (2)"},"content":{"type":"html","$t":"\u003Cdiv style=\"text-align: justify;\"\u003E\u003Cimg class=\"izquierda\" src=\"http:\/\/1.bp.blogspot.com\/-jDfFQD1JK7A\/T6riYdNHiZI\/AAAAAAAAUKI\/q-a518LNwM8\/s200\/rssfeeds2.jpg\" \/\u003EEn \u003Ca href=\"http:\/\/vagabundia.blogspot.com\/2012\/05\/crear-un-gadget-de-facebook-usando-json.html\" target=\"_blank\"\u003Ela primera parte\u003C\/a\u003E hablaba de crear un \u003Ci\u003Egadget\u003C\/i\u003E a partir de los datos de un feed de Facebook pero ¿cómo se diseña el \u003Ci\u003Egadget\u003C\/i\u003E? Tal como se diseña un \u003Ci\u003Epost\u003C\/i\u003E, 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.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nEl resto, es subjetivo; me imagino un \u003Ci\u003Egadget\u003C\/i\u003E que colocaré en la \u003Ci\u003Esidebar\u003C\/i\u003E 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: \u003Cspan style=\"font-weight: bold;\"\u003Eentry.title\u003C\/span\u003E, \u003Cspan style=\"font-weight: bold;\"\u003Eentry.link\u003C\/span\u003E, \u003Cspan style=\"font-weight: bold;\"\u003Eentry.content\u003C\/span\u003E y \u003Cspan style=\"font-weight: bold;\"\u003Eentry.contentSnippet\u003C\/span\u003E; 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.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n¿Por que no pensar primero el modelo que quisiera que se viera escribiendo el HTML tal como haría en una entrada? Un ejemplo:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;div class='cadaitem'\u0026gt;\n  \u0026lt;div class='titulo'\u0026gt;\n    \u0026lt;a href='\u003Cspan style=\"color: #FFFF00\"\u003EURL_entrada\u003C\/span\u003E' target='_blank' \u0026gt;\u003Cspan style=\"color: #FFFF00\"\u003E ... el texto del mensaje ... \u003C\/span\u003E\u0026lt;\/a\u0026gt;\n  \u0026lt;\/div\u0026gt;\n  \u0026lt;div class='contenido'\u0026gt;\n    \u0026lt;img src='\u003Cspan style=\"color: #FFFF00\"\u003EURL_imagen\u003C\/span\u003E'\/\u0026gt;\n    \u0026lt;p\u0026gt;\u003Cspan style=\"color: #FFFF00\"\u003E ... aquí pondría el resumen ... \u003C\/span\u003E\u0026lt;p\u0026gt;\n  \u0026lt;\/div\u0026gt;\n\u0026lt;\/div\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003EBastarí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:\u003C\/div\u003E\u003Cpre\u003Esalida += \"\u0026lt;div class='cadaitem'\u0026gt;\";\nsalida += \"\u0026lt;div class='titulo'\u0026gt;\";\nsalida += \"\u0026lt;a href='\"+enlace+\"' target='_blank' \u0026gt;\"+mensaje+\"\u0026lt;\/a\u0026gt;\";\nsalida += \"\u0026lt;\/div\u0026gt;\";\nsalida += \"\u0026lt;div class='contenido'\u0026gt;\";\nsalida += \"\u0026lt;img src='\"+laImagen+\"'\/\u0026gt;\";\nsalida += \"\u0026lt;p\u0026gt;\"+elResumen+\"\u0026lt;p\u0026gt;\";\nsalida += \"\u0026lt;\/div\u0026gt;\";\nsalida += \"\u0026lt;\/div\u0026gt;\";\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003EPero ... me falta \u003Cb\u003ElaImagen\u003C\/b\u003E; debo \"encontrarla\" dentro del contenido (entry.content) y para eso, usaré una función extra que es la misma que usamos en Blogger para \u003Ca href=\"http:\/\/vagabundia.blogspot.com\/2011\/05\/json-detectar-la-primera-imagen-de-cada.html\" target=\"_blank\"\u003Edetectar al primera imagen de las entradas\u003C\/a\u003E:\u003C\/div\u003E\u003Cpre\u003Efunction extraer_imagen(htmltag) {\n  var s, a, b, c, d;\n  var imagen = \"\";\n  s = htmltag;\n  a = s.indexOf(\"\u0026lt;img\");\n  b = s.indexOf(\"src=\\\"\",a);\n  c = s.indexOf(\"\\\"\",b+5);\n  d = s.substr(b+5,c-b-5);\n  if((a!=-1)\u0026\u0026(b!=-1)\u0026\u0026(c!=-1)\u0026\u0026(d!=\"\")) {\n    imagen = d;\n  }\n  return imagen;\n}\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003EAsí que en mi función, la variable \u003Cspan style=\"font-weight: bold;\"\u003ElaImagen\u003C\/span\u003E será:\u003C\/div\u003E\u003Cpre\u003Evar elHtml = entry.content;\nvar laImagen = extraer_imagen(elHtml);\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003Eo directamente:\u003C\/div\u003E\u003Cpre\u003ElaImagen = extraer_imagen(entry.content);\u003C\/pre\u003E\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/6285411396220351227\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2012\/05\/crear-un-gadget-de-facebook-usando-json_16.html#comment-form","title":"0 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/6285411396220351227"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/6285411396220351227"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2012\/05\/crear-un-gadget-de-facebook-usando-json_16.html","title":"Crear un gadget de Facebook usando Json (2)"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/1.bp.blogspot.com\/-jDfFQD1JK7A\/T6riYdNHiZI\/AAAAAAAAUKI\/q-a518LNwM8\/s72-c\/rssfeeds2.jpg","height":"72","width":"72"},"thr$total":{"$t":"0"}},{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-5409138287465974483"},"published":{"$t":"2012-05-14T00:06:00.000-03:00"},"updated":{"$t":"2017-03-25T02:27:58.823-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Facebook"},{"scheme":"http://www.blogger.com/atom/ns#","term":"json"}],"title":{"type":"text","$t":"Crear un gadget de Facebook usando Json (1)"},"content":{"type":"html","$t":"\u003Cdiv style=\"text-align: justify;\"\u003E\u003Cimg class=\"izquierda\" src=\"http:\/\/2.bp.blogspot.com\/-P7pcF2RJSKY\/T6rcll9z0hI\/AAAAAAAAUJ4\/YfcP708we4Q\/s200\/rssfeeds.jpg\" \/\u003EMuchas veces hablamos de los feeds de un sitio \u003Ci\u003Eweb\u003C\/i\u003E ¿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.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nEse \"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 \u003Ci\u003Eblog\u003C\/i\u003E 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 \u003Ci\u003Esoftware\u003C\/i\u003E especial.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nSi 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 \u003Ci\u003Eweb\u003C\/i\u003E 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.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nSi 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 \u0026lt;item\u0026gt; \u0026lt;\/item\u0026gt; o \u0026lt;entry\u0026gt; \u0026lt;\/entry\u0026gt; dentro de la cual hay otras con el título, la fecha, el autor, etc.\u003C\/div\u003E\u003Cpre\u003E\u0026lt;entry\u0026gt;\n  \u0026lt;title\u0026gt; xxxxxxx \u0026lt;\/title\u0026gt;\n  \u0026lt;link\u0026gt; xxxxxxx \u0026lt;\/link\u0026gt;\n  \u0026lt;published\u0026gt; xxxxxxx \u0026lt;\/published\u0026gt;\n  \u0026lt;content\u0026gt; xxxxxxx \u0026lt;\/content\u0026gt;\n\u0026lt;\/entry\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003ETodo 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 \u003Ca href=\"http:\/\/vagabundia.blogspot.com\/2010\/12\/el-misterioso-json.html\" target=\"_blank\"\u003Eel misterioso Json\u003C\/a\u003E que es una palabrita que vemos constantemente y a través de la cual se arman la gran mayoría de los \u003Ci\u003Egadgets\u003C\/i\u003E que utilizamos.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nEn 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.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nUna herramienta que ayuda en este asunto es el llamado \u003Ca href=\"http:\/\/vagabundia.blogspot.com\/2008\/08\/un-widget-usando-google-ajax-feed-api.html\" target=\"_blank\"\u003EGoogle Ajax Feed API\u003C\/a\u003E 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.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nVamos 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:\u003C\/div\u003E\u003Cpre\u003Ehttps:\/\/www.facebook.com\/feeds\/page.php?format=atom10\u0026id=\u003Cspan style=\"color: #FFFF00\"\u003EXXXXXXXXXX\u003C\/span\u003E\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003Edonde XXXXXXXXXX es el ID de nuestra página que es el que nos muestra el navegador cuando entramos en ella:\u003C\/div\u003E\u003Cpre\u003Ehttps:\/\/www.facebook.com\/pages\/Vagabundia\/\u003Cspan style=\"color: #FFFF00\"\u003E215401628483231\u003C\/span\u003E\nhttps:\/\/www.facebook.com\/pages\/Gem-BLOG\/\u003Cspan style=\"color: #FFFF00\"\u003E395197195477\u003C\/span\u003E\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003E¿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 \u003Cb\u003Eid=\u003C\/b\u003E:\u003C\/div\u003E\u003Cpre\u003Ehttp:\/\/www.facebook.com\/Infinitos.Magazine\nhttp:\/\/www.facebook.com\/notifications?id=\u003Cspan style=\"color: #FFFF00\"\u003E151205601565278\u003C\/span\u003E\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003EVamos al grano. Necesitamos el \u003Ci\u003Escript\u003C\/i\u003E 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 \u0026lt\/head\u0026gt;:\u003C\/div\u003E\u003Cpre\u003E\u0026lt,script type='text\/javascript'\u0026gt,\n\/\/\u0026lt,![CDATA[\nfunction feedFacebook(json) {\n  var entry, mensaje, enlace, elResumen;\n  var salida = \"\";\n  for (var i = 0; i \u0026lt; json.responseData.feed.entries.length; i++) {\n    entry = json.responseData.feed.entries[i];\n    var mensaje = entry.title;\n    var enlace = entry.link;\n    var elResumen = entry.contentSnippet;\n    salida += \"\u0026lt;p\u0026gt;\" ;\n    salida += mensaje + \"\u0026lt;br\/\u0026gt;\";\n    salida += enlace + \"\u0026lt;br\/\u0026gt;\";\n    salida += elResumen + \"\u0026lt;br\/\u0026gt;\";\n    salida += \"\u0026lt;\/p\u0026gt;\";\n  }\n  document.getElementById('divFACEpage').innerHTML=salida;\n}\n\/\/]]\u0026gt,\n\u0026lt,\/script\u0026gt,\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003ELuego, donde queramos que se muestre el resultado, un DIV vacío:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;div id=\"divFACEpage\"\u0026gt;\u0026lt;\/div\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003EY debajo, el \u003Ci\u003Escript\u003C\/i\u003E que llama al API de Google:\u003C\/div\u003E\u003Cpre\u003E\u0026lt,script type='text\/javascript'\u0026gt,\n\/\/\u0026lt,![CDATA[\n  var URLFEED = \"https:\/\/www.facebook.com\/feeds\/page.php?format=atom10\u0026id=\u003Cspan style=\"color: #FFFF00\"\u003EXXXXXXXXXX\u003C\/span\u003E\";\n  var NUMFEED = 5;\n  var archivofeeds = \"http:\/\/ajax.googleapis.com\/ajax\/services\/feed\/load?v=1.0\u0026num=\"+\u003Cb\u003ENUMFEED\u003C\/b\u003E+\"\u0026output=json\u0026q=\"+encodeURIComponent(\u003Cb\u003EURLFEED\u003C\/b\u003E)+\"\u0026callback=\u003Cb\u003EfeedFacebook\u003C\/b\u003E\";\n  var nuevo = document.createElement('script');\n  nuevo.setAttribute('type', 'text\/javascript');\n  nuevo.setAttribute('src', archivofeeds);\n  document.getElementsByTagName('head')[0].appendChild(nuevo);\n\/\/]]\u0026gt,\n\u0026lt,\/script\u0026gt,\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003E¿Qué hace esta última? cargar el \u003Ci\u003Escript\u003C\/i\u003E 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) \u003Cbr \/\u003E\n\u003Cbr \/\u003E\nJustamente, 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 \u003Cb\u003Eentry\u003C\/b\u003E; como esos datos son un \u003Ci\u003Earray\u003C\/i\u003E, 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:\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cspan style=\"font-weight: bold;\"\u003Eentry.title \u003C\/span\u003Ees 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 \u0026lt;title\u0026gt;\u003Cbr \/\u003E\n\u003Cspan style=\"font-weight: bold;\"\u003Eentry.link \u003C\/span\u003Ees la dirección URL de ese item y corresponde al contenido de la etiqueta \u0026lt;link\u0026gt;\u003Cbr \/\u003E\n\u003Cspan style=\"font-weight: bold;\"\u003Eentry.content \u003C\/span\u003Ees el contenido HTML de la entrada, etiquetas \u0026lt;content\u0026gt; \u0026lt;summary\u0026gt; o \u0026lt;description\u0026gt;\u003Cbr \/\u003E\n\u003Cspan style=\"font-weight: bold;\"\u003Eentry.contentSnippet \u003C\/span\u003Ees un resumen de ese mismo contenido, en formato de texto plano, es decir, sin etiquetas HTML\u003Cbr \/\u003E\n\u003Cspan style=\"font-weight: bold;\"\u003Eentry.publishedDate \u003C\/span\u003Ees la fecha en un formato similar a este \"20 May 2012 10:20:30 -0300\"\u003Cbr \/\u003E\n\u003Cspan style=\"font-weight: bold;\"\u003Eentry.author \u003C\/span\u003Ees el nombre del autor y en este ejemplo no existe\u003Cbr \/\u003E\n\u003Cspan style=\"font-weight: bold;\"\u003Eentry.description \u003C\/span\u003Ees un texto adicional o subtítulo que tampoco existe\u003Cbr \/\u003E\n\u003Cspan style=\"font-weight: bold;\"\u003Eentry.categories \u003C\/span\u003Ees la lista de etiquetas que tampoco existe\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nEn 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:\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nObviamente, nada especial pero, en realidad, eso es todo lo que necesitamos; sabiendo cuales son los datos, podemos armar nuestros propios \u003Ci\u003Egadgets\u003C\/i\u003E, diseñando el formato en que quisiéramos mostrarlos.\u003C\/div\u003E\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/5409138287465974483\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2012\/05\/crear-un-gadget-de-facebook-usando-json.html#comment-form","title":"2 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/5409138287465974483"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/5409138287465974483"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2012\/05\/crear-un-gadget-de-facebook-usando-json.html","title":"Crear un gadget de Facebook usando Json (1)"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/2.bp.blogspot.com\/-P7pcF2RJSKY\/T6rcll9z0hI\/AAAAAAAAUJ4\/YfcP708we4Q\/s72-c\/rssfeeds.jpg","height":"72","width":"72"},"thr$total":{"$t":"2"}},{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-7655440518606398380"},"published":{"$t":"2012-04-16T00:05:00.002-03:00"},"updated":{"$t":"2012-04-16T02:41:29.876-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Facebook"}],"title":{"type":"text","$t":"El plugin Recommendations Bar para Facebook"},"content":{"type":"html","$t":"\u003Cdiv style=\"text-align: justify;\"\u003E\u003Ca href=\"https:\/\/developers.facebook.com\/docs\/reference\/plugins\/recommendationsbar\/\" target=\"_blank\"\u003ERecommendations bar\u003C\/a\u003E es un nuevo \u003Cspan style=\"font-style: italic;\"\u003Eplugin\u003C\/span\u003E 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 \u003Ca href=\"http:\/\/facebook.stackoverflow.com\/questions\/8191542\/is-facebook-recommendations-bar-available-for-non-developer-users\" target=\"_blank\" rel=\"nofollow\"\u003Edesarrolladores\u003C\/a\u003E.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nEn principio, lo que hace es establecer nuevos métodos para permitir que los usuarios compartan artículos en sus perfiles.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nEl \u003Ci\u003Eplugin\u003C\/i\u003E 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:\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: center;\"\u003E\u003Cimg alt='Recommendations Bar para Facebook' src=\"http:\/\/4.bp.blogspot.com\/-dsOPiTACK8Y\/T4sqdaxNjQI\/AAAAAAAAT7g\/iXwTLbQtK40\/s00\/fbplugins_1.png\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003EPor defecto, veremos un enlace diciendo \u003Cspan style=\"font-weight: bold;\"\u003ESocial Reading is Off;\u003C\/span\u003E si hacemos \u003Cspan style=\"font-style: italic;\"\u003Eclick\u003C\/span\u003E en él, se abrirá la típica ventana de Facebook solicitando autorización para que el \u003Cspan style=\"font-style: italic;\"\u003Eplugin\u003C\/span\u003E interactue con nuestra cuenta. De ahí en más, el usuario sólo deberá hacer \u003Cspan style=\"font-style: italic;\"\u003Eclick\u003C\/span\u003E en \u003Cspan style=\"font-weight: bold;\"\u003ERecomendar\u003C\/span\u003E para que la entrada sea publicada en su perfil de Facebook.\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: center;\"\u003E\u003Cimg alt='Recommendations Bar para Facebook' src=\"http:\/\/3.bp.blogspot.com\/-Wv1F4x1_vpE\/T4sqd_42iBI\/AAAAAAAAT74\/OYD0QQvHTV4\/s00\/fbplugins_3.png\" \/\u003E\u003Cbr \/\u003E\n\u003Cimg alt='Recommendations Bar para Facebook' src=\"http:\/\/4.bp.blogspot.com\/-G90sS35xfDc\/T4sqepRAT6I\/AAAAAAAAT8I\/fijdDenOnZE\/s00\/fbplugins_4.png\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003EEs importante aclarar que nuestra plantilla debe incluir la etiqueta META correspondiente porque sino, no funcionará:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;meta property=\"og:type\" content=\"article\"\/\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003EEl \u003Cspan style=\"font-style: italic;\"\u003Eplugin\u003C\/span\u003E se agrega como cualquier otro usando código XFMBL así que debemos tener esto inmediatamente después de \u0026lt;body\u0026gt;\u003C\/div\u003E\u003Cpre\u003E\u0026lt;div id=\"fb-root\"\u0026gt;\u0026lt;\/div\u0026gt;\n\u0026lt;script\u0026gt;\n\/\/\u0026lt;![CDATA[\n(function(d, s, id) {\n  var js, fjs = d.getElementsByTagName(s)[0];\n  if (d.getElementById(id)) return;\n  js = d.createElement(s); js.id = id;\n  js.src = \"\/\/connect.facebook.net\/es_ES\/all.js#xfbml=1\u0026appId=APP_ID\";\n  fjs.parentNode.insertBefore(js, fjs);\n}(document, 'script', 'facebook-jssdk'));\n\/\/]]\u0026gt;\n\u0026lt;\/script\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003ECon eso, ya podemos agregar la etiqueta correspondiente de modo simple:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;fb:recommendations-bar action='recommend' \/\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003Eo incluyendo opciones como la URL del sitio:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;fb:recommendations-bar action='recommend' site='http:\/\/vagabundia.blogspot.com\/'\/\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003ECuando vemos la página de los desarroladores, uno de los datos que podemos modificar es \u003Cspan style=\"font-weight: bold;\"\u003EURL of the article\u003C\/span\u003E 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.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nHay otros parámetros configurables:\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cspan style=\"font-weight: bold;\"\u003ETrigger \u003C\/span\u003Eindica la forma en que se lanzará el \u003Ci\u003Eplugin\u003C\/i\u003E, por defecto dice onvisible y puede seleccionare un valor (X%) o manual\u003Cbr \/\u003E\n\u003Cspan style=\"font-weight: bold;\"\u003EVerb to display \u003C\/span\u003Ees el texto a mostrar (Recomendar o Me Gusta)\u003Cbr \/\u003E\n\u003Cspan style=\"font-weight: bold;\"\u003ESide \u003C\/span\u003Ees left o right, la posición donde se mostrará\u003Cbr \/\u003E\n\u003Cspan style=\"font-weight: bold;\"\u003EDomain \u003C\/span\u003Ees el dominio de nuestro blog\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nTambien 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.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n¿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:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;b:if cond='data:blog.pageType == \u0026quot;item\u0026quot;'\u0026gt;\n  \u0026lt;fb:recommendations-bar action='recommend' site='http:\/\/vagabundia.blogspot.com\/'\/\u0026gt;\n\u0026lt;\/b:if\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003E\u003Cimg style=\"float:left;margin-right:10px;\" class=\"toVUM\" onclick=\"abrirVUM(this)\" width=\"60\" src=\"http:\/\/4.bp.blogspot.com\/-ch0IsBRwbPk\/T4swG_fLdCI\/AAAAAAAAT8g\/vq-TsXBmIeM\/s00\/fbplugins_6.png\" \/\u003ENo es el el único \u003Ci\u003Eplugin\u003C\/i\u003E en modo beta, en este momento también hay otro llamado \u003Ca href=\"https:\/\/developers.facebook.com\/docs\/reference\/plugins\/add-to-timeline\/\" target=\"_blank\"\u003EAdd to timeline\u003C\/a\u003E pero, no puedo decir nada de él porque me ha resultado confuso de entender su funcionamiento y para qué sirve \u003C\/div\u003E\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/7655440518606398380\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2012\/04\/el-plugin-recommendations-bar-para.html#comment-form","title":"12 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/7655440518606398380"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/7655440518606398380"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2012\/04\/el-plugin-recommendations-bar-para.html","title":"El plugin Recommendations Bar para Facebook"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/4.bp.blogspot.com\/-dsOPiTACK8Y\/T4sqdaxNjQI\/AAAAAAAAT7g\/iXwTLbQtK40\/s72-c\/fbplugins_1.png","height":"72","width":"72"},"thr$total":{"$t":"12"}},{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-4554821036548199624"},"published":{"$t":"2012-01-05T00:05:00.001-03:00"},"updated":{"$t":"2017-03-22T00:49:41.367-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Facebook"}],"title":{"type":"text","$t":"Mejoras para compartir entradas en Facebook"},"content":{"type":"html","$t":"\u003Cdiv style=\"text-align: justify;\"\u003EEl enlace es LARGO ... a primera vista: ASUSTA pero, cuando lo vemos más detalladamente ... ES PEOR; sin embargo, funciona y es una buena forma de eludir los problemas que generan los distintos modos de compartir entradas de Blogger en Facebook.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nQuién quiera leer de esos problemas puede ver \u003Ca href=\"http:\/\/vagabundia.blogspot.com\/2011\/08\/meta-description-en-blogger-si-o-no.html\"\u003Eesta entrada\u003C\/a\u003E pero, la base del asunto es que Blogger no nos permite establecer los datos necesarios en las etiquetas META correspondiente que deben estar SI o SI en el HEAD de la plantilla para que sean leídas correctamente por Facebook.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nUno de esos datos es la imagen miniatura que \"adornaría\" el \u003Ci\u003Epost\u003C\/i\u003E y el otro es el resumen de ese post, es decir, el texto explicativo; ambos datos, no son accesibles en Blogger salvo en el \u003Cb\u003Eincludable post\u003C\/b\u003E y, como eso es parte del BODY, no hay manera de ponerlos en el HEAD ya que usando \u003Ci\u003EJavaScript\u003C\/i\u003E, serán ignorados; por lo tanto, el resultado a compartir depende siempre de la buena voluntad de Blogger.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nFacebook dispone de un \u003Ca href=\"http:\/\/vagabundia.blogspot.com\/2011\/04\/agregar-un-boton-de-enviar-para.html\" target=\"_blank\"\u003Eplugin para enviar\u003C\/a\u003E, pero, los datos de ese envío son automáticos, no tenemos control sobre ellos; otra forma es usar un simple enlace, algo que el sistema \u003Ca href=\"http:\/\/developers.facebook.com\/docs\/share\/\" target=\"_blank\"\u003Eparece haber depreciado\u003C\/a\u003E pero, que aún sigue funcionando e imagino que funcionará por mucho tiempo ya que es utilizado por incontables sitios y es la forma más sencilla de agregar un botón para este sistema ya que no requiere aplicaciones o \u003Ci\u003Escripts\u003C\/i\u003E extras.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nEl enlace básico sería este:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;a href=\"http:\/\/www.facebook.com\/sharer.php?u=\u003Cspan style=\"color: #FFFF00\"\u003EURL_PAGINA\u003C\/span\u003E\u0026amp;amp;t=\u003Cspan style=\"color: #FFFF00\"\u003ETITULO_ENTRADA\u003C\/span\u003E\"\u0026gt; Compartir en Facebook \u0026lt;\/a\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003ESe envían dos parámetros:\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cspan style=\"margin-left:50px;font-weight: bold;\"\u003Eu \u003C\/span\u003Ees la dirección URL de la página\u003Cbr \/\u003E\n\u003Cspan style=\"margin-left:50px;font-weight: bold;\"\u003Et \u003C\/span\u003Ees el título de la entrada\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nEl resultado es pobre pero, según se ve en la \u003Ci\u003Eweb\u003C\/i\u003E, muchos sitios hablan de la posibilidad de agregar parámetros extras y de ese modo, crear un botón de compartir personalizado; para eso, los parámetros serán otros:\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cspan style=\"margin-left:50px;font-weight: bold;\"\u003Ep[url] \u003C\/span\u003Ees la dirección URL de la página\u003Cbr \/\u003E\n\u003Cspan style=\"margin-left:50px;font-weight: bold;\"\u003Ep[title] \u003C\/span\u003Ees el título de la entrada\u003Cbr \/\u003E\n\u003Cspan style=\"margin-left:50px;font-weight: bold;\"\u003Ep[summary] \u003C\/span\u003Ees el texto de la entrada\u003Cbr \/\u003E\n\u003Cspan style=\"margin-left:50px;font-weight: bold;\"\u003Ep[images][0] \u003C\/span\u003Ees la miniatura de la entrada (100x100)\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nel resultado, sería algo como esto:\u003C\/div\u003E\u003Cpre\u003Ehttp:\/\/www.facebook.com\/sharer.php?s=100\u0026amp;p[title]=\u003Cspan style=\"color: #FFFF00\"\u003ETITULO_ENTRADA\u003C\/span\u003E\u0026amp;p[summary]=\u003Cspan style=\"color: #FFFF00\"\u003ERESUMEN\u003C\/span\u003E\u0026amp;p[url]=\u003Cspan style=\"color: #FFFF00\"\u003EURL_PAGINA\u003C\/span\u003E\u0026amp;\u0026amp;p[images][0]=\u003Cspan style=\"color: #FFFF00\"\u003EURL_IMAGEN\u003C\/span\u003E\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003EY ahora, agregaremos el botón de compartir en alguna parte de las entradas, por ejemplo, en el post-footer y allí, empezaremos a colocar los datos que nos provee Blogger:\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cspan style=\"margin-left:50px;font-weight: bold;\"\u003Ep[url] \u003C\/span\u003Ela dirección URL de la página = data:post.url\u003Cbr \/\u003E\n\u003Cspan style=\"margin-left:50px;font-weight: bold;\"\u003Ep[title] \u003C\/span\u003Eel título de la entrada = data:post.title\u003Cbr \/\u003E\n\u003Cspan style=\"margin-left:50px;font-weight: bold;\"\u003Ep[summary] \u003C\/span\u003Eel texto de la entrada = data:post.snippet\u003Cbr \/\u003E\n\u003Cspan style=\"margin-left:50px;font-weight: bold;\"\u003Ep[images][0] \u003C\/span\u003Ela miniatura de la entrada  = data:post.thumbnailUrl\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nAbriremos ese enlace en una ventana de tipo \u003Ci\u003Epop-up\u003C\/i\u003E y crearemos dos enlaces diferentes, uno para las entradas que tengan definida una imagen miniatura y otro para las que no las tengan en cuyo caso, agregaremos una imagen por defecto; para esto, usaremos los condicionales de Blogger y el monstruo final, sería este:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;b:if cond='data:post.thumbnailUrl == \u0026amp;quot;\u0026amp;quot;'\u0026gt;\n  \u0026lt;a expr:onclick='\u0026amp;quot;window.open(\\\u0026amp;quot;http:\/\/www.facebook.com\/sharer.php?s=100\u0026amp;amp;p[title]=\u0026amp;quot; + data:post.title + \u0026amp;quot;\u0026amp;amp;p[summary]=\u0026amp;quot; + data:post.snippet + \u0026amp;quot;\u0026amp;amp;p[url]=\u0026amp;quot; + data:post.url + \u0026amp;quot;\u0026amp;amp;\u0026amp;amp;p[images][0]=\u003Cspan style=\"color: #CCCCFF\"\u003EURL_IMAGENxDEFECTO\u003C\/span\u003E\\\u0026amp;quot;,\\\u0026amp;quot;sharefb\\\u0026amp;quot;,\\\u0026amp;quot;toolbar=0,status=0,width=548,height=325\\\u0026amp;quot;);\u0026amp;quot;' href='javascript: void(0)'\u0026gt; \u003Cspan style=\"color: #CCCCFF\"\u003ECompartir en Facebook\u003C\/span\u003E \u0026lt;\/a\u0026gt;\n\u0026lt;b:else\/\u0026gt;\n  \u0026lt;a expr:onclick='\u0026amp;quot;window.open(\\\u0026amp;quot;http:\/\/www.facebook.com\/sharer.php?s=100\u0026amp;amp;p[title]=\u0026amp;quot; + data:post.title + \u0026amp;quot;\u0026amp;amp;p[summary]=\u0026amp;quot; + data:post.snippet + \u0026amp;quot;\u0026amp;amp;p[url]=\u0026amp;quot; + data:post.url + \u0026amp;quot;\u0026amp;amp;\u0026amp;amp;p[images][0]=\u0026amp;quot; + data:post.thumbnailUrl + \u0026amp;quot;\\\u0026amp;quot;,\\\u0026amp;quot;sharefb\\\u0026amp;quot;,\\\u0026amp;quot;toolbar=0,status=0,width=548,height=325\\\u0026amp;quot;);\u0026amp;quot;' href='javascript: void(0)'\u0026gt; \u003Cspan style=\"color: #CCCCFF\"\u003ECompartir en Facebook\u003C\/span\u003E \u0026lt;\/a\u0026gt;\n\u0026lt;\/b:if\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003ELa ventana \u003Ci\u003Epop-up\u003C\/i\u003E que se abriría sería algo así:\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: center;\"\u003E\u003Cimg src=\"http:\/\/3.bp.blogspot.com\/-vrUub-F0leA\/TwTGtfL_3nI\/AAAAAAAATQk\/R-JkkfUGoEI\/s00\/faceshare_1.png\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003EY el resultado en Facebook sería este:\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: center;\"\u003E\u003Cimg src=\"http:\/\/1.bp.blogspot.com\/-3jvOaAwJmQ8\/TwTGtkDIv7I\/AAAAAAAATQ0\/s0c_WfPHnDg\/s00\/faceshare_2.png\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003E\u003Ca class=\"simgvaga001 sociales socFB\" href=\"#\" style=\"float:left;pointer-events:none\"\u003E\u003C\/a\u003EEste es el sistema que ahora está funcionando en el blog, así que pueden probarlo \u003Cspan style=\"margin-right: 10px;font-style: italic;\"\u003Eonline\u003C\/span\u003E.\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003E\u003Cspan style=\"font-weight: bold;\"\u003EACTUALIZACIÓN\u003C\/span\u003E:\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nEn lugar de este dato que es la miniatura de 72x72:\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cspan style=\"margin-left:50px;font-weight: bold;\"\u003Edata:post.thumbnailUrl\u003C\/span\u003E\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nen caso de error, debería probarse este otro que es la imagen real:\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cspan style=\"margin-left:50px;font-weight: bold;\"\u003Edata:post.firstImageUrl\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/4554821036548199624\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2012\/01\/mejoras-para-compartir-entradas-en.html#comment-form","title":"218 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/4554821036548199624"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/4554821036548199624"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2012\/01\/mejoras-para-compartir-entradas-en.html","title":"Mejoras para compartir entradas en Facebook"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/3.bp.blogspot.com\/-vrUub-F0leA\/TwTGtfL_3nI\/AAAAAAAATQk\/R-JkkfUGoEI\/s72-c\/faceshare_1.png","height":"72","width":"72"},"thr$total":{"$t":"218"}},{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-6448302278460048328"},"published":{"$t":"2011-07-19T00:00:00.002-03:00"},"updated":{"$t":"2011-07-19T01:07:37.964-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Facebook"}],"title":{"type":"text","$t":"Optimizar las etiquetas META para Facebook"},"content":{"type":"html","$t":"\u003Cdiv style=\"text-align: justify;\"\u003EInsertar las etiquetas META correctas para que las cosas que se comparten de nuestro \u003Cspan style=\"font-style: italic;\"\u003Eblog\u003C\/span\u003E en Facebook se vean de modo más o menos aceptable no es tan difícil, basta agregarlas y aceptar que en Blogger existen algunas limitaciones que nos impiden personalizar esa parte y obtener el máximo beneficio.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nTodas esas etiquetas extras son optativas y se basan en \u003Ca href=\"http:\/\/vagabundia.blogspot.com\/2010\/12\/el-protocolo-open-graph-en-blogger.html\" target=\"_blank\"\u003Eel protocolo Open Graph\u003C\/a\u003E.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nLo primero que debemos hacer es verificar que la etiqueta HTML de nuestra plantilla, tenga agregado lo siguiente; en las plantillas comunes:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;html xmlns='http:\/\/www.w3.org\/1999\/xhtml' xmlns:b='http:\/\/www.google.com\/2005\/gml\/b' xmlns:data='http:\/\/www.google.com\/2005\/gml\/data' xmlns:expr='http:\/\/www.google.com\/2005\/gml\/expr' xmlns:fb='http:\/\/www.facebook.com\/2008\/fbml' \u003Cspan style=\"color: rgb(204, 204, 255);\"\u003Exmlns:og='http:\/\/opengraphprotocol.org\/schema\/\u003C\/span\u003E'\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003Ey en las nuevas plantillas:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http:\/\/www.w3.org\/1999\/xhtml' xmlns:b='http:\/\/www.google.com\/2005\/gml\/b' xmlns:data='http:\/\/www.google.com\/2005\/gml\/data' xmlns:expr='http:\/\/www.google.com\/2005\/gml\/expr' \u003Cspan style=\"color: rgb(204, 204, 255);\"\u003Exmlns:og='http:\/\/opengraphprotocol.org\/schema\/\u003C\/span\u003E'\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003ELuego, en el head, antes de \u0026lt;b:include data='blog' name='all-head-content'\/\u0026gt;, agregamis los datos generales:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;meta content='\u003Cspan style=\"color: rgb(204, 204, 255);\"\u003EEL NOMBRE DEL SITIO\u003C\/span\u003E' property='og:site_name'\/\u0026gt;\n\u0026lt;meta content='\u003Cspan style=\"color: rgb(204, 204, 255);\"\u003EEL NOMBRE DEL AUTOR\u003C\/span\u003E' property='og:author'\/\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003EOtros dos datos extras si es que usamos \u003Cspan style=\"font-style: italic;\"\u003Eplugins\u003C\/span\u003E sociales asociados con alguna aplicacion que hayamos creado:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;meta content='\u003Cspan style=\"color: rgb(204, 204, 255);\"\u003EID_CUENTA_FACEBOOK\u003C\/span\u003E' property='fb:admins'\/\u0026gt;\n\u0026lt;meta content='\u003Cspan style=\"color: rgb(204, 204, 255);\"\u003EID_APLICACION\u003C\/span\u003E' property='fb:app_id'\/\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003ELa URL de la página la colocamos con los datos de Blogger:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;meta expr:content='data:blog.url' property='og:url'\/\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003EPor último, condicionamos los datos que restan para que difieran entre las entradas individuales y el resto de las páginas. Justamente es acá donde las posibilidades que da Blogger nos impiden optimizar las cosas al máximo:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;b:if cond='data:blog.pageType == \u0026amp;quot;item\u0026amp;quot;'\u0026gt;\n  \u0026lt;!-- las entradas individuales --\u0026gt;\n  \u0026lt;meta expr:content='data:blog.pageName' property='og:title'\/\u0026gt;\n  \u0026lt;meta property=\"og:type\" content=\"article\"\/\u0026gt;\n  \u0026lt;!-- \n    lamentablemente, no podemos acceder a un resumen de las entradas\n    así podemos poner una descripción cualquiera o repetir el título de la entrada o mezclar ambas cosas\n   --\u0026gt;\n  \u0026lt;meta expr:content='data:blog.pageName + \u0026amp;quot;. \u003Cspan style=\"color: rgb(204, 204, 255);\"\u003Euna breve descripción del sitio\u003C\/span\u003E\u0026amp;quot;' property='og:description'\/\u0026gt;\n  \u0026lt;!-- \n    acá debería ir la imagen que nosotros decidimos mostrar para acompañar la entrada\n    pero, ese es otro dato al que no podemos acceder\n   --\u0026gt;\n\u0026lt;b:else\/\u0026gt;\n  \u0026lt;!-- cualquier otra página --\u0026gt;\n  \u0026lt;meta expr:content='data:blog.title' property='og:title'\/\u0026gt;\n  \u0026lt;meta content='blog' property='og:type'\/\u0026gt;\n  \u0026lt;meta content='\u003Cspan style=\"color: rgb(204, 204, 255);\"\u003Eacá ponemos una breve descipcion de nuestro sitio\u003C\/span\u003E' property='og:description'\/\u0026gt;\n  \u0026lt;meta content='\u003Cspan style=\"color: rgb(204, 204, 255);\"\u003EURL_IMAGENxDEFECTO\u003C\/span\u003E' property='og:image'\/\u0026gt;\n\u0026lt;\/b:if\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003EEso es todo. El resultado puede ser verificado usando la herramienta \u003Ca rel=\"nofollow\" href=\"https:\/\/developers.facebook.com\/tools\/lint\/\" target=\"_blank\"\u003EURL Linter\u003C\/a\u003E que provee el mismo Facebook. Allí, colocamos la dirección a verificar y nos mostrará si hay errores, si faltan datos o cuales son las correcciones que debemos hacer.\u003C\/div\u003E\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/6448302278460048328\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2011\/07\/optimizar-las-etiquetas-meta-para.html#comment-form","title":"89 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/6448302278460048328"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/6448302278460048328"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2011\/07\/optimizar-las-etiquetas-meta-para.html","title":"Optimizar las etiquetas META para Facebook"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"thr$total":{"$t":"89"}},{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-6836106685514087101"},"published":{"$t":"2011-05-09T00:00:00.001-03:00"},"updated":{"$t":"2012-12-07T16:02:44.126-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Facebook"}],"title":{"type":"text","$t":"El nuevo Comment Box de Facebook en Blogger"},"content":{"type":"html","$t":"\u003Cdiv style=\"text-align: justify;\"\u003EHace poco, Facebook realizó \u003Ca rel=\"nofollow\" href=\"http:\/\/developers.facebook.com\/blog\/post\/472\" target=\"_blank\"\u003Ecambios\u003C\/a\u003E en algunos de sus \u003Cspan style=\"font-style: italic;\"\u003Eplugins\u003C\/span\u003E sociales y si bien, la mayoría de los viejos códigos siguen funcionando, es conveniente que los vayamos cambiando ya que estas actualizaciones solucionan algunos problemas previos y, en principio, nos dan más control sobre ellos.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nProbablemente, el \u003Ca href=\"http:\/\/vagabundia.blogspot.com\/2010\/05\/agregar-el-comment-box-de-facebook.html\" target=\"_blank\"\u003EComment Box\u003C\/a\u003E es el más afectado; si vamos a la página de \u003Ca rel=\"nofollow\" href=\"http:\/\/developers.facebook.com\/docs\/reference\/plugins\/comments\/\" target=\"_blank\"\u003Edesarrolladores de Facebook\u003C\/a\u003E, veremos que ya no es necesario crear una aplicación y que el único dato importante es la URL de la página donde estará insertado el \u003Cspan style=\"font-style: italic;\"\u003Eplugin\u003C\/span\u003E; el resto de las \u003Ca target=\"_blank\" rel=\"nofollow\" href=\"http:\/\/developers.facebook.com\/docs\/reference\/fbml\/comments\/\"\u003Eopciones\u003C\/a\u003E son las mismas que antes y controlan la forma en que se verá.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nAlgunas de las variantes del nuevo sistema:\u003C\/div\u003E\u003Cul class=\"lista\"\u003E\u003Cli\u003Een lugar de verse ordenados cronológicamente, lo hace por \"relevancia\"\u003C\/li\u003E\n\u003Cli\u003Epuede seleccionarse si se desean publicar en Facebook o no\u003C\/li\u003E\n\u003Cli\u003Eincorpora un botón Me gusta y otro Responder de tal forma que pueden seguirse las conversaciones de manera independiente\u003C\/li\u003E\n\u003Cli\u003Eenvia notificaciones de los comentarios\u003C\/li\u003E\n\u003C\/ul\u003E\u003Cdiv style=\"text-align: justify;\"\u003EPara utilizar las nuevas funciones nos dan dos alternativas, si ya tenemos el \u003Cspan style=\"font-style: italic;\"\u003Eplugin\u003C\/span\u003E, podemos agregar un atributo en la etiqueta FB:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;fb:comments \u003Cspan style=\"font-weight: bold;\"\u003Emigrated='1' \u003C\/span\u003E....... \u0026gt;\u0026lt;\/fb\u0026gt;\u003C\/pre\u003EMe parece que lo mejor es hacerlo desde cero. En este caso, debemos agregar lo siguiente justo después de \u003Cspan style=\"font-weight: bold;color: #33FF33\"\u003E\u0026lt;body\u0026gt;\u003C\/span\u003E:\u003Cbr \/\u003E\n\u003Cpre\u003E\u0026lt;div id='fb-root' \/\u0026gt;\n\u0026lt;script src='http:\/\/connect.facebook.net\/es_ES\/all.js#xfbml=1'\/\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003EEste, es el código general que carga el sistema de \u003Ci\u003Eplugins\u003C\/i\u003E de Facebook así que, si ya lo tenemos porque utilizamos otro, no hace falta repetirlo.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nLa caja de comentarios la pondremos allí donde quisiéramos que se viera y por defecto, el código es algo así:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;fb:comments href='\u003Cspan style=\"color: #FFFF00\"\u003EURL_sitio\u003C\/span\u003E' colorscheme='light' num_posts='2' width='500' \u0026gt;\u0026lt;\/fb:comments\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003Edonde:\u003Cbr \/\u003E\n\u003Cspan style=\"font-weight: bold;\"\u003Ehref\u003C\/span\u003E es la URL de la página donde será insertado\u003Cbr \/\u003E\n\u003Cspan style=\"font-weight: bold;\"\u003Ecolorscheme \u003C\/span\u003Ees el esquema básico de color y puede ser light o dark\u003Cbr \/\u003E\n\u003Cspan style=\"font-weight: bold;\"\u003Eposts \u003C\/span\u003Ees la cantidad de comentarios visibles\u003Cbr \/\u003E\n\u003Cspan style=\"font-weight: bold;\"\u003Ewidth \u003C\/span\u003Ees el ancho del contenedor\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nEl dato  que coloquemos en \u003Cspan style=\"font-weight: bold;\"\u003Ehref\u003C\/span\u003E es fundamental. Si vamos a agregar el \u003Cspan style=\"font-style: italic;\"\u003Eplugin\u003C\/span\u003E en un blog, esta URL será distinta según sea la página donde nos encontremos, por lo tanto, en Blogger debemos usar las variables del sistema; como la lógica indica que esto sólo será visible en las páginas individuales, el código de la etiqueta FB debería modificarse así:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;fb:comments expr:href='data:post.url' colorscheme='light' num_posts='2' width='500' \u0026gt;\u0026lt;\/fb:comments\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003EEso, debería estar condicionado en la plantilla misma para lo cual, lo más simple es agregarlo en alguna parte junto con los comentarios de Blogger; por ejemplo, podríamos ubicarlo debajo del formulario del sistema:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;b:if cond='data:post.embedCommentForm'\u0026gt;\n  \u0026lt;b:if cond='data:post.allowNewComments'\u0026gt;\n    \u0026lt;b:include data='post' name='comment-form'\/\u0026gt;\n\n    \u003Cspan style=\"color: #CCCCFF\"\u003E\u0026lt;div id='comentariosface'\u0026gt;\n      \u0026lt;fb:comments colorscheme='light' expr:href='data:post.url' num_posts='2' width='500'\/\u0026gt;\n    \u0026lt;\/div\u0026gt;\u003C\/span\u003E\n\n  \u0026lt;b:else\/\u0026gt;\n  .......\u003C\/pre\u003EColoco el plugin en un DIV con un ID ya que de este modo, luego puedo centrarlo, ponerle fondo, o agregarle cualquier detalle gráfico al contendedor aunque no podrémos modificar su contenido; así que un poco de CSS para esto antes de \u003Cspan style=\"font-weight: bold;color: #33FF33\"\u003E\u0026lt;\/head\u0026gt;\u003C\/span\u003E o junto con el resto de las definiciones de estilo:\u003Cbr \/\u003E\n\u003Cpre\u003E\u0026lt;style\u0026gt;\n  #comentariosface {\n    margin: 30px auto;\n    width: 500px;'\n    \/* cualquier otra propiedad *\/\n  }\n\u0026lt;\/style\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align:center;\"\u003E\u003Cimg class=\"toVUM\" onclick=\"abrirVUM(this)\" width=\"200\" src=\"http:\/\/4.bp.blogspot.com\/-phIvYDCARTw\/TcYvzobxf2I\/AAAAAAAAR38\/Fnz32fQ54X4\/s00\/fbcbox_1.png\" title=\"lo que verá alguien que no está logueado en Facebook\" \/\u003E \u003Cimg class=\"toVUM\" onclick=\"abrirVUM(this)\" width=\"200\" src=\"http:\/\/1.bp.blogspot.com\/-XvL9wxG_fuk\/TcYvzmrqE-I\/AAAAAAAAR4E\/4d82lNhk4hk\/s00\/fbcbox_2.png\" title=\"lo que veremos nosotros por defecto\" \/\u003E \u003Cimg class=\"toVUM\" onclick=\"abrirVUM(this)\" width=\"200\" src=\"http:\/\/1.bp.blogspot.com\/-xt5zdSmXqSU\/TcYvz7nJwHI\/AAAAAAAAR4M\/1xHuaV_zGmI\/s00\/fbcbox_3.png\" title=\"el comentario se actualiza automáticamente\" \/\u003E \u003Cimg src=\"http:\/\/3.bp.blogspot.com\/-l6ZrbtzJNLU\/TcYv0FIqMGI\/AAAAAAAAR4U\/bvBk7Ht2hqE\/s00\/fbcbox_4.png\" title=\"ejemplos varios\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003ECon eso sólo, ya tenemos agregado el \u003Ci\u003Eplugin\u003C\/i\u003E pero, si queremos administrarlo, deberemos seguir haciendo cosas y otra vez necesitaremos crear una aplicación para asociarla; esto nos dará acceso completo y lo indicamos agregando dos etiquetas META antes de \u003Cspan style=\"font-weight: bold;color: #33FF33\"\u003E\u0026lt;\/head\u0026gt;\u003C\/span\u003E:\u003Cbr \/\u003E\n\u003Cpre\u003E\u0026lt;meta property='fb:admins' content='\u003Cspan style=\"color: #FFFF00\"\u003ENUESTRO_ID_DE_USUARIO\u003C\/span\u003E'\/\u003E\n\u0026lt;meta property='fb:app_id' content='\u003Cspan style=\"color: #FFFF00\"\u003EID_DE_LA_APLICACION\u003C\/span\u003E'\/\u003E\u003C\/pre\u003EDonde, obviamente, tendremos que colocar nuestros datos.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cb\u003ENUESTRO_ID_DE_USUARIO \u003C\/b\u003Ees el que nos habilitará para \u003Ca rel=\"nofollow\" href=\"http:\/\/www.facebook.com\/editaccount.php?notifications\" target=\"_blank\"\u003Erecibir notificaciones\u003C\/a\u003E de los comentarios dejados en el sitio\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cb\u003EID_DE_LA_APLICACION \u003C\/b\u003Ees el que nos dará acceso de administradores y por lo tanto, podremos definir opciones de configuración tales como hacer que el \u003Cspan style=\"font-style: italic;\"\u003Eplugin\u003C\/span\u003E sea visible a todos o sólo a los amigos, agregar palabras a una lista negra para rechazar ciertos comentarios, bannear a usuarios, moderar los comentarios, etc.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nSi optamos por este modo, aparecerá un enlace a la configuración en la misma caja de comentarios del \u003Cspan style=\"font-style: italic;\"\u003Eblog\u003C\/span\u003E pero, además, podremos acceder a la herramienta de moderación \u003Cspan style=\"font-style: italic;\"\u003Eonline\u003C\/span\u003E de Facebook donde veremos todas las aplicaciones que hayamos creado:\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: center;\"\u003E\u003Ca class=\"lightwindow\" params=\"lightwindow_width=691,lightwindow_height=389\" href=\"http:\/\/3.bp.blogspot.com\/-RDwPYoBbCHk\/TcYv0WEVQlI\/AAAAAAAAR4c\/7T7pNykoP8Y\/s00\/fbcbox_5.png\"\u003Ehttp:\/\/developers.facebook.com\/tools\/comments?id=ID_DE_LA_APLICACION\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003EEn este mismo \u003Cspan style=\"font-style: italic;\"\u003Epost\u003C\/span\u003E hay una Comment Box agregado y funcionando, justo debajo del formulario normal de Blogger.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nPor lo que he visto, no solo tiene más opciones sino que funciona mejor que el modelo anterior; en todo caso, parece ser una buena herramienta que, como todas ellas, depende más del uso que le demos nosotros que de la herramienta en si misma.\u003C\/div\u003E\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/6836106685514087101\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2011\/05\/el-nuevo-comment-box-de-facebook-en.html#comment-form","title":"367 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/6836106685514087101"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/6836106685514087101"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2011\/05\/el-nuevo-comment-box-de-facebook-en.html","title":"El nuevo Comment Box de Facebook en Blogger"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/4.bp.blogspot.com\/-phIvYDCARTw\/TcYvzobxf2I\/AAAAAAAAR38\/Fnz32fQ54X4\/s72-c\/fbcbox_1.png","height":"72","width":"72"},"thr$total":{"$t":"367"}},{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-851692225486824554"},"published":{"$t":"2011-04-27T00:00:00.006-03:00"},"updated":{"$t":"2011-04-28T23:37:16.866-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Facebook"}],"title":{"type":"text","$t":"Agregar un botón de Enviar para Facebook"},"content":{"type":"html","$t":"\u003Cdiv style=\"text-align: justify;\"\u003EFacebook  ha añadido un \u003Ca rel=\"nofollow\" href=\"https:\/\/developers.facebook.com\/blog\/post\/494\" target=\"_blank\"\u003Enuevo botón llamado \"Enviar\"\u003C\/a\u003E que sirve para compartir contenido de modo diferente al botón \u003Cspan style=\"font-weight: bold;\"\u003EMe Gusta\u003C\/span\u003E ya que, en lugar de enviar la información a todos los contactos, la envia de manera personalizada, ya sea a una persona, a un conjunto de personas o a los miembros de un grupo.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nEl nuevo botón sólo puede ser agregado utiliando lenguaje XFMBL por lo tanto, si no tenemos incorporada esta posibilidad a nuestro sitio, primero que nada debemos colocar lo siguiente justo después de \u003Cspan style=\"color: rgb(51, 255, 51);\"\u003E\u0026lt;body\u0026gt;\u003C\/span\u003E:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;div id='fb-root'\u0026gt;\u0026lt;\/div\u0026gt;\n\u0026lt;script src='http:\/\/connect.facebook.net\/es_ES\/all.js#appId=APP_ID\u0026amp;amp;xfbml=1'\u0026gt;\u0026lt;\/script\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003EEsto nos permitirá utilizar el código especial de Facebook con cualquier otro plugin de la red social. Este código no es otra cosa que etiquetas especiales llamadas \u003Cspan style=\"color: rgb(51, 255, 51);\"\u003EFB\u003C\/span\u003E y para agregar el botón Enviar, lo mínimo a colcoar sería lo siguiente:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;fb:send href='\u003Cspan style=\"color: rgb(255, 255, 0);\"\u003EURL\u003C\/span\u003E'\u0026gt;\u0026lt;\/fb:send\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003Edonde \u003Cspan style=\"font-weight: bold;\"\u003Ehref\u003C\/span\u003E es la dirección URL a compartir. El resto de las opciones (color, fuentes, etc) podemos verlas en la misma \u003Ca href=\"http:\/\/developers.facebook.com\/docs\/reference\/plugins\/send\/\" target=\"_blank\"\u003Epágina del plugin\u003C\/a\u003E.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nEn Blogger si queremos que la URL apunte a cada entrada en particular, deberíamos condicionar el botón de tal forma que sólo se muestre en las entradas individuales y utilizar las expresiones de Blogegr para indicar esa dirección:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;b:if cond='data:blog.pageType == \u0026amp;quot;item\u0026amp;quot;'\u0026gt;\n  \u0026lt;fb:send expr:src='data:post.url'\u0026gt;\u0026lt;\/fb:send\u0026gt;  \n\u0026lt;\/b:if\u0026gt;\u003C\/pre\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"margin-left:200px;\"\u003E\u003Cfb:send src=\"http:\/\/vagabundia.blogspot.com\/2011\/04\/agregar-un-boton-de-enviar-para.html\" colorscheme=\"dark\"  font='tahoma'\u003E\u003Cfb\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003EQuienes ya utilicen \u003Ca href=\"http:\/\/vagabundia.blogspot.com\/2010\/04\/agregar-un-boton-de-me-gusta-para.html\" target=\"_blank\"\u003Eel botón Me Gusta\u003C\/a\u003E tienen la posibilidad de combinarlos utilizando el mismo código XFMBL al que sólo se le debe agregar el atributo \u003Cspan style=\"color: rgb(51, 255, 255);\"\u003Esend=\"true\"\u003C\/span\u003E con el mismo criterio que antes, indicando una dirección URL especifica como por ejemplo el \u003Cspan style=\"font-style: italic;\"\u003Ehome\u003C\/span\u003E de nuestro sitio:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;fb:like src='\u003Cspan style=\"color: rgb(255, 255, 0);\"\u003Ehttp:\/\/miblog.blogspot.com\u003C\/span\u003E' send='true' width='450' show_faces='true'\u0026gt;\u0026lt;\/fb:like\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003Eo condicionándolo para que puedan compartirse las entradas individuales:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;b:if cond='data:blog.pageType == \u0026amp;quot;item\u0026amp;quot;'\u0026gt;\n  \u0026lt;fb:like expr:src='data:post.url' send='true' width='450' show_faces='true'\u0026gt;\u0026lt;\/fb:like\u0026gt;\n\u0026lt;\/b:if\u0026gt;\u003C\/pre\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"margin-left:100px;\"\u003E\u003Cfb:like src=\"http:\/\/vagabundia.blogspot.com\/\" font=\"tahoma\" send=\"true\" show_faces=\"false\" width=\"450\"\u003E\u003C\/fb\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: center;\"\u003E\u003Cimg src=\"http:\/\/2.bp.blogspot.com\/-UY7BduVcSFA\/Tbc-q3nl3yI\/AAAAAAAAR2w\/i9z6M8SLogM\/s00\/facesend.png\" \/\u003E\u003C\/div\u003E\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/851692225486824554\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2011\/04\/agregar-un-boton-de-enviar-para.html#comment-form","title":"36 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/851692225486824554"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/851692225486824554"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2011\/04\/agregar-un-boton-de-enviar-para.html","title":"Agregar un botón de Enviar para Facebook"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/2.bp.blogspot.com\/-UY7BduVcSFA\/Tbc-q3nl3yI\/AAAAAAAAR2w\/i9z6M8SLogM\/s72-c\/facesend.png","height":"72","width":"72"},"thr$total":{"$t":"36"}},{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-7543572930824131022"},"published":{"$t":"2011-02-07T00:00:00.002-03:00"},"updated":{"$t":"2011-07-18T17:09:16.805-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Facebook"},{"scheme":"http://www.blogger.com/atom/ns#","term":"json"}],"title":{"type":"text","$t":"Usar JSON para leer Facebook (Parte 2)"},"content":{"type":"html","$t":"\u003Cdiv style=\"text-align: justify;\"\u003EEn un artículo anterior se mostraba como leer los \u003Cspan style=\"font-style: italic;\"\u003Efeeds\u003C\/span\u003E de un Perfil o Page de Facebook siempre que estos fueran públicos; allí se filtraban algunos tipos de publicaciones y luego se procedía a crear una página con el contenido. Ese mismo método nos permite mostrar cualquier cosa o un solo tipo de publicación.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nPor ejemplo, supongamos que sólo quisiéramos mostrar las imágenes, podríamos crear un \u003Cspan style=\"font-style: italic;\"\u003Escript\u003C\/span\u003E que leyera la última publicada para mostrarla en la \u003Cspan style=\"font-style: italic;\"\u003Esidebar\u003C\/span\u003E como si fuera un \u003Cspan style=\"font-style: italic;\"\u003Egadget\u003C\/span\u003E.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nAgrego mi función antes de \u003Cspan style=\"font-weight: bold; color: rgb(51, 255, 51);\"\u003E\u0026lt;\/head\u0026gt;\u003C\/span\u003E:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;script type=\"text\/javascript\"\u0026gt;\n\/\/\u0026lt;![CDATA[\n\nfunction leerpicsfacebook(json) {\n\n  \/\/ aquí voy a iniciar algunas variables\n  var data, tipo, link, source, picture, from, extra;\n  var salida = \"\";\n  var extra = \"\";\n\n  \/\/ como en todos los otros ejemplos, se ejecuta un bucle que lee una cierta cantidad de entradas\n  for (var i = 0; i \u0026lt; json.data.length; i++) {\n    var post = \"\";\n\n    \/\/ guardo los datos de cada entrada en un array llamado data\n    data = json.data[i];\n    \/\/ si no hay nada, termino porque significa que hay menos de las que solicité leer\n    if (i==json.data.length) { break; }\n\n    tipo = data.type; \/\/ es dato nos indica qué tipo de publicación es (busco que sea photo)\n\n    \/\/ este dato, indica quién lo publicó\n    from = data.from.name;\n    \/\/ como sólo quiero ver las mias, si no lo son, las ignoraré\n    if(from!=\"\u003Cspan style=\"color: #FFFF00\"\u003Emi_nombre\u003C\/span\u003E\") {tipo=\"dummy\";}\n\n    \/\/ si es una Foto, voy a leer los datos\n    if(tipo==\"photo\") {\n      picture = data.picture; \/\/ esto contiene la dirección URL de la miniatura\n      link = data.link; \/\/ esto contiene la dirección URL a la imagen real que puede estar en Facebook o bien ser un enlace externo\n      \/\/ voy armando mi código HTML para mostrarla\n      post += \"\u0026lt;a target='_blank' title='\" + message + \"' href='\" + link + \"\u0026gt;\u0026lt;img src='\" + pic + \"'\/\u0026gt;\u0026lt;\/a\u0026gt;\";\n      \/\/ si la foto está en Facebook sólo podrá verse si uno está logueado\n      if(link.indexOf(\"www.facebook.com\")\u0026gt;0) {\n        \/\/ le agregaré un texto debajo para indicarlo\n        extra = \"\u0026lt;span\u0026gt;VIA FACEBOOK\u0026lt;\/span\u0026gt;\"\n      }\n      \/\/ creo el código HTML de mi gadget\n      salida += \"\u0026lt;div class=\"fbpic\"\u0026gt;\";\n      salida += post + extra;\n      salida += \"\u0026lt;\/div\u0026gt;\";\n      \/\/ y termino porque sólo quiero mostrar una, la última publicada\n      break;\n    }\n  }\n\n  \/\/ terminado el bucle, escribiré los datos en un DIV al que le pondre un ID especifico\n  document.getElementById(\"picfacebook\").innerHTML = salida;\n}\n\/\/]]\u0026gt;\n\u0026lt;\/script\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003EComo en el caso anterior, en un elemento HTML de la \u003Cspan style=\"font-style: italic;\"\u003Esidebar\u003C\/span\u003E pongo el DIV donde se mostrará la imagen, el estilo y la llamada  a la función:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;style\u0026gt;\n  .fbpic {\n    background-color: #BBB;\n    border: 2px solid #FFF;\n    display: table-cell;\n    height: 150px;\n    text-align: center;\n    vertical-align: middle;\n    width: 150px;\n  }\n  .fbpic img {\n    max-height: 120px;\n    max-width: 130px;\n  }\n  .fbpic span {\n    color:#000;\n    display:block;\n    font-size:11px;\n    text-align:center;\n  }\n\u0026lt;\/style\u0026gt;\n\n\u0026lt;div id='picfacebook'\u0026gt; C A R G A N D O \u0026lt;\/div\u0026gt;\n\n\u0026lt;script src=\"http:\/\/graph.facebook.com\/\u003Cspan style=\"color: #FFFF00\"\u003Emi_nombre\u003C\/span\u003E\/feed?limit=\u003Cspan style=\"color: #FFFF00\"\u003E20\u003C\/span\u003E\u0026amp;amp;callback=leerpicsfacebook\"\u0026gt;\u0026lt;\/script\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003Edonde \u003Cspan style=\"font-weight: bold;\"\u003Emi_nombre\u003C\/span\u003E es el nombre (o número) de nuestro Perfil o Page y \u003Cspan style=\"font-weight: bold;\"\u003Elimit\u003C\/span\u003E es la cantidad de datos que leeremos ya que si bien vamos a mostrar una sola, debemos leer varios apra asegurarnos que haya alguna.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nLo mismo puedo hacer con los videos, por ejemplo, así, mostraría los últimos tres publicados:\u003C\/div\u003E\u003Cpre id=\"vidfacebooksrc\"\u003E\u0026lt;script type=\"text\/javascript\"\u0026gt;\n\/\/\u0026lt;![CDATA[\n\nfunction leervidsfacebook(json) {\n  var data, tipo, link, source, picture, from;\n  var salida = \"\";\n  var contarsalidas = 0; \n  for (var i = 0; i \u0026lt; json.data.length; i++) {\n    var post = \"\";\n    data = json.data[i];\n    if (i==json.data.length) { break; }\n    tipo = data.type;\n    from = data.from.name;\n    if(from!=\"mi_nombre\") {tipo=\"dummy\";}\n    if(tipo==\"video\" {\n      source = data.source\n      link = data.link\n      picture = data.picture\n      post += \"\u0026lt;a target='_blank' href='\" + source + \"'\u0026gt;\u0026lt;img src='\" + picture + \"'\/\u0026gt;\u0026lt;\/a\u0026gt;\";\n      salida += \"\u0026lt;div class='fbvid'\u0026gt;\";\n      salida += post;\n      salida += \"\u0026lt;\/div\u0026gt;\";\n      contarsalidas ++;\n      if(contarsalidas==\u003Cspan style=\"color: #FFFF00\"\u003E3\u003C\/span\u003E) { break; }\n    }\n  }\n  document.getElementById(\"vidfacebook\").innerHTML = salida;\n}\n\n\/\/]]\u0026gt;\n\u0026lt;\/script\u0026gt;\n\n\u0026lt;style\u0026gt;\n  .fbvid {\n    margin: 5px 0;\n  }\n  .fbvid img {\n    background-color: #FFF;\n    height: 97px;\n    padding: 2px;\n    width: 130px;\n  }\n\u0026lt;\/style\u0026gt;\n\u0026lt;div id='vidfacebook'\u0026gt; C A R G A N D O \u0026lt;\/div\u0026gt;\n\u0026lt;script src=\"http:\/\/graph.facebook.com\/\u003Cspan style=\"color: #FFFF00\"\u003Emi_nombre\u003C\/span\u003E\/feed?limit=\u003Cspan style=\"color: #FFFF00\"\u003E20\u003C\/span\u003E\u0026amp;amp;callback=leervidsfacebook\"\u0026gt;\u0026lt;\/script\u0026gt;\u003C\/pre\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003ETanto en este caso como en los ejemplos previos, la cantidad de datos que pueden leerse son muchos y siempre se utiliza la misma sintaxis, se define una variable para guardarlos y luego, se agrega un punto con el nombre del dato; si a la variable la llamase \u003Cb\u003Eleer\u003C\/b\u003E, estos son algunos a los que puede accederse:\u003C\/div\u003E\u003Cpre\u003Eleer.\u003Cb\u003Eid\u003C\/b\u003E es el número indicativo de la publicación\nleer.\u003Cb\u003Efrom.name\u003C\/b\u003E es el nombre del Perfil o Page\nleer.\u003Cb\u003Efrom.id\u003C\/b\u003E es el ID del Perfil o Page\nleer.\u003Cb\u003Eicon\u003C\/b\u003E es la imagen del ícono distintivo del tipo de publicación\nleer.\u003Cb\u003Etype\u003C\/b\u003E indica el tipo de publicación\nleer.\u003Cb\u003Ecreated_time\u003C\/b\u003E y leer.\u003Cb\u003Eupdated_time\u003C\/b\u003E son las fechas de creación\n\nleer.\u003Cb\u003Epicture\u003C\/b\u003E es la imagen miniatura\nleer.\u003Cb\u003Esource\u003C\/b\u003E es la fuente (de un video o swf por ejemplo)\nleer.\u003Cb\u003Ename\u003C\/b\u003E es el título del video o del enlace\nleer.\u003Cb\u003Ecaption\u003C\/b\u003E es el nombre del servicio que provee el video\nleer.\u003Cb\u003Edescription\u003C\/b\u003E es el texto secundario del video o del enlace\nleer.\u003Cb\u003Eapplication\u003C\/b\u003E indica la aplicación que lo agrega (si es que hay una)\nleer.\u003Cb\u003Eproperties.name\u003C\/b\u003E, leer.\u003Cb\u003Eproperties.text\u003C\/b\u003E y leer.\u003Cb\u003Eproperties.href\u003C\/b\u003E son las referencias al sitio original de un enlace\n\nleer.\u003Cb\u003Elikes.count\u003C\/b\u003E es la cantidad de MeGusta que posee esa publicación\nleer.\u003Cb\u003Elikes.data[\u003Cspan style=\"color: #FFFF00\"\u003Ei\u003C\/span\u003E].name\u003C\/b\u003E es la lista de usuarios que lo han marcado con Me Gusta\n\nleer.\u003Cb\u003Ecomments.count\u003C\/b\u003E es la cantidad de comentarios que tiene una publicación\nleer.\u003Cb\u003Ecomments.data[\u003Cspan style=\"color: #FFFF00\"\u003Ei\u003C\/span\u003E].from.name\u003C\/b\u003E es el nombre de los comentaristas\nleer.\u003Cb\u003Ecomments.data[\u003Cspan style=\"color: #FFFF00\"\u003Ei\u003C\/span\u003E].message\u003C\/b\u003E es el comentario en si mismo\nleer.\u003Cb\u003Ecomments.data[\u003Cspan style=\"color: #FFFF00\"\u003Ei\u003C\/span\u003E].created_time\u003C\/b\u003E es la fecha del comentario\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003EAdemás, hay dos datos extars que nos permitirían seguir leyendo más datos:\u003C\/div\u003E\u003Cpre\u003Eleer.\u003Cb\u003Epaging.previous\u003C\/b\u003E es el enlace que deberíamos utilizar para leer las 25 publicaciones anteriores (si es que hay) por ejemplo:\n     http:\/\/graph.facebook.com\/\u003Cspan style=\"color: #FFFF00\"\u003Emi_nombre\u003C\/span\u003E\/feed?limit=25\u0026\u003Cspan style=\"color: #FFFF00\"\u003Esince=2011-01-17T04%3A31%3A59%2B0000\u003C\/span\u003E\nleer.\u003Cb\u003Epaging.next\u003C\/b\u003E es el enlace que deberíamos utilizar para leer las 25 publicaciones siguentes (si es que hay) por ejemplo:\n     http:\/\/graph.facebook.com\/\u003Cspan style=\"color: #FFFF00\"\u003Emi_nombre\u003C\/span\u003E\/feed?limit=25\u0026until=\u003Cspan style=\"color: #FFFF00\"\u003E2011-01-14T08%3A23%3A38%2B0000\u003C\/span\u003E\u003C\/pre\u003E\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/7543572930824131022\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2011\/02\/usar-json-para-leer-facebook-parte-2.html#comment-form","title":"3 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/7543572930824131022"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/7543572930824131022"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2011\/02\/usar-json-para-leer-facebook-parte-2.html","title":"Usar JSON para leer Facebook (Parte 2)"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"thr$total":{"$t":"3"}},{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-3707887208221566734"},"published":{"$t":"2011-02-03T00:00:00.001-03:00"},"updated":{"$t":"2011-07-18T17:07:00.529-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Facebook"},{"scheme":"http://www.blogger.com/atom/ns#","term":"json"}],"title":{"type":"text","$t":"Usar JSON para leer Facebook (Parte 1)"},"content":{"type":"html","$t":"\u003Cdiv style=\"text-align: justify;\"\u003ETambién Facebook es accesible via JSON aunque, en este caso, la configuración de privacidad debe ser establecida para que sean públicas y si bien no podemos tener acceso a todo, los \u003Ci\u003Efeeds\u003C\/i\u003E pueden ser leidos del mismo modo que \u003Ca href=\"http:\/\/vagabundia.blogspot.com\/search\/label\/json?max-results=5\" target=\"_blank\"\u003Etodos los vistos anteriormente\u003C\/a\u003E, utilizando esta dirección:\u003C\/div\u003E\u003Cpre\u003Ehttp:\/\/graph.facebook.com\/\u003Cspan style=\"color: #FFFF00\"\u003Enombre_usuario\u003C\/span\u003E\/feed\u003C\/pre\u003E\u003Cdiv style=\"text-align: center;\"\u003E\u003Cimg src=\"http:\/\/3.bp.blogspot.com\/_hljKDuw-cxQ\/TTM__t9_oZI\/AAAAAAAARf8\/j1xPDZX1qnY\/s00\/fbjson_2.png\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003EEsto es válido tanto para un Perfil como para una Page y los datos devueltos en ambos casos son similares así que podemos proceder igual que para cualquier otra dirección, agregando los párámetros de \u003Cspan style=\"font-weight: bold;\"\u003Elimit\u003C\/span\u003E para establecer la cantidad de datos a leer y \u003Cspan style=\"font-weight: bold;\"\u003Ecallback\u003C\/span\u003E para ejecutar una función que los interprete. Estos datos, son diversos y lo mejor para entenderlos, es con un ejemplo.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nVoy a agregar una función antes de \u003Cspan style=\"color: rgb(51, 255, 51); font-weight: bold;\"\u003E\u0026lt;\/head\u0026gt;\u003C\/span\u003E:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;script type=\"text\/javascript\"\u0026gt;\n\/\/\u0026lt;![CDATA[\nfunction leerallfacebook(json) {\n\n  \/\/ aquí voy a iniciar algunas variables\n  var data, fecha, tipo, link, message, source, link, picture, likes, from;\n  var salida = \"\";\n  var contarsalidas = 0;\n  \n  \/\/ como en todos los otros ejemplos, se ejecuta un bucle que lee una cierta cantidad de entradas\n  for (var i = 0; i \u0026lt; json.data.length; i++) {\n    var post = \"\";\n\n    \/\/ guardo los datos de cada entrada en un array llamado data\n    data = json.data[i];\n    \/\/ si no hay nada, termino porque significa que hay menos de las que solicité leer\n    if (i==json.data.length) { break; }\n\n    fecha = data.created_time; \/\/ esta es la fecha de publicación\n    icon = data.icon; \/\/ este es el ícono que depende del tipo de publicación\n    tipo = data.type; \/\/ este dato nos indica qué tipo de publicación es\n\n    \/\/ esto nos dice la cantidad de \"Me Gusta\" que tiene\n    likes = 0;\n    if(data.likes) {likes = data.likes.count;}\n\n    \/\/ este dato, indica quién lo publicó\n    from = data.from.name;\n    \/\/ como sólo quiero ver las mias, si no lo son, las ignoraré\n    if(from!=\"\u003Cspan style=\"color: rgb(255, 255, 0); font-weight: bold;\"\u003Emi_nombre\u003C\/span\u003E\") {tipo=\"dummy\";}\n\n    \/\/ y ahora, según el tipo de publicación, leo los datos\n    switch(tipo) {\n\n    case \"photo\": \/\/ es del tipo Foto\n      picture = data.picture; \/\/ esto contiene la dirección URL de la miniatura\n      link = data.link; \/\/ esto contiene la dirección URL a la imagen\n      message = data.message; \/\/ esto contiene el texto que le hayamos agregado\n      \/\/ voy armando mi código HTML para mostrarla\n      post += \"\u0026lt;a target='_blank' href='\" + link + \"'\u0026gt;\u0026lt;img src='\" + picture + \"'\/\u0026gt;\u0026lt;\/a\u0026gt;\";\n      break;\n\n    case \"video\": \/\/ es del tipo Video\n      picture = data.picture; \/\/ esto contiene la dirección URL de la miniatura\n      link = data.link; \/\/ esto contiene la dirección URL del video\n                             \/\/ por ejemplo: http:\/\/www.youtube.com\/watch?v=XXXXXXXXXXX\n      source = data.source;  \/\/ esto contiene la dirección URL que usamos para insertarlo en una web\n                                       \/\/ por ejemplo: http:\/\/www.youtube.com\/v\/XXXXXXXXXXX\u0026amp;autoplay=1\n      \/\/ voy a usar una ventana modal para mostrar esos videos pero puede usarse cualquier otro método\n      \/\/ dependiendo del servicio, uso diferentes tamaños\n      if(source.indexOf(\"www.youtube.com\")\u003E0) {\n        post += \"\u0026lt;a class='lightwindow' params='lightwindow_width=640,lightwindow_height=390,lightwindow_loading_animation=true' title='' rel='' href='\" + source + \"'\u0026gt;\u0026lt;img src='\" + picture + \"'\/\u0026gt;\u0026lt;\/a\u0026gt;\";\n      } else if(source.indexOf(\"vimeo.com\")\u003E0) {\n        post += \"\u0026lt;a class='lightwindow' params='lightwindow_width=560,lightwindow_height=312,lightwindow_loading_animation=true' title='' rel='' href='\" + source + \"'\u0026gt;\u0026lt;img src='\" + picture + \"'\/\u0026gt;\u0026lt;\/a\u0026gt;\";\n      } else {\n        \/\/ cualquier otro es mostrado como un enlace\n        post += \"\u0026lt;a href='\" + link + \"'\u0026gt;\u0026lt;img src='\" + picture + \"'\/\u0026gt;\u0026lt;\/a\u0026gt;\";\n      }\n      break\n\n    case \"link\": \/\/ es del tipo Enlace\n      picture = data.picture; \/\/ esto contiene la dirección URL de la miniatura\n      link = data.link;  \/\/ esto contiene la dirección URL del enlace\n      \/\/ voy armando mi código HTML para mostrarlo\n      post += \"\u0026lt;a target='_blank' href='\" + link + \"'\u0026gt;\u0026lt;img src='\" + picture + \"'\/\u0026gt;\u0026lt;\/a\u0026gt;\";\n      break\n\n    default: \/\/ cualquier otro no lo voy a mostrar en este ejemplo\n      \/\/ hay varios; puede ser \"swf\", \"music\", \"status\", etc\n      break\n    }\n\n    \/\/ ahora, verifico que la publicación sea una del tipo que quiero mostrar\n    if(post!=\"\") {\n      \/\/ si es así, coloco los datos en un código HTML\n      salida += \"\u0026lt;div class='fbpost'\u0026gt;\";\n      salida += post;\n      salida += \"\u0026lt;img class='icon' src='\" + icon + \"' \/\u0026gt;\";\n      salida += \"\u0026lt;span class='like'\u0026gt;\" + likes + \"\u0026lt;\/span\u0026gt;\";\n      salida += \"\u0026lt;\/div\u0026gt;\";\n      \/\/ y voy contando hasta completar la cantidad que quiero mostrar\n      contarsalidas ++;\n      if(contarsalidas==\u003Cspan style=\"font-weight: bold;color: #FFFF00\"\u003E24\u003C\/span\u003E) { break; }\n    }\n  }\n\n  \/\/ terminado el bucle, escribiré los datos en un DIV al que le pondre un ID especifico\n  document.getElementById(\"resultados\").innerHTML = salida;\n}\n\/\/]]\u0026gt;\n\u0026lt;\/script\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003E¿Que faltaría para que funcionara? Agregar un DIV en alguna parte, allí donde quisiéramos que se nuestre e inmediatamente después, llamar a la función:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;div id='resultados'\u0026gt; C A R G A N D O \u0026lt;\/div\u0026gt;\n\n\u0026lt;script src=\"http:\/\/graph.facebook.com\/\u003Cspan style=\"color: #FFFF00\"\u003Emi_nombre\u003C\/span\u003E\/feed?limit=\u003Cspan style=\"color: #FFFF00\"\u003E20\u003C\/span\u003E\u0026amp;amp;callback=\u003Cspan style=\"color: #FFFF00\"\u003Eleerallfacebook\u003C\/span\u003E\"\u0026gt;\u0026lt;\/script\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003Edonde \u003Cspan style=\"font-weight: bold;\"\u003Emi_nombre\u003C\/span\u003E es el nombre (o número) de nuestro Perfil o Page y \u003Cspan style=\"font-weight: bold;\"\u003Elimit\u003C\/span\u003E es la cantidad de datos que leeremos.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nSi usamos CSS, podemos crear cualquier tipo de página:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;style\u0026gt;\n  .fbpost {\n    background-color: #444;\n    border: 1px solid #666;\n    display: block;\n    float:left;\n    height: 160px;\n    margin: 2px;\n    padding: 10px;\n    position: relative;\n    text-align: center;\n    vertical-align: middle;\n    width: 160px;\n  }\n  .like {\n    background: transparent url(\u003Cspan style=\"color: #FFFF00\"\u003EURL_imagenlike\u003C\/span\u003E) no-repeat left 50%;\n    bottom: 10px;\n    color: #9FAECC;\n    display: block;\n    font-size: 18px;\n    margin: 0 auto;\n    position: absolute;\n    right: 0;\n    width: 50px;\n  }\n  .icon {\n    bottom: 10px;\n    display: block;\n    position: absolute;\n    left: 10px;\n  }\n\u0026lt;\/style\u0026gt;\u003C\/pre\u003E\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/3707887208221566734\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2011\/02\/usar-json-para-leer-facebook-parte-1.html#comment-form","title":"3 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/3707887208221566734"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/3707887208221566734"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2011\/02\/usar-json-para-leer-facebook-parte-1.html","title":"Usar JSON para leer Facebook (Parte 1)"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/3.bp.blogspot.com\/_hljKDuw-cxQ\/TTM__t9_oZI\/AAAAAAAARf8\/j1xPDZX1qnY\/s72-c\/fbjson_2.png","height":"72","width":"72"},"thr$total":{"$t":"3"}},{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-2083433936369433421"},"published":{"$t":"2011-01-12T00:00:00.003-03:00"},"updated":{"$t":"2011-01-12T06:32:59.368-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Facebook"}],"title":{"type":"text","$t":"Plugins sociales aleatorios para Facebook"},"content":{"type":"html","$t":"\u003Cdiv style=\"text-align: justify;\"\u003ELos \u003Ca href=\"http:\/\/developers.facebook.com\/plugins\" target=\"_blank\" rel=\"nofollow\"\u003EPlug-ins sociales\u003C\/a\u003E son los que nos permiten agregar \u003Cspan style=\"font-style: italic;\"\u003Egadgets\u003C\/span\u003E de diferente tipo que vinculan un \u003Cspan style=\"font-style: italic;\"\u003Eblog\u003C\/span\u003E con Facebook, sin importar si el nuestro sitio posee o no posee una página o si tenemos una cuenta.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nDos de ellos son muy similares, los llamados \u003Ca href=\"http:\/\/developers.facebook.com\/docs\/reference\/plugins\/recommendations\" target=\"_blank\" rel=\"nofollow\"\u003ERecomendaciones\u003C\/a\u003E y \u003Ca href=\"http:\/\/developers.facebook.com\/docs\/reference\/plugins\/activity\" target=\"_blank\" rel=\"nofollow\"\u003EActividad Reciente\u003C\/a\u003E; el primero muestra a quienes han compartido entradas y el segundo, las últimas referencias encontradas. Ambos tienen la particularidad de ser visibles a todos los visitantes, sin importar si están están logueados o no.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nSe pueden agregar del mismo modo, basta ir a la página de desarrolladores, colocar la URL de nuestro blog y seleccionear las opciones disponibles que no son muchas; luego, hacemos click en Get Code y usamos uno de ellos.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nObviamente, como son muy similares, agregar ambos es un poco redundante pero, en \u003Ca href=\"http:\/\/www.labnol.org\/internet\/site-visitors-stay-longer\/18469\/\" target=\"_blank\"\u003Edigital inspiration\u003C\/a\u003E se les ha ocurrido una idea interesante: usar JavaScript para que se muestre uno de ellos de manera aleatoria así que, a veces veremos uno y a veces veremos otro.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nEs simple. Si los vamos a colocar en la \u003Cspan style=\"font-style: italic;\"\u003Esidebar\u003C\/span\u003E, copiamos los códigos de los IFRAMES que nos proporciona Facebook y luego, los ponemos de este modo:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;script type=\"text\/javascript\"\u0026gt;\nvar fb = Math.random();\nif (fb\u0026lt;.5){\n  document.write('\u003Cspan style=\"color: rgb(255, 255, 0);\"\u003E ... aqui ponemos uno de los iframes ... \u003C\/span\u003E');\n} else {\n  document.write('\u003Cspan style=\"color: rgb(255, 255, 0);\"\u003E ... aqui ponemos al otro iframe ... \u003C\/span\u003E');\n}\n\u0026lt;\/script\u0026gt;\u003C\/pre\u003E\u003Cbr \/\u003E\n\u003Ccenter\u003E\u003Cscript type=\"text\/javascript\"\u003E\nvar fb = Math.random();\nif (fb\u003C.5){\ndocument.write('\u003Ciframe src=\"http:\/\/www.facebook.com\/plugins\/recommendations.php?site=http%3A%2F%2Fvagabundia.blogspot.com%2F\u0026amp;width=450\u0026amp;height=300\u0026amp;header=true\u0026amp;colorscheme=dark\" scrolling=\"no\" frameborder=\"0\" style=\"border:none; overflow:hidden; width:450px; height:300px;\" allowTransparency=\"true\"\u003E\u003C\/iframe\u003E');\n} else {\ndocument.write('\u003Ciframe src=\"http:\/\/www.facebook.com\/plugins\/activity.php?site=http%3A%2F%2Fvagabundia.blogspot.com%2F\u0026amp;width=450\u0026amp;height=300\u0026amp;header=true\u0026amp;colorscheme=dark\u0026amp;recommendations=false\" scrolling=\"no\" frameborder=\"0\" style=\"border:none; overflow:hidden; width:450px; height:300px;\" allowTransparency=\"true\"\u003E\u003C\/iframe\u003E');\n}\n\u003C\/script\u003E\u003C\/center\u003E\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cdiv class=\"linkContraido\" onclick=\"SINO('iframesalea');\"\u003E\u003C\/div\u003E\u003Cpre id=\"iframesalea\" class=\"elementoOculto\"\u003E\u0026lt;script type=\"text\/javascript\"\u0026gt;\nvar fb = Math.random();\nif (fb\u0026lt;.5){\n  document.write('\u0026lt;iframe src=\"http:\/\/www.facebook.com\/plugins\/recommendations.php?site=http%3A%2F%2Fvagabundia.blogspot.com%2F\u0026amp;amp;width=450\u0026amp;amp;height=300\u0026amp;amp;header=true\u0026amp;amp;colorscheme=dark\" scrolling=\"no\" frameborder=\"0\" style=\"border:none; overflow:hidden; width:450px; height:300px;\" allowTransparency=\"true\"\u0026gt;\u0026lt;\/iframe\u0026gt;');\n} else {\n  document.write('\u0026lt;iframe src=\"http:\/\/www.facebook.com\/plugins\/activity.php?site=http%3A%2F%2Fvagabundia.blogspot.com%2F\u0026amp;amp;width=450\u0026amp;amp;height=300\u0026amp;amp;header=true\u0026amp;amp;colorscheme=dark\u0026amp;amp;recommendations=false\" scrolling=\"no\" frameborder=\"0\" style=\"border:none; overflow:hidden; width:450px; height:300px;\" allowTransparency=\"true\"\u0026gt;\u0026lt;\/iframe\u0026gt;');\n}\n\u0026lt;\/script\u0026gt;\u003C\/pre\u003E\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/2083433936369433421\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2011\/01\/plugins-sociales-aleatorios-para.html#comment-form","title":"5 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/2083433936369433421"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/2083433936369433421"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2011\/01\/plugins-sociales-aleatorios-para.html","title":"Plugins sociales aleatorios para Facebook"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"thr$total":{"$t":"5"}},{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-7185308123608761215"},"published":{"$t":"2010-12-06T00:00:00.001-03:00"},"updated":{"$t":"2010-12-06T00:00:02.969-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Facebook"}],"title":{"type":"text","$t":"El protocolo Open Graph en Blogger"},"content":{"type":"html","$t":"\u003Cdiv style=\"text-align: justify;\"\u003E\u003Cimg class=\"izquierda\" src=\"http:\/\/1.bp.blogspot.com\/_hljKDuw-cxQ\/TPnndlfkMQI\/AAAAAAAARQU\/rPjwFPis5aY\/s00\/opengraphlogo.png\" \/\u003EEl protocolo \u003Ca href=\"http:\/\/www.opengraphprotocol.org\/\" target=\"_blank\"\u003EOpen Graph\u003C\/a\u003E es el que permite integrar las páginas \u003Cspan style=\"font-style: italic;\"\u003Ewebs\u003C\/span\u003E con \u003Ca href=\"http:\/\/developers.facebook.com\/docs\/opengraph\" target=\"_blank\"\u003EFacebook\u003C\/a\u003E y los datos que les enviaremos cuando, por ejemplo, alguien usa el botón de \u003Ca href=\"http:\/\/vagabundia.blogspot.com\/2010\/04\/agregar-un-boton-de-me-gusta-para.html\" target=\"_blank\"\u003EMe Gusta\u003C\/a\u003E.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nPor lo que a nosotros nos puede interesar, basta saber que son etiquetas \u003Cspan style=\"font-weight: bold; color: rgb(51, 255, 51);\"\u003EMETA\u003C\/span\u003E que es posible agregar en nuestros sitios aunque en Blogger, hay que comprender (y aceptar) que hay limitaciones impuestas por el mismo servicio y los datos a los que nosotros podemos acceder por lo tanto, esto no será una panacea.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nPrimero que nada, yo recomendaría agregar dos atributos a la etiqueta \u003Cspan style=\"color: rgb(51, 255, 51); font-weight: bold;\"\u003EHTML\u003C\/span\u003E que es la tercera línea de cualquier plantilla; una nos permitirá \u003Ca href=\"http:\/\/vagabundia.blogspot.com\/2010\/08\/los-plugins-de-facebook-en-internet.html\" target=\"_blank\"\u003Eevitar problemas en Internet Explorer\u003C\/a\u003E y la otra ayudará a que este nuevo tipo de etiquetas sean interpretadas correctamente. En una plantilla común, deberia decir esto:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;html xmlns='http:\/\/www.w3.org\/1999\/xhtml' xmlns:b='http:\/\/www.google.com\/2005\/gml\/b' xmlns:data='http:\/\/www.google.com\/2005\/gml\/data' xmlns:expr='http:\/\/www.google.com\/2005\/gml\/expr' \u003Cspan style=\"color: rgb(204, 204, 255);\"\u003Exmlns:fb='http:\/\/www.facebook.com\/2008\/fbml' xmlns:og='http:\/\/opengraphprotocol.org\/schema\/\u003C\/span\u003E'\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003Ey en una de las nuevas plantillas, esto otro:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http:\/\/www.w3.org\/1999\/xhtml' xmlns:b='http:\/\/www.google.com\/2005\/gml\/b' xmlns:data='http:\/\/www.google.com\/2005\/gml\/data' x\u003Cspan style=\"color: rgb(204, 204, 255);\"\u003Emlns:expr='http:\/\/www.google.com\/2005\/gml\/expr' xmlns:fb='http:\/\/www.facebook.com\/2008\/fbml' xmlns:og='http:\/\/opengraphprotocol.org\/schema\/'\u003C\/span\u003E\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003EAlgunas de las nuevas etiquetas de Open Graph son similares a las que usamos habitulamente; por ejemplo, hay dos principales:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;meta property=\"og:title\" content='\u003Cspan style=\"color: rgb(255, 255, 0);\"\u003Enombre_del_sitio'\u003C\/span\u003E \/\u0026gt;\n\u0026lt;meta property='og:description' content='\u003Cspan style=\"color: rgb(255, 255, 0);\"\u003Edescripcion_del_sitio\u003C\/span\u003E'\/\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003E\u003Cspan style=\"font-weight: bold;\"\u003Eog:title \u003C\/span\u003Ees igual que la etiqueta \u0026lt;title\u0026gt;\u0026lt;\/title\u0026gt;\u003Cbr \/\u003E\n\u003Cspan style=\"font-weight: bold;\"\u003Eog:description \u003C\/span\u003Ees igual que la etiqueta  \u0026lt;meta name='description' content='...'\u0026gt;\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nEntonces, ¿es necesario duplicarlas?\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nNo, en absoluto, es indiferente salvo que quisieramos que en Facebook se viera algo distinto porque sólo hay que saber que Facebook da prioridad a esas etiquetas así que si hay dos, siempre usará la de Open Graph.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nPreguntan mucho algo que por ahora no tiene respuesta; la descripción que se muestra no es un resumen de las entradas y eso, que yo sepa, no tiene solución posible ya que no hay nada que podamos agregar para evitarlo salvo que escribamos una etiqueta META description para cada entrada. Tampoco sirve usar JavaScript porque no será reconocido. Lo más que podemos hacer es condicionarlo igual que hacemos con el resto:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;b:if cond='data:blog.pageType == \u0026amp;quot;item\u0026amp;quot;'\u0026gt;\n  \u0026lt;title\u0026gt;\u0026lt;data:blog.pageTitle\/\u0026gt;\u0026lt;\/title\u0026gt;\n  \u0026lt;meta property=\"og:title\" expr:content='data:blog.pageTitle' \/\u0026gt;\n  \u0026lt;meta expr:content='data:blog.pageName + \u0026amp;quot;\u003Cspan style=\"color: rgb(255, 255, 0);\"\u003E texto texto texto texto texto texto texto texto texto \u003C\/span\u003E\u0026amp;quot;' name='description'\/\u0026gt;\n  \u0026lt;meta expr:content='data:blog.pageName + \u0026amp;quot;\u003Cspan style=\"color: rgb(255, 255, 0);\"\u003E texto texto texto texto texto texto texto texto texto \u003C\/span\u003E\u0026amp;quot;' property='og:description'\/\u0026gt;\n\u0026lt;b:else\/\u0026gt;\n  \u0026lt;title\u0026gt;\u0026lt;data:blog.title\/\u0026gt;\u0026lt;\/title\u0026gt;\n  \u0026lt;meta property=\"og:title\" expr:content='data:blog.pageTitle' \/\u0026gt;\n  \u0026lt;meta name='description' content='\u003Cspan style=\"color: rgb(255, 255, 0);\"\u003E texto texto texto texto texto texto texto texto texto \u003C\/span\u003E' \/\u0026gt;\n  \u0026lt;meta property='og:description' content='\u003Cspan style=\"color: rgb(255, 255, 0);\"\u003E texto texto texto texto texto texto texto texto texto \u003C\/span\u003E' \/\u0026gt;\n\u0026lt;\/b:if\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003ECon\u003Cspan style=\"font-weight: bold;\"\u003E og:type \u003C\/span\u003Epodemos indicar el tipo de sitio; por ejemplo, que se trata de un blog:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;meta property='og:type' content='\u003Cspan style=\"color: rgb(255, 255, 0);\"\u003Eblog\u003C\/span\u003E' \/\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003ECon\u003Cspan style=\"font-weight: bold;\"\u003E og:url \u003C\/span\u003Eindicamos la dirección URL del sitio o de la página en si misma:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;meta property='og:url' expr:content='data:blog.url' \/\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003ECon\u003Cspan style=\"font-weight: bold;\"\u003E og:site_name \u003C\/span\u003Eindicamos el nobre de nuestro sitio:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;meta property='og:site_name' content='\u003Cspan style=\"color: rgb(255, 255, 0);\"\u003Emi_blog\u003C\/span\u003E' \/\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003EUna que puede ser útil es la que define la imagen a mostrar. Por defecto, Blogger agregar \u003Ca href=\"http:\/\/vagabundia.blogspot.com\/2010\/05\/el-include-all-head-content.html\" target=\"_blank\"\u003Euna etiqueta LINK\u003C\/a\u003E con la imagen principal de las entradas si es que hay una. Es una miniatura de 72x72 que se corresponde con la primera imagen que hayamos agregado al \u003Cspan style=\"font-style: italic;\"\u003Epost\u003C\/span\u003E; esto, funcionará generalmente bien excepto en el home u otros páginas de navegación en cuyo caso, la imagen a mostrar será ... cualquiera. Para evitarlo podemos usar una condición, indicando que si no es una entrada, la imagen sea la que nosotros decidamos:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;b:if cond='data:blog.pageType != \u0026amp;quot;item\u0026amp;quot;'\u0026gt;\n  \u0026lt;meta property='og:image' content='\u003Cspan style=\"color: rgb(255, 255, 0);\"\u003EURL_de_la_imagen\u003C\/span\u003E' \/\u0026gt;\n\u0026lt;\/b:if\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003EHay \u003Ca href=\"http:\/\/developers.facebook.com\/docs\/opengraph#extra-data\" target=\"_blank\"\u003Emás etiquetas\u003C\/a\u003E que tienen sentido cuando se trata de sitios comerciales, de venta de productos o servicios, por ejemplo, las etiquetas de  ubicación y de contacto: og:latitude, og:longitude, og:street-address, og:locality, og:region, og:postal-code, og:country-name, og:email, og:phone_number, og:fax_number, etc.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nUna buena forma de saber si hay algo que debemos corregir o agregar a nuestro \u003Cspan style=\"font-style: italic;\"\u003Eblog\u003C\/span\u003E, es utiizar un servicio de Facebook para Desarrolladores llamado \u003Ca href=\"http:\/\/developers.facebook.com\/tools\/lint\/?url=http%3A%2F%2Fvagabundia.blogspot.com%2F2010%2F12%2Fdos-packs-de-iconos-navidenos.html\" target=\"_blank\"\u003EURL Linter\u003C\/a\u003E. Si entramos y colocamos una dirección, ya sea del \u003Cspan style=\"font-style: italic;\"\u003Ehome\u003C\/span\u003E de nuestro sitio o de una entrada individual, veremos qué datos lee y de dónde son leidos.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nUn ejemplo del \u003Ca href=\"http:\/\/developers.facebook.com\/tools\/lint\/?url=http%3A%2F%2Fvagabundia.blogspot.com%2F\" target=\"_blank\"\u003Ehome\u003C\/a\u003E de este blog y un ejemplo de \u003Ca href=\"http:\/\/developers.facebook.com\/tools\/lint\/?url=http%3A%2F%2Fvagabundia.blogspot.com%2F2010%2F12%2Fdos-packs-de-iconos-navidenos.html\" target=\"_blank\"\u003Euna entrada cualquiera\u003C\/a\u003E.\u003C\/div\u003E\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/7185308123608761215\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2010\/12\/el-protocolo-open-graph-en-blogger.html#comment-form","title":"68 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/7185308123608761215"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/7185308123608761215"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2010\/12\/el-protocolo-open-graph-en-blogger.html","title":"El protocolo Open Graph en Blogger"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/1.bp.blogspot.com\/_hljKDuw-cxQ\/TPnndlfkMQI\/AAAAAAAARQU\/rPjwFPis5aY\/s72-c\/opengraphlogo.png","height":"72","width":"72"},"thr$total":{"$t":"68"}},{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-4472313487378587135"},"published":{"$t":"2010-11-12T00:00:00.000-03:00"},"updated":{"$t":"2017-03-22T02:09:12.380-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Facebook"}],"title":{"type":"text","$t":"Integrar los feeds de Facebook al blog"},"content":{"type":"html","$t":"\u003Cdiv style=\"text-align: justify;\"\u003EMás allá de usar el botón de \u003Ca href=\"http:\/\/vagabundia.blogspot.com\/2010\/04\/agregar-un-boton-de-me-gusta-para.html\" target=\"_blank\"\u003EMe Gusta\u003C\/a\u003E, insertar comentarios o \u003Cspan style=\"font-style: italic;\"\u003Egadgets\u003C\/span\u003E similares, Facebook no tiene demasiadas opciones de integración con un \u003Cspan style=\"font-style: italic;\"\u003Eblog\u003C\/span\u003E ya que es una red relativamente cerrada donde podemos enviar cosas pero no lo inverso; la mayor parte de su contenido sólo es visible dentro de la misma red.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nSin embargo, algunas de sus funciones poseen \u003Cspan style=\"font-style: italic;\"\u003Efeeds\u003C\/span\u003E que son públicos y por lo tanto, son accesibles desde el exterior; podemos suscribirnos a ellos y también podemos utilizarlos desde nuestros propios sitios tal como haríamos con cualquier otro.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nLamentablemente, desde Blogger, donde sólo podemos usar JavaScript, las posibilidades son limitadas a menos que se usen servicios externos como \u003Ca href=\"http:\/\/vagabundia.blogspot.com\/2008\/09\/feed2js-usar-los-feeds-para-crear-un.html\" target=\"_blank\"\u003EFeed2JS\u003C\/a\u003E o similares pero, aún así, algo podemos intentar.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nHay dos de esos \u003Cspan style=\"font-style: italic;\"\u003Efeeds\u003C\/span\u003E a los que podemos acceder, uno para los \u003Cspan style=\"font-weight: bold;\"\u003EEnlaces\u003C\/span\u003E que colocamos en un muro y otro para las \u003Cspan style=\"font-weight: bold;\"\u003ENotas\u003C\/span\u003E.\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Ctable style=\"margin:0 auto;border:none;width:100%\" cellspacing=\"0\" cellpadding=\"0\"\u003E\u003Ctr\u003E\u003Ctd align=\"center\" valign=\"middle\"\u003E\u003Cimg src=\"http:\/\/4.bp.blogspot.com\/_hljKDuw-cxQ\/TECkFGpFgbI\/AAAAAAAAP_M\/WSHTJDahEKE\/s00\/fbfeeds01.png\" \/\u003E\u003C\/td\u003E\u003Ctd align=\"center\" valign=\"middle\"\u003E\u003Cimg src=\"http:\/\/1.bp.blogspot.com\/_hljKDuw-cxQ\/TECkFU45sBI\/AAAAAAAAP_U\/uVsoV5G6-SA\/s00\/fbfeeds02.png\" \/\u003E\u003C\/td\u003E\u003C\/tr\u003E\n\u003C\/table\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003EPara el primero, vamos a \u003Cspan style=\"font-weight: bold;\"\u003EEnlaces\u003C\/span\u003E y allí, a la derecha, veremos que hay una opción con la cual podemos suscribirnos. Haciendo \u003Cspan style=\"font-style: italic;\"\u003Eclick\u003C\/span\u003E con el botón derecho del ratón, copiamos la dirección URL que será algo así:\u003C\/div\u003E\u003Cpre\u003Ehttp:\/\/apps.facebook.com\/feeds\/share_posts.php?id=\u003Cspan style=\"color: rgb(255, 255, 0);\"\u003EXXXXXXXXXX\u003C\/span\u003E\u0026amp;amp;viewer=\u003Cspan style=\"color: rgb(255, 255, 0);\"\u003EXXXXXXXXXX\u003C\/span\u003E\u0026amp;key=\u003Cspan style=\"color: rgb(255, 255, 0);\"\u003EXXXXXXXXXX\u003C\/span\u003E\u0026amp;amp;format=rss20\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003Ey, eventualmente, podemos modificarla un poco si es que no nos funciona:\u003C\/div\u003E\u003Cpre\u003Ehttp:\/\/apps.facebook.com\/feeds\/share_posts.php?id=\u003Cspan style=\"color: rgb(255, 255, 0);\"\u003EXXXXXXXXXX\u003C\/span\u003E\u0026amp;amp;viewer=\u003Cspan style=\"color: rgb(255, 255, 0);\"\u003EXXXXXXXXXX\u003C\/span\u003E\u0026amp;key=\u003Cspan style=\"color: rgb(255, 255, 0);\"\u003EXXXXXXXXXX\u003C\/span\u003E\u0026amp;amp;format=atom10\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003EExactamente lo mismo podemos hacer con el feed de las \u003Cspan style=\"font-weight: bold;\"\u003ENotas\u003C\/span\u003E; abrimos la pestaña y copiamos la URL que será similar a las anteriores:\u003C\/div\u003E\u003Cpre\u003Ehttp:\/\/www.facebook.com\/feeds\/notes.php?id=\u003Cspan style=\"color: rgb(255, 255, 0);\"\u003EXXXXXXXXXX\u003C\/span\u003E\u0026amp;amp;viewer=\u003Cspan style=\"color: rgb(255, 255, 0);\"\u003EXXXXXXXXXX\u003C\/span\u003E\u0026amp;key=\u003Cspan style=\"color: rgb(255, 255, 0);\"\u003EXXXXXXXXXX\u003C\/span\u003E\u0026amp;amp;format=rss20\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003E\u003Cimg style=\"margin-top:5px;\" class=\"izquierda\" src=\"http:\/\/3.bp.blogspot.com\/_hljKDuw-cxQ\/TECxYncyExI\/AAAAAAAAP_c\/1Lrw1M6a8-I\/s00\/fbfeeds03.png\" \/\u003ESea como sea, con esas URL ya  podríamos utilizar algunos de los gadgets sencillos de Blogger.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nEl  llamado \u003Cspan style=\"font-weight: bold;\"\u003EFeeds\u003C\/span\u003E nos mostrará una lista de lo último que hayamos hecho:\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003EEs posible que esa URL no sea aceptada o no sirva si se trata de páginas, en ese caso basta saber el ID que es un  número único  y podemos usar algo así:\u003C\/div\u003E\u003Cpre\u003Ehttp:\/\/www.facebook.com\/feeds\/page.php?format=atom10\u0026amp;id=\u003Cspan style=\"color: rgb(255, 255, 0);\"\u003EXXXXXXXXXX\u003C\/span\u003E\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003E\u003Cimg style=\"margin-top:15px;\" class=\"izquierda\" src=\"http:\/\/1.bp.blogspot.com\/_hljKDuw-cxQ\/TECxZDEGa8I\/AAAAAAAAP_k\/MHd3yKwseW4\/s00\/fbfeeds04.png\" \/\u003EOtra alternativa es el \u003Cspan style=\"font-style: italic;\"\u003Egadget\u003C\/span\u003E llamado \u003Cspan style=\"font-weight: bold;\"\u003ELista de blogs\u003C\/span\u003E con el que podemos hacer lo mismo pero, con una diferencia, allí, sólo se mostrará una sola entrada pero nos permite agregar varios \u003Cspan style=\"font-style: italic;\"\u003Efeeds\u003C\/span\u003E diferentes, tanto de \u003Cspan style=\"font-weight: bold;\"\u003EPerfiles\u003C\/span\u003E como de \u003Cspan style=\"font-weight: bold;\"\u003EPáginas\u003C\/span\u003E, sean nuestros o no ya que, salvo que el usuario los tenga como privados, todos esos \u003Cspan style=\"font-style: italic;\"\u003Efeeds\u003C\/span\u003E son públicos.\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/4472313487378587135\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2010\/11\/integrar-los-feeds-de-facebook-al-blog.html#comment-form","title":"2 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/4472313487378587135"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/4472313487378587135"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2010\/11\/integrar-los-feeds-de-facebook-al-blog.html","title":"Integrar los feeds de Facebook al blog"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/4.bp.blogspot.com\/_hljKDuw-cxQ\/TECkFGpFgbI\/AAAAAAAAP_M\/WSHTJDahEKE\/s72-c\/fbfeeds01.png","height":"72","width":"72"},"thr$total":{"$t":"2"}},{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-6803078334705179127"},"published":{"$t":"2010-10-30T00:00:00.003-03:00"},"updated":{"$t":"2010-10-30T00:00:02.671-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Facebook"}],"title":{"type":"text","$t":"Facebook Insights"},"content":{"type":"html","$t":"\u003Cdiv style=\"text-align: justify;\"\u003E\u003Ca href=\"http:\/\/www.facebook.com\/insights\/\" target=\"_blank\" rel=\"nofollow\"\u003EFacebook Insights\u003C\/a\u003E es la página de estadísticas donde Facebook nos da información sobre las páginas creadas pero también es posible utilizarlo para hacer un seguimiento de las interacciones con otros sitios.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nPara eso, debemos agregar el dominio a seguir y copiar y pegar la etiqueta META que nos dan, en alguna parte, del  head de nuestra plantilla:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;meta content='1234567890' property='fb:admin' \/\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003EUna vez verificado, podemos enlazar los reportes a nuestro Perfil o a cualquier página de Facebook que tengamos.\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: center;\"\u003E\u003Cimg src=\"http:\/\/4.bp.blogspot.com\/_hljKDuw-cxQ\/TKI33UO2sOI\/AAAAAAAAQWI\/3ReAYIhdg5k\/s00\/fbinsight.png\" \/\u003E\u003C\/div\u003E\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/6803078334705179127\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2010\/10\/facebook-insights.html#comment-form","title":"4 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/6803078334705179127"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/6803078334705179127"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2010\/10\/facebook-insights.html","title":"Facebook Insights"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/4.bp.blogspot.com\/_hljKDuw-cxQ\/TKI33UO2sOI\/AAAAAAAAQWI\/3ReAYIhdg5k\/s72-c\/fbinsight.png","height":"72","width":"72"},"thr$total":{"$t":"4"}},{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-4686124854884114114"},"published":{"$t":"2010-08-09T00:00:00.003-03:00"},"updated":{"$t":"2017-03-24T00:08:18.349-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Facebook"}],"title":{"type":"text","$t":"Los plugins de Facebook en Internet Explorer"},"content":{"type":"html","$t":"\u003Cdiv style=\"text-align: justify;\"\u003ECuando se utilizan los \u003Ca href=\"http:\/\/developers.facebook.com\/plugins\" target=\"_blank\"\u003Eplugins sociales de Facebook\u003C\/a\u003E, uno puede elegir entre agregarlos como IFRAMEs o como \u003Cspan style=\"font-style: italic;\"\u003Escripts\u003C\/span\u003E. Ellos recomiendan usar esto último ya que, con un cargador genérico, luego podemos agregar diferentes \u003Cspan style=\"font-style: italic;\"\u003Eplugins\u003C\/span\u003E con sólo una línea de código, usando el lenguaje propio de la red llamado \u003Ca href=\"http:\/\/developers.facebook.com\/docs\/reference\/javascript\/\" target=\"_blank\"\u003EXFBML\u003C\/a\u003E.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nAsi que ponemos esto después de \u003Cspan style=\"font-weight: bold; color: rgb(51, 255, 51);\"\u003E\u0026lt;body\u0026gt;\u003C\/span\u003E y nos olvidamos del asunto:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;div id='fb-root'\/\u0026gt;\n\u0026lt;script type='text\/javascript'\u0026gt;\n\/\/\u0026lt;![CDATA[\nwindow.fbAsyncInit = function() {\nFB.init({appId: '\u003Cspan style=\"color: rgb(255, 255, 0);\"\u003EPROFILE_ID\u003C\/span\u003E', status: true, cookie: true, xfbml: true});\n};\n(function() {\nvar e = document.createElement('script'); e.async = true;\ne.src = document.location.protocol +\n'\/\/connect.facebook.net\/es_ES\/all.js';\ndocument.getElementById('fb-root').appendChild(e);\n}());\n\/\/]]\u0026gt;\n\u0026lt;\/script\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003EAllí, cambiamos \u003Cspan style=\"font-weight: bold;\"\u003EPROFILE_ID\u003C\/span\u003E por el número de identificación de nuestra cuenta en Facebook y ya podemos agregar los \u003Cspan style=\"font-style: italic;\"\u003Eplugins\u003C\/span\u003E con sencillez:\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nEl botón \u003Ca href=\"http:\/\/vagabundia.blogspot.com\/2010\/04\/agregar-un-boton-de-me-gusta-para.html\" target=\"_blank\"\u003EMe Gusta\u003C\/a\u003E:\u003Cbr \/\u003E\n\u003Cspan style=\"margin-left:50px;;\"\u003E\u0026lt;fb:like\u0026gt;\u0026lt;\/fb:like\u0026gt;\u003C\/span\u003E\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Ca href=\"http:\/\/vagabundia.blogspot.com\/2010\/05\/agregar-el-like-box-de-facebook-blogger.html\" target=\"_blank\"\u003ELike-Box\u003C\/a\u003E:\u003Cbr \/\u003E\n\u003Cspan style=\"margin-left:50px;;\"\u003E\u0026lt;fb:like-box profile_id=\"\u003Cspan style=\"color: rgb(255, 255, 0);\"\u003EAPP_ID\u003C\/span\u003E\"\u0026gt;\u0026lt;\/fb:like-box\u0026gt;\u003C\/span\u003E\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Ca href=\"http:\/\/vagabundia.blogspot.com\/2010\/05\/agregar-el-comment-box-de-facebook.html\" target=\"_blank\"\u003EComment Box\u003C\/a\u003E:\u003Cbr \/\u003E\n\u003Cspan style=\"margin-left:50px;;\"\u003E\u0026lt;fb:comments xid=\"\u003Cspan style=\"color: rgb(255, 255, 0);\"\u003EAPP_ID\u003C\/span\u003E\"\u0026gt;\u0026lt;\/fb:comments\u0026gt;\u003C\/span\u003E\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nActivity Feeds:\u003Cbr \/\u003E\n\u003Cspan style=\"margin-left:50px;;\"\u003E\u0026lt;fb:activity site=\"\u003Cspan style=\"color: rgb(255, 255, 0);\"\u003EURL_elegida\u003C\/span\u003E\"\u0026gt;\u0026lt;\/fb:activity\u0026gt;\u003C\/span\u003E\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nRecommendations:\u003Cbr \/\u003E\n\u003Cspan style=\"margin-left:50px;;\"\u003E\u0026lt;fb:recommendations site=\"\u003Cspan style=\"color: rgb(255, 255, 0);\"\u003EURL_elegida\u003C\/span\u003E\"\u0026gt;\u0026lt;\/fb:recommendations\u0026gt;\u003C\/span\u003E\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Ca target=\"_blank\" href=\"http:\/\/developers.facebook.com\/docs\/reference\/plugins\/login\"\u003ELogin\u003C\/a\u003E:\u003Cbr \/\u003E\n\u003Cspan style=\"margin-left:50px;;\"\u003E\u0026lt;fb:login-button show-faces=\"true\"\u0026gt;\u0026lt;\/fb:login-button\u0026gt;\u003C\/span\u003E\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Ca target=\"_blank\" href=\"http:\/\/developers.facebook.com\/docs\/reference\/plugins\/live-stream\"\u003ELive Stream\u003C\/a\u003E:\u003Cbr \/\u003E\n\u003Cspan style=\"margin-left:50px;;\"\u003E\u0026lt;fb:live-stream event_app_id=\"\u003Cspan style=\"color: rgb(255, 255, 0);\"\u003EAPP_ID\u003C\/span\u003E\"\u0026gt;\u0026lt;\/fb:live-stream\u0026gt;\u003C\/span\u003E\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nSin embargo, si optamos por este método, suele surgir un problema sobre el que han consultado y que afecta a Internet Explorer. Es fácil de detectar, lo que ocurre es que, simplemente, no funciona y no se ve nada de nada.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nEn principio, esto es fácil de solucionar porque en los \u003Ca target=\"_blank\" href=\"http:\/\/forum.developers.facebook.com\/\"\u003Eforos de los desarrolladores de Facebook\u003C\/a\u003E ya se ha publicado la respuesta. Lo que debemos hacer es modificar una etiqueta de nuestra plantilla; un etiqueta que normalmente, jamás tocamos así que debemos hacerlo con prudencia: la etiqueta \u003Cspan style=\"font-weight: bold;color: #33FF33\"\u003EHTML\u003C\/span\u003E.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nEn una plantilla común, esta etiqueta dice esto:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;html xmlns='http:\/\/www.w3.org\/1999\/xhtml' xmlns:b='http:\/\/www.google.com\/2005\/gml\/b' xmlns:data='http:\/\/www.google.com\/2005\/gml\/data' xmlns:expr='http:\/\/www.google.com\/2005\/gml\/expr'\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003Een una de las nuevas plantillas dice esto otro:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http:\/\/www.w3.org\/1999\/xhtml' xmlns:b='http:\/\/www.google.com\/2005\/gml\/b' xmlns:data='http:\/\/www.google.com\/2005\/gml\/data' xmlns:expr='http:\/\/www.google.com\/2005\/gml\/expr'\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003EEn cualquiera de los dos casos, lo que debemos hacer es agregar lo siguiente:\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cspan style=\"color: rgb(204, 204, 255);\"\u003Exmlns:fb='http:\/\/www.facebook.com\/2008\/fbml'  xmlns:og='http:\/\/opengraph.org\/schema\/\u003C\/span\u003E\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nde tal forma que quedará así:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;html xmlns='http:\/\/www.w3.org\/1999\/xhtml'  xmlns:b='http:\/\/www.google.com\/2005\/gml\/b'  xmlns:data='http:\/\/www.google.com\/2005\/gml\/data'  xmlns:expr='http:\/\/www.google.com\/2005\/gml\/expr'  \u003Cspan style=\"color: rgb(204, 204, 255);\"\u003Exmlns:fb='http:\/\/www.facebook.com\/2008\/fbml'  xmlns:og='http:\/\/opengraph.org\/schema\/'\u003C\/span\u003E\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003Eo así:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http:\/\/www.w3.org\/1999\/xhtml'  xmlns:b='http:\/\/www.google.com\/2005\/gml\/b'  xmlns:data='http:\/\/www.google.com\/2005\/gml\/data'  xmlns:expr='http:\/\/www.google.com\/2005\/gml\/expr' \u003Cspan style=\"color: rgb(204, 204, 255);\"\u003Exmlns:fb='http:\/\/www.facebook.com\/2008\/fbml'  xmlns:og='http:\/\/opengraph.org\/schema\/'\u003C\/span\u003E\u0026gt;\u003C\/pre\u003E\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/4686124854884114114\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2010\/08\/los-plugins-de-facebook-en-internet.html#comment-form","title":"15 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/4686124854884114114"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/4686124854884114114"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2010\/08\/los-plugins-de-facebook-en-internet.html","title":"Los plugins de Facebook en Internet Explorer"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"thr$total":{"$t":"15"}},{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-5676887075071830277"},"published":{"$t":"2010-07-21T00:00:00.000-03:00"},"updated":{"$t":"2017-03-22T02:11:25.027-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Facebook"}],"title":{"type":"text","$t":"Agregar Activity Feed de Facebook a Blogger"},"content":{"type":"html","$t":"\u003Cdiv style=\"text-align: justify;\"\u003E\u003Ca href=\"http:\/\/developers.facebook.com\/docs\/reference\/plugins\/activity\" target=\"_blank\"\u003EActivity Feed\u003C\/a\u003E es otro de los  \u003Cspan style=\"font-style: italic;\"\u003Eplugins\u003C\/span\u003E sociales de Facebbok que podemos agregar en nuestro \u003Cspan style=\"font-style: italic;\"\u003Eblog\u003C\/span\u003E.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nLo que mostrará son las últimas referencias encontradas a un determinado sitio y será visible sin importar si los visitantes estan o no están logueados; si no lo están, se agregará automáticamente un botón para entrar. De alguna manera, es una forma de chequear quienes han marcado alguna entrada con \u003Ca href=\"http:\/\/vagabundia.blogspot.com\/2010\/04\/agregar-un-boton-de-me-gusta-para.html\" target=\"_blank\"\u003EMe Gusta\u003C\/a\u003E o enlazado nuestra página.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nPara usarlo, colocamos el \u003Cspan style=\"font-weight: bold;\"\u003EDominio\u003C\/span\u003E del sitio que queremos mostrar (por ejemlo, el de nuestro \u003Cspan style=\"font-style: italic;\"\u003Eblog\u003C\/span\u003E) y luego, como con todos los demás, seleccionamos ancho, alto y alguna de las opciones gráficas disponibles, la última de las cuales llamada \u003Cspan style=\"font-weight: bold;\"\u003ERecommendations\u003C\/span\u003E, tildamos o destildamos según nos interese que se muestre algo si es que no se encuentra nada del sitio que seleccionamos.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nEs importante establecer el dominio exacto porque el \u003Cspan style=\"font-style: italic;\"\u003Eplugin\u003C\/span\u003E permite rastrear dominios, subdominios o incluso páginas individuales.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nUna vez que decidimos todo eso y estamos satisfechos con el resultado que puede ser previsualizado constantemente, hacemos click en \u003Cspan style=\"font-weight: bold;\"\u003EGet Code\u003C\/span\u003E y allí se nos dan dos opciones: usar un IFRAME o un \u003Cspan style=\"font-style: italic;\"\u003Escript\u003C\/span\u003E. Si elegimos el primero de ellos, basta copiar y pegar el código donde se nos ocurra mostrarlo, por ejemplo, en un elemento HTML de la \u003Cspan style=\"font-style: italic;\"\u003Esidebar\u003C\/span\u003E.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nSi elegimos el \u003Cspan style=\"font-style: italic;\"\u003Escript\u003C\/span\u003E, debemos verificar si ya tenemos agregado el cargador genérico para todos los \u003Cspan style=\"font-style:italic;\"\u003Eplugins\u003C\/span\u003E; si no es así, agregamos lo siguiente justo después de \u003Cspan style=\"font-weight: bold; color: rgb(51, 255, 51);\"\u003E\u0026lt;body\u0026gt;\u003C\/span\u003E:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;div id='fb-root'\/\u0026gt;\n\u0026lt;script type='text\/javascript'\u0026gt;\n\/\/\u0026lt;![CDATA[\nwindow.fbAsyncInit = function() {\nFB.init({appId: '\u003Cspan style=\"color: rgb(255, 255, 0);\"\u003EPROFILE_ID\u003C\/span\u003E', status: true, cookie: true, xfbml: true});\n};\n(function() {\nvar e = document.createElement('script'); e.async = true;\ne.src = document.location.protocol +\n'\/\/connect.facebook.net\/en_US\/all.js';\ndocument.getElementById('fb-root').appendChild(e);\n}());\n\/\/]]\u0026gt;\n\u0026lt;\/script\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003EDonde reeemplazamos \u003Cspan style=\"font-weight: bold;\"\u003EPROFILE_ID\u003C\/span\u003E por el número que nos identifica en Facebook y que veremos en la URL de cualquiera de nuestras páginas.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nHecho eso, agregamos el \u003Cspan style=\"font-style: italic;\"\u003Eplugin\u003C\/span\u003E donde se nos de la gana y para eso, basta colocar el siguiente código básico:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;fb:activity site=\"\u003Cspan style=\"color: rgb(255, 255, 0);\"\u003EURL_elegida\u003C\/span\u003E\"\u0026gt;\u0026lt;\/fb:activity\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003Eo incluso, colocar las distintas opciones en el mismo código:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;fb:activity site=\"\u003Cspan style=\"color: rgb(255, 255, 0);\"\u003EURL_elegida\u003C\/span\u003E\"\u0026gt;\" width=\"400\" height=\"350\" header=\"false\" colorscheme=\"dark\" font=\"tahoma\" border_color=\"#FFF\" recommendations=\"false\"\u0026gt;\u0026lt;\/fb:activity\u0026gt;\u003C\/pre\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003EUna variante de este \u003Cspan style=\"font-style:italic;\"\u003Eplugin\u003C\/span\u003E es el llamado \u003Ca href=\"http:\/\/developers.facebook.com\/docs\/reference\/plugins\/recommendations\" target=\"_blank\"\u003ERecommendations\u003C\/a\u003E y la forma de insertarla es exactamente la misma.\u003C\/div\u003E\u003Cpre\u003E\u0026lt;fb:recommendations site=\"\u003Cspan style=\"color: rgb(255, 255, 0);\"\u003EURL_elegida\u003C\/span\u003E\"\u0026gt;\u0026lt;\/fb:recommendations\u0026gt;\u003C\/pre\u003E\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/5676887075071830277\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2010\/07\/agregar-activity-feed-de-facebook.html#comment-form","title":"9 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/5676887075071830277"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/5676887075071830277"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2010\/07\/agregar-activity-feed-de-facebook.html","title":"Agregar Activity Feed de Facebook a Blogger"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"thr$total":{"$t":"9"}},{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-207260723710555954"},"published":{"$t":"2010-05-20T00:00:00.000-03:00"},"updated":{"$t":"2010-05-20T00:13:30.035-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Blogger"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Facebook"}],"title":{"type":"text","$t":"El include all-head-content"},"content":{"type":"html","$t":"\u003Cdiv style=\"text-align: justify;\"\u003EA veces, tenemos la costumbre de eliminar cosas de la plantilla porque no sabemos que son, porque nos parece que \"sobran\" y el resultado final es impredecible. No hay problema, es parte del aprendizaje; puede hacerse siempre que probemos y luego, llegado el caso, sepamos como volver a poner todo en su lugar.\u003Cbr \/\u003E\u003Cbr \/\u003EUno de esos códigos \"perturbadores\" lo encontramos en el \u003Cspan style=\"font-weight: bold; color: rgb(51, 255, 51);\"\u003E\u0026lt;head\u0026gt;\u003C\/span\u003E, casi al inicio de la plantilla:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;b:include data='blog' name='all-head-content'\/\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003EMuchas consultas respecto a la imposibilidad de acceder a los \u003Cspan style=\"font-style: italic;\"\u003Efeeds\u003C\/span\u003E de nuestro sitio terminan resolviéndose cuando se agrega esa línea que hemos borrado o que la plantilla que descargamos no tenía ya que lo que hace es incluir una serie de etiquetas extras.\u003Cbr \/\u003E\u003Cbr \/\u003EEstas, especifican el tipo de codificación, un \u003Ca href=\"http:\/\/www.giantgeek.com\/blog\/?p=28\" target=\"_blank\"\u003Eviejo atributo de Microsoft\u003C\/a\u003E que no se utiliza y una \"marca\" que indica al creador de la página \u003Cspan style=\"font-style: italic;\"\u003Eweb\u003C\/span\u003E o sea, ellos:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;meta content='text\/html; charset=UTF-8' http-equiv='Content-Type'\/\u0026gt;\u003Cbr \/\u003E\u0026lt;meta content='true' name='MSSmartTagsPreventParsing'\/\u0026gt;\u003Cbr \/\u003E\u0026lt;meta content='blogger' name='generator'\/\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003ELuego, un \u003Ca href=\"http:\/\/vagabundia.blogspot.com\/2008\/11\/por-qu-se-han-perdido-algunos-favicons.html\" target=\"_blank\"\u003Efavicon por defecto\u003C\/a\u003E que es el que causa problemas si el nuestro lo colocamos antes de esa instrucción; una serie de etiquetas \u003Cspan style=\"color: rgb(51, 255, 51); font-weight: bold;\"\u003Elink\u003C\/span\u003E que asocian nuestro perfil, el atributo \u003Cspan style=\"font-style: italic;\"\u003Ecanonical\u003C\/span\u003E, etc:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;link href='http:\/\/www.blogger.com\/favicon.ico' rel='icon' type='image\/vnd.microsoft.icon'\/\u0026gt;\u003Cbr \/\u003E\u0026lt;link rel=\"me\" href=\"http:\/\/www.blogger.com\/profile\/\u003Cspan style=\"color: rgb(255, 255, 0);\"\u003Exxxxxxxxxx\u003C\/span\u003E\" \/\u0026gt;\u003Cbr \/\u003E\u0026lt;link rel=\"openid.server\" href=\"http:\/\/www.blogger.com\/openid-server.g\" \/\u0026gt;\u003Cbr \/\u003E\u0026lt;link href='\u003Cspan style=\"color: rgb(255, 255, 0);\"\u003Exxxxxxxxxx\u003C\/span\u003E' rel='canonical'\/\u0026gt;\u003Cbr \/\u003E\u0026lt;link rel=\"EditURI\" type=\"application\/rsd+xml\" title=\"RSD\" href=\"http:\/\/www.blogger.com\/rsd.g?blogID=\u003Cspan style=\"color: rgb(255, 255, 0);\"\u003Exxxxxxxxxx\u003C\/span\u003E\" \/\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003EY por últlimo, las etiquetas de los \u003Cspan style=\"font-style: italic;\"\u003Efeeds\u003C\/span\u003E:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;link rel=\"alternate\" type=\"application\/atom+xml\" title=\"\u003Cspan style=\"color: rgb(255, 255, 0);\"\u003EmiTitulo\u003C\/span\u003E - Atom\" href=\"http:\/\/\u003Cspan style=\"color: rgb(255, 255, 0);\"\u003Emiblog\u003C\/span\u003E.blogspot.com\/feeds\/posts\/default\" \/\u0026gt;\u003Cbr \/\u003E\u0026lt;link rel=\"alternate\" type=\"application\/rss+xml\" title=\"\u003Cspan style=\"color: rgb(255, 255, 0);\"\u003EmiTitulo\u003C\/span\u003E - RSS\" href=\"http:\/\/\u003Cspan style=\"color: rgb(255, 255, 0);\"\u003Emiblog\u003C\/span\u003E.blogspot.com\/feeds\/posts\/default?alt=rss\" \/\u0026gt;\u003Cbr \/\u003E\u0026lt;link rel=\"service.post\" type=\"application\/atom+xml\" title=\"\u003Cspan style=\"color: rgb(255, 255, 0);\"\u003EmiTitulo\u003C\/span\u003E - Atom\" href=\"http:\/\/www.blogger.com\/feeds\/\u003Cspan style=\"color: rgb(255, 255, 0);\"\u003Exxxxxxxxxx\u003C\/span\u003E\/posts\/default\" \/\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003ETodo eso va cambiando con el tiempo, es decir, Blogger va agregando o modificando algunas de esas etiquetas y si bien podemos colocarlas manualmente, lo mejor es dejar que ellos se encarguen de eso. Por ejemplo, recientemente, le han agregado una nueva etiqueta que podemos ver en las páginas individuales si es que en esa entrada hemos agregado alguna imagen:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;link rel=\"image_src\" href=\"\u003Cspan style=\"color: rgb(255, 255, 0);\"\u003EURL_imagen\u003C\/span\u003E\" \/\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003EEsta etiqueta es la que permite que, cuando alguien comparte un enlace de nuestro \u003Cspan style=\"font-style: italic;\"\u003Eblog\u003C\/span\u003E en Facebook, este, contenga la imagen en miniatura correpondiente a esa entrada:\u003C\/div\u003E\u003Cbr \/\u003E\u003Cdiv style=\"text-align: center;\"\u003E\u003Cimg src=\"http:\/\/2.bp.blogspot.com\/_hljKDuw-cxQ\/S9YITSjUIII\/AAAAAAAAPnw\/NXJUBcWBoOI\/s00\/linkimg.png\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Cdiv style=\"text-align: justify;\"\u003EEs que Facebook posee una serie de \u003Ca href=\"http:\/\/wiki.developers.facebook.com\/index.php\/Facebook_Share\/Specifying_Meta_Tags\" target=\"_blank\"\u003Eetiquetas específicas\u003C\/a\u003E que podríamos utilizar aunque en Blogger es casi imposible. Algunas, tales como las \u003Cspan style=\"font-style: italic;\"\u003Etitle\u003C\/span\u003E y \u003Cspan style=\"font-style: italic;\"\u003Edescription\u003C\/span\u003E son las estándares pero otras no; por ejemplo, hay una serie de etiquetas que permitirían definir el tipo de medio, algo muy interesante para compartir audio o video:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;meta name=\"medium\" content=\"\u003Cspan style=\"color: rgb(255, 255, 0);\"\u003Etipo_de_dato\u003C\/span\u003E\" \/\u0026gt;\u003Cbr \/\u003Edonde el \u003Cspan style=\"font-style:italic;font-weight: bold;\"\u003Etipo_de_dato\u003C\/span\u003E puede ser audio, image,video, news, blog o mult\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003EPor ejemplo, para compartir videos podríamos usar esto:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;link rel=\"video_src\" href=\"\u003Cspan style=\"color: rgb(255, 255, 0);\"\u003EURL_video\u003C\/span\u003E\"\/\u0026gt;\u003Cbr \/\u003E\u0026lt;link rel=\"image_src\" href=\"\u003Cspan style=\"color: rgb(255, 255, 0);\"\u003EURL_imagen\u003C\/span\u003E\" \/\u0026gt;\u003Cbr \/\u003E\u0026lt;meta name=\"video_type\" content=\"application\/x-shockwave-flash\" \/\u0026gt;\u003Cbr \/\u003E\u0026lt;meta name=\"video_height\" content=\"\u003Cspan style=\"color: rgb(255, 255, 0);\"\u003Evalor\u003C\/span\u003E\" \/\u0026gt;\u003Cbr \/\u003E\u0026lt;meta name=\"video_width\" content=\"\u003Cspan style=\"color: rgb(255, 255, 0);\"\u003Evalor\u003C\/span\u003E\" \/\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003ESi pudiéramos identificar los videos, incluso, sería posible \u003Ca href=\"http:\/\/www.facebook.com\/developers\/developer_help.php?category=Video%20Embed\" target=\"_blank\"\u003Esolicitar\u003C\/a\u003E que Facebok nos permitiera utilizar nuestro propio reproductor e incrustralo directamente tal como lo hacen sitios como YouTube.\u003Cbr \/\u003E\u003Cbr \/\u003ESueños al margen, el hecho que haya una etiqueta \u003Cspan style=\"color: rgb(51, 255, 51); font-weight: bold;\"\u003Elink\u003C\/span\u003E que contiene la URL de la primera imagen de las entradas podría llegar a ser útil aunque no sé muy bien para qué y eso queda librado a la imaginación de quien quiera explorarlo.\u003Cbr \/\u003E\u003Cbr \/\u003EUsando JavaScript es bastante sencillo leerla, por ejemplo, esta función devolverá la URL de la imagen o una cadena vacía.\u003C\/div\u003E\u003Cpre\u003Efunction getImageSRC()\u003Cbr \/\u003E  var laIMG = '';\u003Cbr \/\u003E  var links = document.getElementsByTagName('link');\u003Cbr \/\u003E  for ( var i = 0; i \u0026lt; links.length; i ++ ) {\u003Cbr \/\u003E    if(links[i].rel=='image_src') { laIMG = links[i].href; }\u003Cbr \/\u003E  }\u003Cbr \/\u003E  return laIMG;\u003Cbr \/\u003E}\u003C\/pre\u003E\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/207260723710555954\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2010\/05\/el-include-all-head-content.html#comment-form","title":"41 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/207260723710555954"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/207260723710555954"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2010\/05\/el-include-all-head-content.html","title":"El include all-head-content"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/2.bp.blogspot.com\/_hljKDuw-cxQ\/S9YITSjUIII\/AAAAAAAAPnw\/NXJUBcWBoOI\/s72-c\/linkimg.png","height":"72","width":"72"},"thr$total":{"$t":"41"}},{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-5143834386410554440"},"published":{"$t":"2010-05-12T00:00:00.001-03:00"},"updated":{"$t":"2013-01-10T16:37:05.119-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Facebook"}],"title":{"type":"text","$t":"Agregar el Like-Box de Facebook a Blogger"},"content":{"type":"html","$t":"\u003Cdiv style=\"text-align: justify;\"\u003E\u003Cimg style=\"padding-top:7px;\" src=\"http:\/\/2.bp.blogspot.com\/_hljKDuw-cxQ\/S-nGwh98dxI\/AAAAAAAAPso\/jwikAXvCK5I\/s00\/fbfan_0.png\" class=\"izquierda\" \/\u003EComo son varios los comentarios donde preguntan por la llamada \u003Ca target=\"_blank\" href=\"http:\/\/wiki.developers.facebook.com\/index.php\/Like_Box\"\u003ELike-Box de Facebook\u003C\/a\u003E, vamos a ver si podemos agregar una. Primero que nada, debemos hacer dos cosas, \u003Ca href=\"http:\/\/www.facebook.com\/pages\/create.php\" target=\"_blank\"\u003Ecrear la página\u003C\/a\u003E y leer el artículo de \u003Ca target=\"_blank\" href=\"http:\/\/elescaparatederosa.blogspot.com\/2009\/12\/crear-una-pagina-de-fans-en-facebook.html\"\u003EEl escaparate de Rosa \u003Cimg class=\"nores\" src=\"http:\/\/bp1.blogger.com\/_hljKDuw-cxQ\/SALbp5bqWjI\/AAAAAAAAFuU\/pyS4RCLaup0\/s00\/ImageROSA.gif\" \/\u003E\u003C\/a\u003E donde se explica todo paso a paso.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nLa aparición de los llamados \u003Ca target=\"_blank\" href=\"http:\/\/developers.facebook.com\/plugins\"\u003EPlugins Sociales\u003C\/a\u003E ha cambiado levemente la forma en que podemos conectarnos con Facebook y, de alguna manera, lo ha simplificado ya que nos permiten agregar cualquiera de ellos de manera directa y con una línea de código. Para usarlos, necesitamos saber la \u003Cspan style=\"font-weight: bold;\"\u003EID\u003C\/span\u003E de nuestra página que podemos ver al hacer \u003Cspan style=\"font-style: italic;\"\u003Eclick\u003C\/span\u003E en \u003Cspan style=\"font-weight: bold;\"\u003EEditar Página\u003C\/span\u003E:\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: center;\"\u003E\u003Cimg src=\"http:\/\/2.bp.blogspot.com\/_hljKDuw-cxQ\/S-nGw8Z_PZI\/AAAAAAAAPsw\/Tfeniioz3o0\/s00\/fbfan_1.png\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003Ehttp:\/\/www.facebook.com\/pages\/edit\/?id=\u003Cspan style=\"color: rgb(255, 255, 0);\"\u003EESTE_ES_EL_PROFILE_ID\u003C\/span\u003E\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nYa que estamos allí, seguimos.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nA la derecha, hacemos \u003Cspan style=\"font-style: italic;\"\u003Eclick\u003C\/span\u003E en \u003Cspan style=\"font-weight: bold;\"\u003EPromociona con un \"Me gusta\" en tu página\u003C\/span\u003E y nos encontraremos en el \u003Cspan style=\"font-style: italic;\"\u003Ewizard\u003C\/span\u003E del \u003Cspan style=\"font-style: italic;\"\u003Eplugin\u003C\/span\u003E:\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: center;\"\u003E\u003Cimg src=\"http:\/\/4.bp.blogspot.com\/_hljKDuw-cxQ\/S-nGxCoUf3I\/AAAAAAAAPs4\/B2eqsVkUa-c\/s00\/fbfan_2.png\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003EDonde tendremos que agregar el \u003Cspan style=\"font-weight: bold;\"\u003EID\u003C\/span\u003E y luego, seleccionar las diferentes opciones:\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: center;\"\u003E\u003Cimg src=\"http:\/\/3.bp.blogspot.com\/_hljKDuw-cxQ\/S-nGxf-maoI\/AAAAAAAAPtA\/-xfZEaDu2Qo\/s00\/fbfan_3.png\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003E\u003Cspan style=\"font-weight: bold;\"\u003EFacebook Page ID \u003C\/span\u003Ees el número identificatorio, también lo vemos al final de la URL de esa misma página\u003Cbr \/\u003E\n\u003Cspan style=\"font-weight: bold;\"\u003EWidth \u003C\/span\u003Ees el ancho en pixeles; puede ponerse cualquier valor\u003Cbr \/\u003E\n\u003Cspan style=\"font-weight: bold;\"\u003EConnections \u003C\/span\u003Ees la cantidad de avatares de usuarios a mostra (poner cero si no se quiere ninguno)\u003Cbr \/\u003E\n\u003Cspan style=\"font-weight: bold;\"\u003EStream \u003C\/span\u003Emuestra miniaturas de las entradas públicas de nuestra página de Facebook\u003Cbr \/\u003E\n\u003Cspan style=\"font-weight: bold;\"\u003EHeader \u003C\/span\u003Emuestra una barra 'Encuéntranos enFacebook'\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nCon cada detalle que modifiquemos podremos ver una previsualización del resultado. Una vez que nos hemos decidido, hacemos \u003Cspan style=\"font-style: italic;\"\u003Eclick\u003C\/span\u003E en \u003Cspan style=\"font-weight: bold;\"\u003EGet Code\u003C\/span\u003E donde nos darán dos opciones, usar un \u003Cspan style=\"font-weight: bold;\"\u003EIFRAME\u003C\/span\u003E o un código especial:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;fb:like-box profile_id=\"\u003Cspan style=\"color: #FFFF00\"\u003EPROFILE_ID\u003C\/span\u003E\"\u0026gt;\u0026lt;\/fb:like-box\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003ECódigo que luego, si queremos, podemos modificar manualmente; por ejemplo:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;fb:like-box profile_id=\"\u003Cspan style=\"color: #FFFF00\"\u003EPROFILE_ID\u003C\/span\u003E\" width=\"350\" connections=\"5\" stream=\"false\" header=\"false\"\u0026gt;\u0026lt;\/fb:like-box\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003ESi bien el \u003Cspan style=\"font-weight: bold;\"\u003EIFRAME\u003C\/span\u003E funcionará correctamente, me inclino por usar este otro código y para que este sea comprendido por nuestra \u003Cspan style=\"font-style: italic;\"\u003Eweb\u003C\/span\u003E, deberemos agregar un \u003Cspan style=\"font-style: italic;\"\u003Escript\u003C\/span\u003E justo después de \u0026lt;body\u0026gt;:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;div id='fb-root'\/\u0026gt;\n\u0026lt;script type='text\/javascript'\u0026gt;\n\/\/\u0026lt;![CDATA[\nwindow.fbAsyncInit = function() {\nFB.init({appId: '\u003Cspan style=\"color: rgb(255, 255, 0);\"\u003EPROFILE_ID\u003C\/span\u003E', status: true, cookie: true, xfbml: true});\n};\n(function() {\nvar e = document.createElement('script'); e.async = true;\ne.src = document.location.protocol +\n'\/\/connect.facebook.net\/es_ES\/all.js';\ndocument.getElementById('fb-root').appendChild(e);\n}());\n\/\/]]\u0026gt;\n\u0026lt;\/script\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003EPor último, en nuestra plantilla, agregaremos el código de Facebook, alli donde se nos ocurra mostrarlo, por ejemplo, en un elemento HTML en la \u003Cspan style=\"font-style: italic;\"\u003Esidebar\u003C\/span\u003E y, sugeriría, colocarlo dentro de un DIV:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;div id=\"fbfans\"\u0026gt;\n\u0026lt;fb:like-box profile_id=\"\u003Cspan style=\"color: rgb(255, 255, 0);\"\u003EPROFILE_ID\u003C\/span\u003E\"\u0026gt;\u0026lt;\/fb:like-box\u0026gt;\n\u0026lt;\/div\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003E¿De qué sirve ponerlos en un DIV? De ese modo, podemos controlar relativamente nuestro widget, sobre todo, el color de fondo que, por defecto es transparente:\u003C\/div\u003E\u003Cpre\u003E#fbfans {\nbackground-color: #FFF;\nborder: 10px solid #303941;\n}\u003C\/pre\u003E\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/5143834386410554440\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2010\/05\/agregar-el-like-box-de-facebook-blogger.html#comment-form","title":"89 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/5143834386410554440"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/5143834386410554440"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2010\/05\/agregar-el-like-box-de-facebook-blogger.html","title":"Agregar el Like-Box de Facebook a Blogger"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/2.bp.blogspot.com\/_hljKDuw-cxQ\/S-nGwh98dxI\/AAAAAAAAPso\/jwikAXvCK5I\/s72-c\/fbfan_0.png","height":"72","width":"72"},"thr$total":{"$t":"89"}},{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-4812732800645984622"},"published":{"$t":"2010-05-03T00:00:00.004-03:00"},"updated":{"$t":"2011-05-09T00:08:11.521-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Facebook"}],"title":{"type":"text","$t":"Agregar el Comment Box de Facebook a Blogger"},"content":{"type":"html","$t":"\u003Ca href=\"http:\/\/vagabundia.blogspot.com\/2011\/05\/el-nuevo-comment-box-de-facebook-en.html\" style=\"border-bottom:1px dotted #888;border-top:1px dotted #888;color:#EEE;display:block;font-family:Tahoma;font-size:32px;font-weight:normal;letter-spacing:10px;margin:30px 50px;text-align:center;\"\u003Ever actualización\u003C\/a\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003E\u003Cimg class=\"izquierda\" src=\"http:\/\/3.bp.blogspot.com\/_hljKDuw-cxQ\/S9tG7z-u1JI\/AAAAAAAAPp0\/R2j-paCY6JM\/s00\/fbcoms_1.png\" style=\"margin-top:10px\" \/\u003EAsí como es fácil colocar \u003Ca href=\"http:\/\/vagabundia.blogspot.com\/2010\/04\/agregar-un-boton-de-me-gusta-para.html\" target=\"_blank\"\u003Eel botón de Me Gusta de Facebook\u003C\/a\u003E en cualquier sitio \u003Cspan style=\"font-style: italic;\"\u003Eweb\u003C\/span\u003E,  agregar alguno de los otros \u003Cspan style=\"font-style: italic;\"\u003Eplugins\u003C\/span\u003E requiere un poco más de trabajo.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Ca href=\"http:\/\/www.enriquenava.com.ve\/\" target=\"_blank\"\u003EEnrique Nava\u003C\/a\u003E preguntaba específicamente por uno llamado \u003Ca href=\"http:\/\/developers.facebook.com\/blog\/post\/198\" target=\"_blank\"\u003EComments Box\u003C\/a\u003E que permite a los visitantes, comentar de manera directa desde nuestro \u003Cspan style=\"font-style: italic;\"\u003Eblog\u003C\/span\u003E.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nEl problema fundamental para incluir esto es que debemos crear una aplicación; debemos entrar en la página de \u003Ca href=\"http:\/\/www.facebook.com\/developers\/createapp.php\" target=\"_blank\"\u003EDesarrolladores de Facebook\u003C\/a\u003E y crearla,dándole un nombre cualquiera \u003Ca class=\"lightwindow\" params=\"lightwindow_width=763,lightwindow_height=265\" href=\"http:\/\/2.bp.blogspot.com\/_hljKDuw-cxQ\/S9tG7VNrj4I\/AAAAAAAAPpc\/UmCe2KCDfRE\/s00\/fbaplica_1.png\"\u003E\u003Cimg class=\"nores\" title=\"Ver captura\" src=\"http:\/\/bp2.blogger.com\/_hljKDuw-cxQ\/RkE2bscd1gI\/AAAAAAAAAV0\/eTXRH4GMY8g\/s320\/ImgExterna.gif\" \/\u003E\u003C\/a\u003E\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nHecho eso, la siguiente ventana puede resultar apabullante pero lo fundamental es copiar los dato que nos dan en la pestaña \u003Cspan style=\"font-weight: bold;\"\u003EBásico\u003C\/span\u003E \u003Ca class=\"lightwindow\" params=\"lightwindow_width=942,lightwindow_height=251\" href=\"http:\/\/2.bp.blogspot.com\/_hljKDuw-cxQ\/S9tG7jUCp0I\/AAAAAAAAPpk\/pPqSwhol8G8\/s00\/fbaplica_2.png\"\u003E\u003Cimg class=\"nores\" src=\"http:\/\/bp2.blogger.com\/_hljKDuw-cxQ\/RkE2bscd1gI\/AAAAAAAAAV0\/eTXRH4GMY8g\/s320\/ImgExterna.gif\" title=\"Ver captura\" \/\u003E\u003C\/a\u003E\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cspan style=\"margin-left: 50px;\"\u003E\u003Cspan style=\"font-weight:bold;\"\u003EId. de aplicación \u003C\/span\u003E\u003Cspan style=\"color: rgb(255, 255, 0);\"\u003Exxxxxxxxxx\u003C\/span\u003E\u003C\/span\u003E\u003Cbr \/\u003E\n\u003Cspan style=\"margin-left: 50px;\"\u003E\u003Cspan style=\"font-weight:bold;\"\u003EClave API \u003C\/span\u003E\u003Cspan style=\"color: rgb(255, 255, 0);\"\u003Exxxxxxxxxxxxxxxxxxxx\u003C\/span\u003E\u003C\/span\u003E\u003Cbr \/\u003E\n\u003Cspan style=\"margin-left: 50px;\"\u003E\u003Cspan style=\"font-weight:bold;\"\u003ESecreto \u003C\/span\u003E\u003Cspan style=\"color: rgb(255, 255, 0);\"\u003Exxxxxxxxxxxxxxxxxxxx\u003C\/span\u003E\u003C\/span\u003E\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nLuego, haremos \u003Cspan style=\"font-style: italic;\"\u003Eclick\u003C\/span\u003E en la pestaña \u003Cspan style=\"font-weight: bold;\"\u003EConnect\u003C\/span\u003E y allí, en el campo \u003Cspan style=\"font-weight: bold;\"\u003EConecte la pagina web\u003C\/span\u003E, colocaremos la URL de nuestro sitio \u003Ca class=\"lightwindow\" params=\"lightwindow_width=943,lightwindow_height=398\" href=\"http:\/\/4.bp.blogspot.com\/_hljKDuw-cxQ\/S9tG7oVUtYI\/AAAAAAAAPps\/Pjh7npJ8OSk\/s00\/fbaplica_3.png\"\u003E\u003Cimg class=\"nores\" src=\"http:\/\/bp2.blogger.com\/_hljKDuw-cxQ\/RkE2bscd1gI\/AAAAAAAAAV0\/eTXRH4GMY8g\/s320\/ImgExterna.gif\" title=\"Ver captura\" \/\u003E\u003C\/a\u003E\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nY eso es todo, en principio, no necesitaríamos hacer otra cosa que guardar y listo.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nPara agregar el \u003Cspan style=\"font-style: italic;\"\u003Eplugin\u003C\/span\u003E en Blogger, lo mejor es ir a la página de \u003Ca href=\"http:\/\/developers.facebook.com\/docs\/reference\/plugins\/comments\" target=\"_blank\"\u003EComments Box\u003C\/a\u003E donde podemos probar si funcionará. Allí, debemos pegar en el campo \u003Cspan style=\"font-style: italic;\"\u003EUnique ID\u003C\/span\u003E, la ID de la aplicación que hayamos creado y, si todo es correcto, inmediatamente veremos la previsualización a la derecha.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cspan style=\"font-weight: bold;\"\u003ENumber of Comments\u003C\/span\u003E permite configurar la cantidad de comentarios a mostrar (por defecto 10) o podemos poner cero si no queremos que se muestren y que el \u003Cspan style=\"font-style:italic;\"\u003Eplugin\u003C\/span\u003E sólo permita agregarlos.\u003Cbr \/\u003E\n\u003Cspan style=\"font-weight: bold;\"\u003EWidth \u003C\/span\u003Ees el ancho en pixeles (550 por defecto) y es bastante flexible ya que parece admitir cualquier valor.\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: center;\"\u003E\u003Cimg src=\"http:\/\/3.bp.blogspot.com\/_hljKDuw-cxQ\/S9tG8NKhJiI\/AAAAAAAAPp8\/ygnU4O_g5b8\/s00\/fbcoms_2.png\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003EDecidido esto, hacemos \u003Cspan style=\"font-style: italic;\"\u003Eclick\u003C\/span\u003E en \u003Cspan style=\"font-weight: bold;\"\u003EGet Code\u003C\/span\u003E que nos dira algo así:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;fb:comments xid=\"\u003Cspan style=\"color: rgb(255, 255, 0);\"\u003E000000000000000\u003C\/span\u003E\" width=\"\u003Cspan style=\"color: rgb(255, 255, 0);\"\u003Evalor\u003C\/span\u003E\"\u0026gt;\u0026lt;\/fb:comments\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003E¿Qué hacemos con eso? Vamos a la plantilla de Blogger e inmediatamente luego de \u003Cspan style=\"font-weight: bold; color: rgb(51, 255, 51);\"\u003E\u0026lt;body\u0026gt;\u003C\/span\u003E, agregaremos la llamada al \u003Ca href=\"http:\/\/developers.facebook.com\/docs\/reference\/javascript\/\" target=\"_blank\"\u003EGraph API de Facebook\u003C\/a\u003E que es la forma más simple de incluir cualquiera de los \u003Cspan style=\"font-style: italic;\"\u003Eplugins\u003C\/span\u003E. Es un \u003Cspan style=\"font-style: italic;\"\u003Escript\u003C\/span\u003E muy simple:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;div id='fb-root'\/\u0026gt;\n\u0026lt;script type='text\/javascript'\u0026gt;\n\/\/\u0026lt;![CDATA[\nwindow.fbAsyncInit = function() {\nFB.init({appId: 'your app id', status: true, cookie: true, xfbml: true});\n};\n(function() {\nvar e = document.createElement('script'); e.async = true;\ne.src = document.location.protocol + \n'\/\/connect.facebook.net\/en_US\/all.js';\ndocument.getElementById('fb-root').appendChild(e);\n}());\n\/\/]]\u0026gt;\n\u0026lt;\/script\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003EEso, nos permitirá agregar los distintos códigos de Facebook directamente en nuestro \u003Cspan style=\"font-style: italic;\"\u003Eblog\u003C\/span\u003E así que, por último colocaremos el código que nos dieron ahí donde se nos ocurra mostrar la caja de comentarios; por ejemplo, en un elemento HTML de la \u003Cspan style=\"font-style: italic;\"\u003Esidebar\u003C\/span\u003E:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;fb:comments numposts='10' width='550' xid='000000000000'\/\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003EO en el \u003Cspan style=\"font-style: italic;\"\u003Efooter\u003C\/span\u003E de las entradas y, en ese caso, sugeriría condicionarlo para que solo se vea en las páginas individuales:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;b:if cond='data:blog.pageType == \u0026amp;quot;item\u0026amp;quot;'\u0026gt;\n\u0026lt;fb:comments numposts='10' width='550' xid='000000000000'\/\u0026gt;\n\u0026lt;\/b:if\u0026gt;\u003C\/pre\u003E\u003Ca href=\"http:\/\/vagabundia.blogspot.com\/2011\/05\/el-nuevo-comment-box-de-facebook-en.html\" style=\"border-bottom:1px dotted #888;border-top:1px dotted #888;color:#EEE;display:block;font-family:Tahoma;font-size:32px;font-weight:normal;letter-spacing:10px;margin:30px 50px;text-align:center;\"\u003Ever actualización\u003C\/a\u003E\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/4812732800645984622\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2010\/05\/agregar-el-comment-box-de-facebook.html#comment-form","title":"168 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/4812732800645984622"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/4812732800645984622"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2010\/05\/agregar-el-comment-box-de-facebook.html","title":"Agregar el Comment Box de Facebook a Blogger"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/3.bp.blogspot.com\/_hljKDuw-cxQ\/S9tG7z-u1JI\/AAAAAAAAPp0\/R2j-paCY6JM\/s72-c\/fbcoms_1.png","height":"72","width":"72"},"thr$total":{"$t":"168"}},{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-6831095066914928041"},"published":{"$t":"2010-04-23T16:51:00.001-03:00"},"updated":{"$t":"2011-05-29T01:47:13.470-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Facebook"}],"title":{"type":"text","$t":"Agregar un botón de Me Gusta para Facebook"},"content":{"type":"html","$t":"\u003Cdiv style=\"text-align: justify;\"\u003E\u003Cimg class=\"izquierda\" src=\"http:\/\/2.bp.blogspot.com\/_hljKDuw-cxQ\/S9CnGXt67TI\/AAAAAAAAPhc\/FxQQu29EaZ4\/s00\/megustaFB.png\" \/\u003E\u003Cbr \/\u003E\nPara quienes usan Facebook, poco a poco están apareciendo métodos de integración sencilla con \u003Cspan style=\"font-style: italic;\"\u003Eblogs\u003C\/span\u003E y otros sitios \u003Cspan style=\"font-style: italic;\"\u003Eweb\u003C\/span\u003E ya que la empresa se encuentra en una franca pelea para controlar una parte del mercado que ahora tiene a Google como único dueño y señor.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nHasta hace poco, la mayoría de estas cosas eran bastante complejas pero han empezado a ofrecer algunos códigos más sencillos que pueden verse en su \u003Ca href=\"http:\/\/developers.facebook.com\/\" target=\"_blank\"\u003Epágina de desarrolladores\u003C\/a\u003E. Tal vez, los más interesantes son los \u003Ca href=\"http:\/\/developers.facebook.com\/plugins\" target=\"_blank\"\u003Eplugins sociales\u003C\/a\u003E y entre ellos, el famoso botón \u003Ca href=\"http:\/\/developers.facebook.com\/docs\/reference\/plugins\/like\" target=\"_blank\"\u003EMe Gusta\u003C\/a\u003E que permite a los usuarios, compartir contenido entre su sitio y la cuenta de Facebook de los visitantes.\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Ccenter\u003E\u003Ciframe src=\"http:\/\/www.facebook.com\/plugins\/like.php?href=http%3A%2F%2Fvagabundia.blogspot.com%2F\u0026amp;layout=standard\u0026amp;show_faces=true\u0026amp;width=530\u0026amp;height=60\u0026amp;action=like\u0026amp;font=tahoma\u0026amp;colorscheme=dark\" frameborder=\"0\" scrolling=\"no\" allowTransparency=\"true\" style=\"border:none; overflow:hidden; margin-top:20px;width: 530px; height: 60px;\"\u003E\u003C\/iframe\u003E\u003C\/center\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003ETodo lo que hace falta para agregarlo a Blogger es copiar y pegar el código que no es otra cosa que un \u003Cspan style=\"font-weight: bold; color: rgb(51, 204, 0);\"\u003Eiframe\u003C\/span\u003E:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;iframe expr:src='\u0026amp;quot;http:\/\/www.facebook.com\/plugins\/like.php?href=\u0026amp;quot; + data:post.url+ \u0026amp;quot;\u0026amp;amp;layout=button_count\u0026amp;amp;show_faces=false\u0026amp;amp;width=450\u0026amp;amp;height=60\u0026amp;amp;action=like\u0026amp;amp;font=tahoma\u0026amp;amp;colorscheme=dark\u0026amp;quot;' allowTransparency='true' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:60px'\/\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003ELo razonable , sería ponerlo en cada  entrada, junto con el resto de los íconos sociales, por ejemplo, en el \u003Cspan style=\"color: rgb(51, 255, 255); font-weight: bold;\"\u003Epost-footer\u003C\/span\u003E de las entradas.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nSi bien ese es el código por defecto, hay cosas que podemos personalizar y que son esos parámetros que se adosan a la dirección URL de nuestra entrada:\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cspan style=\"font-weight: bold;\"\u003E\u0026amp;amp;layout=standard\u003C\/span\u003E define el tipo de botón, puede cambiarse por \u003Cspan style=\"font-weight: bold;\"\u003Ebutton-count\u003C\/span\u003E para simplificarlo\u003Cbr \/\u003E\n\u003Cspan style=\"font-weight: bold;\"\u003E\u0026amp;amp;show-faces=true\u003C\/span\u003E muestra el avatar del usuario y puede eliminarse colocando \u003Cspan style=\"font-weight: bold;\"\u003Efalse\u003C\/span\u003E\u003Cbr \/\u003E\n\u003Cspan style=\"font-weight: bold;\"\u003E\u0026amp;amp;action=like\u003C\/span\u003E es el texto a mostrar y puede ser cambiado por \u003Cspan style=\"font-weight: bold;\"\u003Erecommend\u003C\/span\u003E\u003Cbr \/\u003E\n\u003Cspan style=\"font-weight: bold;\"\u003E\u0026amp;amp;colorscheme=light\u003C\/span\u003E es el diseño general, la otra opción es \u003Cspan style=\"font-weight: bold;\"\u003Edark\u003C\/span\u003E\u003Cbr \/\u003E\n\u003Cspan style=\"font-weight: bold;\"\u003E\u0026amp;amp;font=arial\u003C\/span\u003E es el tipo de fuente opcional y puede ser \u003Cspan style=\"font-weight: bold;\"\u003Etahoma\u003C\/span\u003E, \u003Cspan style=\"font-weight: bold;\"\u003Earial\u003C\/span\u003E, \u003Cspan style=\"font-weight: bold;\"\u003Elucida+grande\u003C\/span\u003E, \u003Cspan style=\"font-weight: bold;\"\u003Esegoe+ui\u003C\/span\u003E, \u003Cspan style=\"font-weight: bold;\"\u003Etrebuchet+ms\u003C\/span\u003E, \u003Cspan style=\"font-weight: bold;\"\u003Everdana\u003C\/span\u003E\u003Cbr \/\u003E\n\u003Cspan style=\"font-weight: bold;\"\u003E\u0026amp;amp;width=530\u003C\/span\u003E es el ancho total en pixeles (530 o 450)\u003Cbr \/\u003E\n\u003Cspan style=\"font-weight: bold;\"\u003E\u0026amp;amp;height=60\u003C\/span\u003E es la altura total en pixeles\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nSi queremos colocarlo en nuestro home (nada impide usarlo en cualquier página), el código es el mismo y basta establecer la URL correcta, reemplazando \u003Cspan style=\"font-weight: bold;\"\u003Edata:post.url\u003C\/span\u003E por la dirección de nuestro \u003Cspan style=\"font-style: italic;\"\u003Eblog\u003C\/span\u003E y en este caso, conviene que cambiemos los caracteres de dos puntos y barra por sus equivalentes \u003Cspan style=\"font-weight: bold;\"\u003E%3A\u003C\/span\u003E y \u003Cspan style=\"font-weight: bold;\"\u003E%2F\u003C\/span\u003E:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;iframe src=\"http:\/\/www.facebook.com\/plugins\/like.php?href=http%3A%2F%2Fvagabundia.blogspot.com%2F\u0026amp;amp;layout=button_count\u0026amp;amp;show_faces=false\u0026amp;amp;width=450\u0026amp;amp;height=60\u0026amp;amp;action=like\u0026amp;amp;font=tahoma\u0026amp;amp;colorscheme=dark\" allowTransparency=\"true\" frameborder=\"0\" scrolling=\"no\" style=\"border:none; overflow:hidden; width:450px; height:60px\"\u0026gt;\u0026lt;\/iframe\u0026gt;\u003C\/pre\u003E\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/6831095066914928041\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2010\/04\/agregar-un-boton-de-me-gusta-para.html#comment-form","title":"340 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/6831095066914928041"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/6831095066914928041"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2010\/04\/agregar-un-boton-de-me-gusta-para.html","title":"Agregar un botón de Me Gusta para Facebook"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/2.bp.blogspot.com\/_hljKDuw-cxQ\/S9CnGXt67TI\/AAAAAAAAPhc\/FxQQu29EaZ4\/s72-c\/megustaFB.png","height":"72","width":"72"},"thr$total":{"$t":"340"}},{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-6051153888720771924"},"published":{"$t":"2009-12-06T00:00:00.003-03:00"},"updated":{"$t":"2010-04-22T23:47:34.280-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Facebook"}],"title":{"type":"text","$t":"No te metas a mi Facebook"},"content":{"type":"html","$t":"\u003Cscript type='text\/javascript'\u003Eescribir_YTvideo(\"ASU0oadRcxs\",\" Estema\",\"No te metas a mii Facebook.\");\u003C\/script\u003E\u003Cbr \/\u003E\u003Cdiv style=\"text-align: center;\"\u003EPedro Villa y Josefina están prontos a ligar,\u003Cbr \/\u003Epero Laura la vecina los ha visto desertar,\u003Cbr \/\u003EJuan Ruja renuncia y lo hace publicar\u003Cbr \/\u003ELeonora su esposa pronto lo va a borrar.\u003Cbr \/\u003E\u003Cbr \/\u003EAmanda y Miranda acaban de rastrear\u003Cbr \/\u003Ea Lina su amiga que les dejó de hablar\u003Cbr \/\u003Etantean, husmean, no hay nada que indagar\u003Cbr \/\u003Ees fácil, muy fácil, sólo opriman pokear\u003Cbr \/\u003E\u003Cbr \/\u003ENo no te metas a mi Facebook, no te metas por favor\u003Cbr \/\u003Ecada vez que tengo un inbox me provoca poner close.\u003Cbr \/\u003ENo te metas a mi Facebook, no te metas por favor\u003Cbr \/\u003Ecuando escribas melodramas no me lo hagas por el wall.\u003Cbr \/\u003E\u003Cbr \/\u003EDe 620 amigos te relacionas con 10\u003Cbr \/\u003E90 desconocidos más 60 friend requests\u003Cbr \/\u003Ete buscan, rebuscan, pronto te van a ver\u003Cbr \/\u003Ejuntitos, toditos, apuéstenle a la red.\u003Cbr \/\u003E\u003Cbr \/\u003E200 eventos, a los que debes ir\u003Cbr \/\u003Eaceptas a todos aunque no quieras ir\u003Cbr \/\u003Etu vida es difícil, tienes que decidir\u003Cbr \/\u003Eaplica la regla, ponle a todos maybe.\u003Cbr \/\u003E\u003Cbr \/\u003ENo no te metas a mi Facebook, no te metas por favor\u003Cbr \/\u003Ecada vez que tengo un inbox me provoca poner close.\u003Cbr \/\u003ENo te metas a mi Facebook, no te metas por favor\u003Cbr \/\u003Ecuando escribas melodramas no me lo hagas por el wall.\u003Cbr \/\u003E\u003Cbr \/\u003ENo me digas que no tienes que ir al baño\u003Cbr \/\u003Ecuando, te miro te la pasas Facebookeando\u003Cbr \/\u003Ey luego suspiro, te vas a quedar un rato\u003Cbr \/\u003Ey mucho más.\u003Cbr \/\u003E\u003Cbr \/\u003ENo me digas que tienes otro cumpleaños,\u003Cbr \/\u003Edel que hace un año ni te hubieras enterado\u003Cbr \/\u003Eserá que ahora es moda festejar con los extraños\u003Cbr \/\u003Ey brindar por brindar\u003C\/div\u003E\u003Cbr \/\u003E\u003Cdiv class=\"referenciaExterna\"\u003E\u003Cspan\u003EREFERENCIAS:\u003C\/span\u003E\u003Ca href=\"http:\/\/www.myspace.com\/estemanmusic\" target=\"_blank\"\u003EEsteman Music\u003C\/a\u003E\u003C\/div\u003E\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/6051153888720771924\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2009\/12\/no-te-metas-mii-facebook.html#comment-form","title":"14 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/6051153888720771924"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/6051153888720771924"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2009\/12\/no-te-metas-mii-facebook.html","title":"No te metas a mi Facebook"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"thr$total":{"$t":"14"}},{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-3833885791065952061"},"published":{"$t":"2009-06-05T00:01:00.001-03:00"},"updated":{"$t":"2014-04-25T00:19:20.255-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Facebook"}],"title":{"type":"text","$t":"Incluir videos de Facebook en el blog"},"content":{"type":"html","$t":"\u003Cdiv style=\"text-align: justify;\"\u003EIncluir videos alojados en \u003Cspan style=\"color: rgb(255, 0, 0); font-weight: bold;\"\u003EFacebook\u003C\/span\u003E es sencillo, se requiere el mismo tipo de código que usamos para incrustar videos de cualquier otro servicio:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;object width=\"576\" height=\"432\" id=\"movie\" type=\"application\/x-shockwave-flash\" data=\"https:\/\/www.facebook.com\/video\/embed?video_id=\u003Cspan style=\"color: rgb(255, 255, 0);\"\u003EXXXXXXX\u003C\/span\u003E\"\u0026gt;\n\u0026lt;param value=\"https:\/\/www.facebook.com\/video\/embed?video_id=\u003Cspan style=\"color: rgb(255, 255, 0);\"\u003EXXXXXXX\u003C\/span\u003E\" name=\"movie\"\/\"\u0026gt;\n\u0026lt;param name=\"wmode\" value=\"transparent\" \/\u0026gt;\n\u0026lt;param name=\"allowfullscreen\" value=\"true\"\/\u0026gt;\n\u0026lt;\/object\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003ETodo eso escrito en una sola línea si lo queremos colocar en una entrada y, donde lo único que varia es el \u003Cspan style=\"color: rgb(51, 255, 51); font-weight: bold;\"\u003EID\u003C\/span\u003E del video, un sistema similar al que usa \u003Cspan style=\"color: rgb(255, 0, 0); font-weight: bold;\"\u003EYouTube\u003C\/span\u003E:\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cspan style=\"font-weight: bold;\"\u003Ehttps:\/\/www.facebook.com\/video\/embed?video_id=\u003Cspan style=\"color: rgb(255, 255, 0);\"\u003EXXXXXXX\u003C\/span\u003E\u003C\/span\u003E\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n¿Y cómo podemos saber el \u003Cspan style=\"color: rgb(51, 255, 51); font-weight: bold;\"\u003EID\u003C\/span\u003E del video? Entre otros modos, podemos usar una extensión de \u003Cspan style=\"color: rgb(255, 0, 0); font-weight: bold;\"\u003EFirefox\u003C\/span\u003E llamada \u003Ca href=\"https:\/\/addons.mozilla.org\/es-ES\/firefox\/addon\/9614\" target=\"_blank\"\u003EFacebook Video\u003C\/a\u003E que no sólo nos dá ese dato sino que además, permite descargarlos en nuestra \u003Cspan style=\"color: rgb(51, 204, 0);\"\u003EPC\u003C\/span\u003E, agregando una serie de enlaces y una guia con opciones de manera similar a lo que hacía un \u003Ca href=\"http:\/\/userscripts.org\/scripts\/show\/9789\" target=\"_blank\"\u003Escript de Greasemonkey\u003C\/a\u003E.\u003C\/div\u003E\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/3833885791065952061\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2009\/06\/incluir-videos-de-facebook-en-el-blog.html#comment-form","title":"13 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/3833885791065952061"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/3833885791065952061"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2009\/06\/incluir-videos-de-facebook-en-el-blog.html","title":"Incluir videos de Facebook en el blog"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"thr$total":{"$t":"13"}}]}});