g Feedly

Tutorial: Cómo implementar Facebook Connect en WordPress

22-IV-2009

tutorialLo primero y prin­ci­pal, obvi­a­mente, es ten­er una cuen­ta en Face­book. Si no mal lo ten­emos. xD A saber que real­mente esto no es la panacea, si no una fun­ción que puedes imple­men­tar en tu blog para crear una especie de red social lis­tan­do la gente que te lee. Pero real­mente no es así, porque muchos de los que te leen quizá pasen de vin­cu­lar su cuen­ta Face­book (por un moti­vo u otro) así que lo que ten­drás ahí serán los lec­tores con los que mejor te llevas muy prob­a­ble­mente.

A mí me costó hor­rores hac­er­lo, pero es bien fácil. Real­mente pasó que se me olvidó meter la direc­ción de mi blog donde debía meter­la para que fun­cionara cor­rec­ta­mente, y no hacía mas que decir que la apli­cación no esta­ba cor­rec­ta y no fun­ciona­ba. Me deses­peré. xD

Obtención del plugin necesario

Esto se puede hac­er a mano. De hecho, se facili­ta el códi­go para poder hac­er­lo. Pero pien­so que si lo ten­emos en for­ma de plu­g­in para Word­Press es una ton­tería com­pli­carnos la vida imple­men­tan­do un códi­go que a golpe de un click ya ten­dremos imple­men­ta­do. El plu­g­in en cuestión se lla­ma Face­book Con­nect (en un alarde de orig­i­nal­i­dad, vaya), así que lo descarg­amos, que seguro que nos hace fal­ta después.

Instalación

  • Lo primer debe­mos subir la car­pe­ta que hemos descar­ga­do con el plu­g­in a la car­pe­ta plu­g­ins que encon­traremos den­tro de wp-con­tent en la raíz de nue­stro Word­Press.
  • Aho­ra debe­mos entrar en la sec­ción de Desar­rol­ladores de Face­book, donde dare­mos autor­ización a la apli­cación Devel­op­ers para que podamos uti­lizarla.
  • Nos dirigi­mos a la zona donde podremos crear nues­tra apli­cación propia, le damos un títu­lo, mar­camos que esta­mos de acuer­do y le damos a guardar cam­bios. Aho­ra nos apare­cerá una ven­tana que dejare­mos abier­ta porque pasos más ade­lante la nece­sitare­mos.
  • Debe­mos acud­ir a la sec­ción de plu­g­ins de nue­stro Pan­el de Admin­is­tración y acti­var el plu­g­in Face­book Con­nec­tor.
  • Nos vamos a la con­fig­u­ración del plu­g­in en cuestión, que lo encon­traremos en la sec­ción de Opciones de nue­stro Pan­el de Admin­is­tración y allí se nos piden unos datos: clave API y número secre­to. Las encon­traremos en la pági­na de nues­tra apli­cación en Face­book que ante­ri­or­mente dejamos abier­ta.
  • El resto de opciones del plu­g­in son per­son­al­iz­ables por cada cual. Es indifer­ente en cuan­to a con­fig­u­ración. Podemos ele­gir qué tex­to se mostrará en Face­book cuan­do alguien comente en nue­stro blog y algu­nas cosas más. Cuan­do todo esté como quer­e­mos le damos a guardar con­fig­u­ración y el plu­g­in automáti­ca­mente tenien­do en cuen­ta los datos que le facili­ta­mos con­fig­u­rará parte de nues­tra apli­cación.
  • Des­de la ven­tana que dejamos abier­ta (recarg­amos por aque­l­lo de que el plu­g­in ha hecho cosas por sí solo, y si no nos car­gare­mos sus cam­bios) podemos con­fig­u­rar nues­tra apli­cación. Des­de el aparta­do bási­co podemos añadirle un logo, la descrip­ción, nue­stro correo, etc; podemos con­fig­u­rar todos los aparta­dos si nos apetece (yo no lo hice), pero lo más impor­tante es diri­girnos al aparta­do Con­nect y donde pone Con­nect URL escribir la direc­ción de nue­stro blog (es lo que dije al prin­ci­pio que se me olvidó).
  • Ya sola­mente que­da acud­ir a la sec­ción de wid­gets de nues­tra plan­til­la y añadir el wid­get del plu­g­in donde quer­amos que se visu­al­ice. Si nues­tra plan­til­la no tiene soporte para wid­gets (raro a estas alturas) podemos car­gar­lo man­ual­mente medi­ante este coman­do: [code lang=“php”][/code]

Nota final

Si todo ha sali­do bien no deberían haber ya más prob­le­mas. Todo debería fun­cionar cor­rec­ta­mente y visu­alizar­lo como aho­ra mis­mo se puede visu­alizar en este blog. Quizá con lo que más prob­le­mas puedas ten­er sea con el CSS a la hora de inte­grar el wid­get a tu plan­til­la, pero eso ya es teme aparte. A mí tam­bién me dio algo de dolor de cabeza. Si nece­si­tas ayu­da, ya sabes. Aunque no prome­to mucho en cuan­to a CSS se refiere ya que a mí, aunque acabe con­sigu­ién­do­lo, tam­bién me cues­ta.

¿Una ayudita?

Todo esto que ves es total­mente gratis para ti; dedi­co bue­na parte de mi tiem­po por el sim­ple plac­er de ayu­dar a gente como tú, para hac­er las cosas más fáciles a los demás. No obstante, de vez en cuan­do, viene muy bien una mues­tra de apoyo que me ani­me a seguir cre­an­do todo este tipo de con­tenido. Si te ha gus­ta­do esto, si te ha servi­do de ayu­da, si quieres colab­o­rar: puedes donar algo. Por pequeña can­ti­dad que sea lo agrade­ceré enorme­mente.

Tam­bién, si lo pre­fieres, puedes entrar en mi lista de deseos lit­er­aria en Ama­zon donde podrás enviarme alguno de los libros lis­ta­dos. Estaría encan­ta­do de hac­er­le un hue­co en mi casa a cualquiera de todos ellos.

¿Has encontrado algún error en el texto anterior? Me ayudarías mucho si lo reportaras.

39 comentarios

  1. Gra­cias por uti­lizar el plu­g­in y por el tuto­r­i­al!

    responder
    • Gra­cias a ti, Javier, que con el plu­g­in es todo mucho más fácil. Gra­cias por pasarte por aquí.

      responder
      • Gra­cias por el plu­g­in Javier Reyes… WiZ­aRd, bien, aho­ra hay nuevos datos en face­book para com­ple­tar en Con­nect… pero bueno…

        responder
      • Otro dati­to: Que plu­g­in usas para comen­tar­ios anida­dos?

        responder
        • Es una opción que lle­va ya imple­men­ta­da Word­Press 2.7 (den­tro del pan­el de admin­is­tración, en opciones de dis­cusión tienes la opción). Estoy preparan­do otro tuto­r­i­al para ver cómo adap­tar los comen­tar­ios de Word­Press 2.6 a 2.7 en el que tam­bién se incluye la fun­ción de comen­tar­ios anida­dos. Un salu­do.

          responder
  2. Joder, por fin!!! era eso lo que me falta­ba, lo que a ti, que no habí­a puesto lo de la opción de Con­nect y mi blog xDDD. Bueno, más o menos ya lo he puesto.

    Una cosa, ¿como le haces para que te sal­ga Edi­tar per­fil” en castel­lano? no con­si­go encon­trar esa parte.

    responder
    • Eso no se puede con­fig­u­rar des­de ningún pan­el de admin­is­tración, lo hice des­de el códi­go fuente. Lo tienes den­tro de la car­pe­ta del plu­g­in en el archi­vo fbconnect_widget.php, línea número 13.

      responder
  3. Ostia tio como te lo has cur­rao, eres mi ido­lo, aho­ra te pro­pon­go otro reto, con­seguir que el plu­g­in valide en W3C, je,je,je,je…

    PD: Este me esta costan­do al final quitaré el plu­g­in y lo hare a mano con la API 😛

    responder
    • Oñe, ¿tú quieres acabar con­mi­go o qué? jaja­ja
      Ya vi ya, que tras pasar el test W3C habían un hue­vo de fal­los. 🙁

      responder
  4. No hom­bre no, ni mucho menos, pero como yo no lo he con­segui­do a ver si tú… 😉

    responder
  5. cucha, yo no ten­go ese archi­vo!!

    responder
    • ya lo encon­tre xDD

      responder
      • Ya decía yo que no podía ser que no estu­viera si habías usa­do el mis­mo plu­g­in. 😛 Por cier­to, ¿has desha­bil­i­ta­do tú que sal­gan los avatares de los que te siguen? Es que no lo veo en tu blog.

        responder
  6. Ten­go prob­le­mas para poder imple­men­tar­lo. Ya hice todo al pie de la letra, pero al momen­to de pon­er Con­nect With Face­book, me pide los datos los intro­duz­co, car­ga nue­va­mente la pági­na y lam­en­ta­ble­mente no salen los datos de per­fil ni nada de eso, es decir dice otra vez Con­nect With Face­book.

    En resumen: No se conec­ta con Face­book, ojalá me puedas ayu­dar.

    Salu­dos!

    responder
    • No ha sali­do la lin­ea, es esta:

      <html xmlns=“http://www.w3.org/1999/xhtml” xmlns:fb=“http://www.facebook.com/2008/fbml”>

      responder
    • Si has hecho todo lo que dice JAvi cor­rec­ta­mente, entonces puede ser por que falte una línea en el head­er, conc­re­ta­mente esta:

      O por algún plu­g­in de Word­Press, desac­ti­va todos los plu­g­ins un momen­to y lo prue­bas.

      responder
    • Hola Miguel: yo casi me decli­no más porque sea cul­pa de algún plu­g­in que, por lo que sea, impi­de la cor­rec­ta fun­ción de Face­book Con­nect. El enlace de tu comen­tario es un enlace a tu per­fil de Face­book, cám­bi­ate­lo en el per­fil para el próx­i­mo comen­tario o indí­canos cuál es a ver si podemos saber algo más mirán­dote el head­er como dice InKiLi­No. Aunque por mi parte eso me lo hizo el plu­g­in automáti­ca­mente.

      Ya nos dices algo.
      Salu­dos.

      responder
  7. Ya cam­bié el enlace a mi sitio. Es Reflejados.cl .

    Pro­baré desac­ti­van­do algunos plu­g­ins para ver el fun­cionamien­to. Lo del head­er lo hice ape­nas instalé el Face­book Con­nec­tor.

    Salu­dos Pron­to les cuen­to.

    responder
  8. Desac­tivé todos los plu­g­ins y probé, pero no pasó nada tam­poco, ojala me ayu­den.

    Salu­dos.

    responder
    • Por lo que he proba­do, Miguel, ¿puede ser que ten­gas desha­bil­i­ta­do los reg­istros de nuevos usuar­ios? Parece que lo que fal­la es a la hora de hac­er un reg­istro de nue­vo usuario en tu blog.

      responder
  9. Great! Thank you very much! I always want­ed to write in my blog some­thing like that. Can I take part of your post to my site? Of course, I will add back­link? Regards

    responder
    • Yes, you can men­tion the arti­cle in your blog, remem­ber link to the orig­i­nal author and no prob­lem. Thanks!

      responder
  10. Feli­ci­dades por el tuto­r­i­al

    responder
  11. Yo ahi estu­dian­dome la Api y too el cirio, y solo habia que pon­er el URL Conect, que es lo que me ha hecho perder una hori­ta y media ahh­h­h­hh..

    Mil gra­cias moce­teeeeeeee!

    Mon­txi

    P.D.: Te pon­dré un enlace en el blog wiki que estoy preparan­do ;-). Gra­cias otra vez!

    responder
    • Jus­to es lo que me pasó a mí, y que tam­bién me dio un poco de que­bradero de cabeza has­ta que lo des­cubrí. xD

      responder
  12. Desac­tivé todos los plu­g­ins y probé, pero no pasó nada tam­poco, ojala me ayu­den.

    Salu­dos.

    Miguel pud­iste solu­cionarlo???? me pasa lo mis­mo y me lle­va un poco loco

    gra­cias

    responder
    • Hola Juan. Tal como le comen­té a él, que no llegó a con­tes­tarme, ¿puede que ten­gas inhab­il­i­ta­do el reg­istro de nuevos usuar­ios? Si no es así no se me ocurre qué pue­da ser. Podéis pro­bar no obstante pre­gun­tan­do en el blog de los creadores del plu­g­in.

      responder
  13. Si esta acti­va­do, creo que lo ten­go todo bien, pero la ver­dad me esa volvien­do loco. de todos mod­os gra­cias.

    responder
    • Vaya, pues lo sien­to entonces. Si están hechos todos los pasos tal cual indi­co debería fun­cionar. Si no fun­ciona no se me ocurre qué puede ser. Como dije, puedes pro­bar a pre­gun­tar en el blog de los autores, a ver si ellos tienen algu­na idea de qué pue­da ser. Suerte, Juan.

      responder
  14. Esta apli­ca­cion se puede uti­lizar en pag­i­nas com­er­ciales???????

    responder
    • Como te comen­té por Twit­ter, no conoz­co ningu­na restric­ción de ese tipo, así que sin prob­le­mas.

      responder
  15. Buenas,quisiera una ayu­di­ta con un prob­le­ma que me trae de cabeza, pero es que no se donde guardar la main web en word­press, porque se puede guardar en una car­pe­ta aparte, me gus­taria saber que pro­ced­imien­to se sigue, paso a paso, para apren­der­lo y comen­zar a ir más flu­i­da con el blog.
    Muchas gra­cias por lo que pue­da ayu­darme.
    Maria

    responder
  16. Hola he logra­do enlazar mi blog con face­book después de haber leí­do var­ios tutos, y eso que he proba­do todos, jaja­ja­ja… El chiste es que cuan­do ini­cio sesión con face­book des­de mi web, luego no puedo salir, supues­ta­mente cuan­do le das clic a salir deberías cer­rar la sesión pero esto no ocurre y si luego de var­ios inten­tos ocurre, me tira un error de servi­dor, no se a que se debe, tam­bién cuan­do ini­cio sesión con face­book ten­go que volver a recar­gar la pági­na para que me muestre la conex­ión real­iza­da. Y por cier­to como puedo hac­er para los temas que pub­li­co en mi pági­na se publiquen auto­mati­ca­mente en face­book sin que ten­ga que estar hacien­do clic en el botón com­par­tir… Muchas gra­cias…

    responder
    • ¿Uti­liza­ste el plu­g­in Face­book Con­nect para Word­Press para imple­men­tar­lo? Si es así, a mí no me dio ninguno de esos prob­le­mas que comen­tas; en ese caso, lo mejor que puedes hac­er es pasarte por la pági­na de los creadores del plu­g­in y comen­tar­les los errores que tienes.

      En caso de que sea una imple­mentación direc­ta, sin ningún plu­g­in, lamen­to no poder ayu­darte porque no lo miré nun­ca (habi­en­do plu­g­in es más fácil, jeje).

      Espero que se te solu­cione el prob­le­ma.

      Un salu­do.

      responder
  17. Bue­nas gra­cias por el tuto­r­i­al, pero he hecho todo y cuan­do inten­to loguearme me dice

    Error al car­gar la pági­na de De Pelícu­la

    De Pelícu­la está en con­struc­ción, por favor inten­ta mas tarde.”

    Con­fig­u­ra­tion errors:
    To fix this error, please set your Con­nect URL in the appli­ca­tion set­tings edi­tor. Once it has been set, users will be redi­rect­ed to that URL instead of this page after log­ging in.”

    Agrade­ce­ria su ayu­da al respec­to!
    Gra­cias 😀

    responder
  18. Creo que el tuto no esta com­ple­to, le fal­ta muchas cosas, tego la nue­va ver­sion 2.9 y mar­ca error fatal al acti­var­lo estaria mejor con ima­genes y mas datos por que mar­ca mucho errores, gra­cias de todos mod­os… salu­dos

    responder
    • Con el plu­g­in que comen­té yo, como ves, lo ten­go en Word­Press 2.9 sin dar ningún error. ¿Te da error al acti­var el plu­g­in? Si es así, en ese caso ten­drás que comen­társe­lo a los creadores del plu­g­in para que le pon­gan reme­dio; aunque ya te digo que a mí no me da prob­le­mas.

      Suerte.

      responder

Anímate, ¡deja un comentario!