{"id":245,"date":"2017-10-10T10:58:31","date_gmt":"2017-10-10T15:58:31","guid":{"rendered":"https:\/\/wjharil.com\/blog\/?p=245"},"modified":"2019-11-06T20:49:41","modified_gmt":"2019-11-07T01:49:41","slug":"wordpress-comentarios-facebook-sin-plugin","status":"publish","type":"post","link":"https:\/\/wjharil.com\/blog\/wordpress-comentarios-facebook-sin-plugin\/","title":{"rendered":"WordPress: Comentarios de Facebook sin plugin"},"content":{"rendered":"

Como desarrollador de plantillas para wordpress<\/strong>, prefiero no usar plugins<\/em> que lo sobrecarguen, por lo tanto me resulta m\u00e1s \u00fatil agregarlos f\u00e1cilmente y en este caso, les explicar\u00e9 c\u00f3mo agregar los comentarios de Facebook en WordPress sin usar ni un plugin<\/strong> (a excepci\u00f3n de una ruta javascript del mismo Facebook).<\/p>\n

Agregando la caja de comentarios paso a paso<\/h2>\n

Vamos a seguir unos sencillos pasos para a\u00f1adir esta opci\u00f3n de\u00a0comentarios a nuestro theme<\/em>. Lo haremos directamente desde nuestro panel de administraci\u00f3n de WordPress<\/em> (puedes hacerlo tambi\u00e9n por FTP).<\/p>\n

    \n
  1. Nos vamos a dirigir a Apareciencia -> Editor.<\/li>\n
  2. Ubicamos el archivo header.php (Cabecera del tema) al lado derecho de la pantalla y lo abrimos (presionando un suave click).<\/li>\n
  3. Buscamos la etiqueta <body …> y, posterior a ella pegamos el siguiente c\u00f3digo y guardamos:\n
    <div id=\"fb-root\"><\/div>\r\n<script>(function(d, s, id) {\r\nvar js, fjs = d.getElementsByTagName(s)[0];\r\nif (d.getElementById(id)) return;\r\njs = d.createElement(s); js.id = id;\r\njs.src = \"\/\/connect.facebook.net\/fr_FR\/sdk.js#xfbml=1&version=v2.9\";\r\nfjs.parentNode.insertBefore(js, fjs);\r\n}(document, 'script', 'facebook-jssdk'));<\/script>\r\n<\/pre>\n
    Lo que hace este c\u00f3digo, es conectarse al SDK de Facebook para incluir los c\u00f3digos necesarios y mostrarnos la hermosa cajita de comentarios.<\/p><\/li>\n
  4. Nos dirigimos al archivo comments.php (que tambi\u00e9n est\u00e1 a lado derecho de nuestro panel). Lo abrimos, hacemos un backup, borramos el contenido y a\u00f1adimos el siguiente c\u00f3digo y guardamos.\n
    <div class=\"fb-comments\" data-href=\"<?php the_permalink(); ?>\" data-width=\"100%\" data-numposts=\"10\" data-order-by=\"social\" data-colorscheme=\"light\"><\/div><\/pre>\n<\/li>\n
  5. Normalmente, en este archivo encontrar\u00e1s la secci\u00f3n de comentarios, pero te recomiendo borrar todo el contenido y dejar s\u00f3lo los contendedores (divs) para que mantenga los margenes \/ espacios, etc (si tienes alguna duda en este punto, h\u00e1zmela saber).<\/li>\n<\/ol>\n
    Con eso, ya tendr\u00edamos habilitado los comentarios de facebook en nuestras publicaciones y p\u00e1ginas<\/em>. \u00bfSencillo verdad?, \u00a1ahora a hacerlo!.<\/p>\n
    Actualizaci\u00f3n:<\/strong><\/p>\n
    Gracias a un comentario de una internauta (Mar\u00eda :)), descubrimos que en el actual edge (no en el que actualizar\u00e1 Microsoft, basado en Chromium) se ve mal cuadrado el comentario.<\/p>\n
    La soluci\u00f3n es a\u00f1adir este c\u00f3digo a tu hoja de estilos:<\/p>\n
    \/*Fb Comments Width Fix*\/\r\n.fb_iframe_widget_fluid_desktop, .fb_iframe_widget_fluid_desktop span, .fb_iframe_widget_fluid_desktop iframe {\r\nmax-width: 100% !important;\r\nwidth: 100% !important;\r\n}<\/pre>\n
     <\/p>\n","protected":false},"excerpt":{"rendered":"
    Como desarrollador de plantillas para wordpress, prefiero no usar plugins que lo sobrecarguen, por lo
    Continuar Leyendo...<\/a>","protected":false},"author":1,"featured_media":246,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[35],"tags":["php","wordpress"],"featured_image_src":"https:\/\/wjharil.com\/blog\/wp-content\/uploads\/2017\/10\/wordpress-comentarios-facebook.jpg","categorias":["Facebook","Fuera de tema","Recursos","Tutoriales"],"_links":{"self":[{"href":"https:\/\/wjharil.com\/blog\/wp-json\/wp\/v2\/posts\/245"}],"collection":[{"href":"https:\/\/wjharil.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wjharil.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wjharil.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wjharil.com\/blog\/wp-json\/wp\/v2\/comments?post=245"}],"version-history":[{"count":3,"href":"https:\/\/wjharil.com\/blog\/wp-json\/wp\/v2\/posts\/245\/revisions"}],"predecessor-version":[{"id":262,"href":"https:\/\/wjharil.com\/blog\/wp-json\/wp\/v2\/posts\/245\/revisions\/262"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wjharil.com\/blog\/wp-json\/wp\/v2\/media\/246"}],"wp:attachment":[{"href":"https:\/\/wjharil.com\/blog\/wp-json\/wp\/v2\/media?parent=245"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wjharil.com\/blog\/wp-json\/wp\/v2\/categories?post=245"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wjharil.com\/blog\/wp-json\/wp\/v2\/tags?post=245"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}