WordPress 佈景：如何在分享文章到 Facebook 時抓取正確的圖片？

今天的WordPress 佈景教學是要教大家，

如何讓文章被分享到 Facebook 時，

或是當別人按讚顯示在 Facebook 上時，

顯示的是你所指定的圖片，

方法不會很難，

如果你有這方面的困擾一定要來看看！

代碼添加

這個方法是需要將代碼加到 header.php 之內，放在 </head> 之前，

而這個方法不僅能讓 Facebook 抓取到正確的圖片，也能讓分享連結的標題、簡略內容更為完整。

這段代碼需要用到上一篇文章（如何擷取文章內第一張圖片作為縮圖？）所使用的函數，

若已經已經加過該段代碼則直接加入以下代碼（Source，修改版本）：

//Facebook 連結分享美化
<?php if( is_single() || is_page() ) { ?> //當在文章或是分頁時
//Facebook 辨識用 Open Graph
<meta property="og:type" content="article" />
<meta property="og:title" content="<?php single_post_title(''); ?> | <?php bloginfo('name'); ?>" />
<meta property="og:url" content="<?php the_permalink(); ?>"/>
//設定顯示文章第一張圖片，詳細請見：http://blog.brownsugar.tw/wordpress-theme-1/
<meta property="og:image" content="<?php echo get_first_img() ?>" />
<?php
  global $post;
    if ( is_singular() ) {
      if ( $post->post_excerpt ) {
        $post_excerpt = $post->post_excerpt;
      }
      else {
        $post_excerpt = trim( str_replace( "rn", ' ', strip_tags( $post->post_content ) ) );
      }
      $description = mb_substr( $post_excerpt, 0, 150, 'UTF-8' );
      $description .= ( mb_strlen( $post_excerpt, 'UTF-8' ) > 150 ) ? '…' : '';
      printf('<meta property="og:description" content="%s" />', $description);
    }
?>
<?php  } else { ?> //不在上面的頁面
//設定自定圖片
<?php
  $default_img = get_bloginfo('stylesheet_directory').'/icon.png';
?>
<meta property="og:type" content="article" />
<meta property="og:title" content="<?php bloginfo('name'); ?>" />
<meta property="og:url" content="<?php bloginfo('url'); ?>"/>
<meta property="og:description" content="<?php bloginfo('description'); ?>" />
//使用自定圖片
<meta property="og:image" content="<?php echo $default_img ; ?>" />
<?php  }  ?>

說明

設定圖檔中的

$default_img = get_bloginfo('stylesheet_directory').'/icon.png';

需上傳一張名為 icon.png 的圖片到佈景的根目錄，當然檔名和附檔名也可以自由變更。

儲存後重整頁面，再次分享到 Facebook 看看，是不是漂亮多了呢？