{"id":904,"date":"2017-07-18T23:34:56","date_gmt":"2017-07-19T05:34:56","guid":{"rendered":"http:\/\/aguilarsoluciones.com\/portal\/blogs\/?p=904"},"modified":"2020-07-22T18:38:26","modified_gmt":"2020-07-23T00:38:26","slug":"que-es-facebook-opengraph-y-como-integrarlo-en-tu-sitio-wordpress","status":"publish","type":"post","link":"https:\/\/aguilarsoluciones.com\/network\/que-es-facebook-opengraph-y-como-integrarlo-en-tu-sitio-wordpress\/","title":{"rendered":"Que es Facebook OpenGraph y como integrarlo en tu sitio web WordPress"},"content":{"rendered":"\n<blockquote class=\"wp-block-quote justify-text is-layout-flow wp-block-quote-is-layout-flow\"><p><strong><em>Opengraph es un nuevo protocolo que ayuda a Facebook a identificar correctamente los contenidos que se comparten en Facebook provenientes de otros sitios web. Hoy te hablamos como ese protocolo beneficia a tu website<\/em><\/strong><\/p><\/blockquote>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"justify-text\">Si tienes un blog con WordPressy has compartido una entrada en Facebook habr\u00e1s notado que no muestra siempre la imagen correcta, la que deber\u00eda ser; con frecuencia la imagen destacada de la entrada. Adem\u00e1s, es posible que esto no s\u00f3lo te pase con la imagen, sino que tambi\u00e9n lo haga con el t\u00edtulo, la descripci\u00f3n o que, cuando alguien pulse el bot\u00f3n de \u201cme gusta\u201d, no muestre el thumbnail correcto<\/p>\n\n\n\n<p class=\"justify-text\">Si te ha pasado esto, en esta entrada aprender\u00e1s lo justo para hacer que Facebook reconozca bien los datos de las entradas de tu WordPress. Esto es algo que no todos los temas hacen bien<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u00bfQu\u00e9 es Open Graph?<\/h2>\n\n\n\n<p class=\"justify-text\">Open Graph es un protocolo que cre\u00f3 Facebook para ayudar a compartir contenido con amigos y admiradores de los sitios web. Esto, sea quien sea quien de a \u201cme gusta\u201d, har\u00e1 que tu contenido sea mostrado en su tabl\u00f3n (o muro). As\u00ed que, para evitar el fallo que mencionaba antes de los thumbnails, t\u00edtulos, descripciones\u2026 tienes que hacer unas mejoras a tu sitio para que Facebook sepa qu\u00e9 cosa corresponde con qu\u00e9<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Instalaci\u00f3n mediante plugin<\/h2>\n\n\n\n<p class=\"justify-text\">Si tus conocimientos de desarrollo son bajos, puedes instalar un plugin que realice estos cambios por t\u00ed. Yo algunas veces he recomendado <a href=\"http:\/\/wordpress.org\/plugins\/wp-facebook-open-graph-protocol\/\">WP Facebook Open Graph<\/a> aunque, como todo, es cuesti\u00f3n de gustos<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Instalaci\u00f3n manual<\/h2>\n\n\n\n<p class=\"justify-text\">Si, por otro lado, quieres hacerlo de forma manual (m\u00e1s \u00f3ptimo, sin plugins mejor), tendremos que agregar el siguiente contenido al fichero <em>functions.php<\/em> de nuestro tema:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&#91;php]\n&lt;pre class=\"php\">\/\/Agregamos Open Graph en los Language Attributes\nfunction add_opengraph_doctype( $output ) {\nreturn $output . ' xmlns:og=\"http:\/\/opengraphprotocol.org\/schema\/\" xmlns:fb=\"http:\/\/www.facebook.com\/2008\/fbml\"';\n}\nadd_filter('language_attributes', 'add_opengraph_doctype');\n\n\/\/A\u00f1adimos la informaci\u00f3n Open Graph\nfunction insert_fb_in_head() {\nglobal $post;\nif ( !is_singular()) \/\/Si no es un post o p\u00e1gina\nreturn;\necho '&lt;meta property=\"fb:admins\" content=\"EL ID DE TU USUARIO\"\/>';\necho '&lt;meta property=\"og:title\" content=\"' . get_the_title() . '\"\/>';\necho '&lt;meta property=\"og:type\" content=\"article\"\/>';\necho '&lt;meta property=\"og:url\" content=\"' . get_permalink() . '\"\/>';\necho '&lt;meta property=\"og:site_name\" content=\"AQUI VA EL NOMBRE DE TU SITIO WEB\"\/>';\nif(!has_post_thumbnail( $post->ID )) { \/\/La entrada no tiene imagen destacada, utiliza una imagen predeterminada\n$default_image=\"http:\/\/ejemplo.com\/image.jpg\"; \/\/Aqu\u00ed tienes que poner la ruta de la imagen prefeterminada que se mostrar\u00e1.\necho '&lt;meta property=\"og:image\" content=\"' . $default_image . '\"\/>';\n}\nelse{\n$thumbnail_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'medium' );\necho '&lt;meta property=\"og:image\" content=\"' . esc_attr( $thumbnail_src&#91;0] ) . '\"\/>';\n}\necho \"\n\";\n}\nadd_action( 'wp_head', 'insert_fb_in_head', 5 );\n&#91;\/php]<\/code><\/pre>\n\n\n\n<p class=\"justify-text\">Por supuesto, no olvides modificar el ID de tu usuario, el nombre de tu sitio web o la URL de la imagen predeterminada<\/p>\n\n\n\n<p class=\"justify-text\">Espero que sea de ayuda, \u00a1si es as\u00ed no dudes en compartirlo!<\/p>\n","protected":false},"excerpt":{"rendered":"<div class=\"mh-excerpt\"><p>Opengraph es un nuevo protocolo que ayuda a Facebook a identificar correctamente los contenidos que se comparten en Facebook provenientes de otros sitios web. Hoy te hablamos como ese protocolo beneficia a tu website<\/p>\n<\/div>","protected":false},"author":2,"featured_media":2408,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"csbAdvScrollBarCursor":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[6,13,26,31,32],"tags":[177,318],"class_list":["post-904","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-diseno-web","category-general","category-redes-sociales","category-tecnologia","category-tips","tag-facebook","tag-opengraph"],"jetpack_featured_media_url":"https:\/\/aguilarsoluciones.com\/network\/wp-content\/uploads\/post_header_fb_opengraph_wordpress-min-777x437-1.png","jetpack_sharing_enabled":true,"jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/aguilarsoluciones.com\/network\/wp-json\/wp\/v2\/posts\/904","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/aguilarsoluciones.com\/network\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/aguilarsoluciones.com\/network\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/aguilarsoluciones.com\/network\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/aguilarsoluciones.com\/network\/wp-json\/wp\/v2\/comments?post=904"}],"version-history":[{"count":2,"href":"https:\/\/aguilarsoluciones.com\/network\/wp-json\/wp\/v2\/posts\/904\/revisions"}],"predecessor-version":[{"id":2409,"href":"https:\/\/aguilarsoluciones.com\/network\/wp-json\/wp\/v2\/posts\/904\/revisions\/2409"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/aguilarsoluciones.com\/network\/wp-json\/wp\/v2\/media\/2408"}],"wp:attachment":[{"href":"https:\/\/aguilarsoluciones.com\/network\/wp-json\/wp\/v2\/media?parent=904"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/aguilarsoluciones.com\/network\/wp-json\/wp\/v2\/categories?post=904"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/aguilarsoluciones.com\/network\/wp-json\/wp\/v2\/tags?post=904"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}