{"id":11452,"date":"2018-09-21T16:00:17","date_gmt":"2018-09-21T19:00:17","guid":{"rendered":"https:\/\/king.host\/wiki\/?post_type=article&#038;p=11452"},"modified":"2021-12-04T15:22:06","modified_gmt":"2021-12-04T17:22:06","slug":"wordpress-imagem-do-post-facebook","status":"publish","type":"article","link":"https:\/\/king.host\/wiki\/artigo\/wordpress-imagem-do-post-facebook\/","title":{"rendered":"WordPress &#8211; Imagem do post ao compartilhar no Facebook"},"content":{"rendered":"\n<p>Voc\u00ea est\u00e1 tendo algum problema ao compartilhar uma p\u00e1gina do seu site WordPress no Facebook e n\u00e3o aparecer a imagem do post? Geralmente isso est\u00e1 atrelado ao template que voc\u00ea est\u00e1 utilizando.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a class=\"deve-redirecionar\" href=\"https:\/\/king.host\/hospedagem-wordpress?utm_source=wiki&amp;utm_medium=banner&amp;utm_term=wp-banner-top&amp;utm_content=wordpress-imagem-do-post-facebook&amp;utm_campaign=oferta-produto\" target=\"_blank\" v-on:click=\"toggle_modal\" rel=\"noopener\"><img data-original=\"https:\/\/king.host\/wiki\/wp-content\/uploads\/2021\/10\/WP-970x250-1-960x247.png\" alt=\"Plataforma completa para um site WordPress.\" class=\"wp-image-22356\"\/><\/a><\/figure>\n\n\n\n<p>Para que um post de seu site WordPress, quando compartilhado no Facebook tenha sempre uma imagem relacionada, \u00e9 crucial que o tema utilize o atributo <strong>og:image<\/strong>. Ele define que a imagem vai ser tratada e ser\u00e1 usada como <em>thumbnail<\/em> do link compartilhado. Caso o post em quest\u00e3o tenha uma imagem destacada, o Facebook somente exibir\u00e1 essa imagem caso o <em>theme<\/em> possua suporte a isso.<\/p>\n\n\n\n<p>Veja um exemplo onde a imagem do post tamb\u00e9m \u00e9 exibida:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/king.host\/wiki\/wp-content\/uploads\/2018\/09\/comp-link-facebook.png\" v-on:click=\"toggle_modal\"><img decoding=\"async\" data-src=\"https:\/\/king.host\/wiki\/wp-content\/uploads\/2018\/09\/comp-link-facebook.png\" alt=\"Imagem do post no Facebook\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" class=\"lazyload\" style=\"--smush-placeholder-width: 513px; --smush-placeholder-aspect-ratio: 513\/498;\" \/><noscript><img decoding=\"async\" src=\"https:\/\/king.host\/wiki\/wp-content\/uploads\/2018\/09\/comp-link-facebook.png\" alt=\"Imagem do post no Facebook\"\/><\/noscript><\/a><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Onde_posso_inserir_essa_imagem_durante_a_edicao_do_post\"><\/span>Onde posso inserir essa imagem durante a edi\u00e7\u00e3o do post?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Dentro da edi\u00e7\u00e3o do post, na metabox <strong>Imagem destacada<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/king.host\/wiki\/wp-content\/uploads\/2018\/09\/imagem-destacada.png\" v-on:click=\"toggle_modal\"><img decoding=\"async\" data-src=\"https:\/\/king.host\/wiki\/wp-content\/uploads\/2018\/09\/imagem-destacada.png\" alt=\"Op\u00e7\u00e3o de imagem destacada (featured image)\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" class=\"lazyload\" style=\"--smush-placeholder-width: 297px; --smush-placeholder-aspect-ratio: 297\/118;\" \/><noscript><img decoding=\"async\" src=\"https:\/\/king.host\/wiki\/wp-content\/uploads\/2018\/09\/imagem-destacada.png\" alt=\"Op\u00e7\u00e3o de imagem destacada (featured image)\"\/><\/noscript><\/a><\/figure>\n\n\n\n<p><strong>Como dito acima, somente funcionar\u00e1 essa op\u00e7\u00e3o caso seu tema tenha suporte ao atributo.<\/strong><br>Mas, mesmo que seu tema n\u00e3o tenha por padr\u00e3o esse suporte, podemos utilizar plugins ou fazer algumas adi\u00e7\u00f5es ao tema para que ele passe a ter suporte ao <strong>og:image<\/strong>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Dar_suporte_via_tema_a_imagem_do_post\"><\/span>Dar suporte via tema \u00e0 imagem do post<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>No arquivo <strong>functions.php<\/strong> do tema utilizado pelo site, insira o seguinte c\u00f3digo e altere os termos nas linhas em destaque.<\/p>\n\n\n\n<alerta class=\"wp-block-k-alerta\"><strong>Importante!<\/strong> Antes de fazer qualquer altera\u00e7\u00e3o \u00e9 importante realizar <strong>backup<\/strong> dos arquivos do seu tema pois ser\u00e1 adicionado c\u00f3digo a um dos arquivos mais importantes do template.<\/alerta>\n\n\n\n<pre class=\"wp-block-preformatted lang:php marking:true mark:12,16,18\" lang=\"lang:php marking:true mark:12,16,18\">\/\/ Open Graph nos atributos de linguagem\nfunction add_opengraph_doctype( $output ) {\n        return $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\/\/Meta info\nfunction insert_fb_in_head() {\n    global $post;\n    if ( !is_singular()) \/\/se n\u00e3o \u00e9 post ou p\u00e1gina\n        return;\n        \/* echo ''; *\/\n        echo '';\n        echo '';\n        echo '';\n        echo '';\n    if(!has_post_thumbnail( $post-&gt;ID )) { \/\/se o post n\u00e3o tiver uma imagem destacada, usar a imagem padr\u00e3o\n        $default_image=\"http:\/\/seusite.com.br\/image.jpg\"; \/\/substitua por uma imagem do seu site (geralmente uma imagem de logo)\n        echo '';\n    }\n    else{\n        $thumbnail_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post-&gt;ID ), 'medium' );\n        echo '';\n    }\n    echo \"\n\";\n}\nadd_action( 'wp_head', 'insert_fb_in_head', 5 );\n<\/pre>\n\n\n\n<p>\u27a1 Atente-se \u00e0 linha 18! O valor de <em>default_image<\/em> ser\u00e1 utilizado para informar a URL de uma imagem padr\u00e3o do site. Ou seja, quando voc\u00ea n\u00e3o setar alguma imagem destacada para o site, a imagem configurada aqui ser\u00e1 utilizada por padr\u00e3o. Portanto evitamos que o post que voc\u00ea tenha compartilhado fique sem imagem.<\/p>\n","protected":false},"author":9,"featured_media":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","format":"standard","article-category":[205],"article-tag":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/king.host\/wiki\/wp-json\/wp\/v2\/article\/11452"}],"collection":[{"href":"https:\/\/king.host\/wiki\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/king.host\/wiki\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/king.host\/wiki\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/king.host\/wiki\/wp-json\/wp\/v2\/comments?post=11452"}],"version-history":[{"count":0,"href":"https:\/\/king.host\/wiki\/wp-json\/wp\/v2\/article\/11452\/revisions"}],"wp:attachment":[{"href":"https:\/\/king.host\/wiki\/wp-json\/wp\/v2\/media?parent=11452"}],"wp:term":[{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/king.host\/wiki\/wp-json\/wp\/v2\/article-category?post=11452"},{"taxonomy":"article-tag","embeddable":true,"href":"https:\/\/king.host\/wiki\/wp-json\/wp\/v2\/article-tag?post=11452"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}