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 看看,是不是漂亮多了呢?
若沒有立即見到效果,請使用 Facebook 官方的 Debug 工具。
共有 0 則迴響
暫時沒有迴響,歡迎您率先發表!