讓 Facebook、Google+『推文』時,正確抓取指定資訊,例如:內容、圖片……

是否遇過「推文」分享時,所抓取的資料,總是無法依需求呈現。其實 Facebook、Google+ 是經由寫在 HTML 上的 meta data 來更精準的對應要抓取的網頁內容,且 meta 的設定方式,都共同採用 The Open Graph protocol,該協議的目地是為了打造更方便分享的網頁。

push-button-meta_00

使用方式

撰寫 WordPress function 將所須的 meta data 寫入至網頁,此 function 原始來源 《WordPress筆記》讓Facebook及Google+正確抓取內容及指定圖片 | 就是教不落,小傑在稍做修改和加上註解,以符合我個人的需求。檔案路徑:/wp-content/themes/{主題名稱}/functions.php

<?php
/*
 * 插入 Facebook meta(也適用 Google+、Twitter)
 */
function insert_fb_in_head() {
	/*
	 * global $post 這個全域變數可以取得當前文章的這些訊息: ID、post_title、post_author、post_date、post_excerpt、comment_count 和其他......。
	 */
	global $post;

	// 預設圖片
	$defImg = get_template_directory_uri() . '/images/default250x180.png';
	
	// 判斷是否為首頁
	if (is_home()) {
		/*
		 * 插入 meta
		 */
		// Facebook 管理者 ID。進入 FB 個人頁面之後 http://www.facebook.com/profile.php?id=數字,數字就是(管理者 ID)
		echo "\n" . '<meta property="fb:admins" content="100000349020722" />' . "\n";
	    
	    // Facebook APP ID。需另外申請
	    // echo '<meta property="fb:app_id" content="APP_ID" />' . "\n";

	    // 類型:網站
	    echo '<meta property="og:type" content="website" />' . "\n";

	    // 網站名稱。網誌名稱
	    echo '<meta property="og:site_name" content="' . get_bloginfo('name') . '"/>' . "\n";

	    // 標題。網誌名稱 | 網誌描述
	    echo '<meta property="og:title" content="' . get_bloginfo('name') . " | " . get_bloginfo( 'description' ) . '"/>' . "\n";

	    // 網站(url)
	    echo '<meta property="og:url" content="' . get_bloginfo('url') . '" />' . "\n";

		// 圖片(url)。預設圖片
		echo '<meta property="og:image" content="' . $defImg . '" />' . "\n";

		// 描述。作者個人資料
	    echo '<meta property="og:description" content="' . get_the_author_meta('description', 1) . '"/>' . "\n";	
	}

	/*
	 * is_singular() 當前顯示的是不是一個單獨的 post 所形成的頁面。在資料庫裡,is_sigular() 也只是判斷 ID 是否存在即可。
	 */
	// 判斷是否為文章頁面,不是則不繼續
	if (!is_singular()) {
		return;
	}

	/*
	 * get_post_thumbnail_id() 取得文章特色圖片 ID,如果没有設定,則返回空 ""
	 */
	$id = get_post_thumbnail_id($post->ID);

	/*
	 * wp_get_attachment_url() 取得附件的 url
	 */
	$img = wp_get_attachment_thumb_url($id);

	/*
	 * wp_get_attachment_image_src( $attachment_id, $size, $icon ) 取得圖片的 url、width、height,以陣列形式返回结果
	 *
	 * @ 參數
	 *	● $attachment_id 需取得的附件文章 ID,必選的参数(預設值:None)
	 *	● $size 圖像的尺寸。陣列或字符串類型的值,可選的参數(預設值:thumbnail)。我們知道的 WordPress 特色圖像 string 類型的值有 thumbnail, medium, large, full(依序為最小的缩略圖、中等、大和原始尺寸)4 個值。我們也可以使用自定義圖像的大小
	 *	● $icon 替换附件的 icon 路徑,可选参数(預設值:false)
	 *
	 * @ 返回值 Array
	 *	● [0] => url
	 *	● [1] => width
	 *	● [2] => height
	 *	● [3] => boolean。true 代表原圖尺寸调整過,fasle 代表沒有圖片,或原圖沒有原始尺寸
	 */
	$img = wp_get_attachment_image_src($id, 'image250x180');

	// 如果沒有設定特色圖片,就使用預設圖片 url
	if (!$img) {
		$img[0] = $defImg;
	}

	/*
	 * 插入 meta
	 */
	// Facebook 管理者 ID。進入 FB 個人頁面之後 http://www.facebook.com/profile.php?id=數字,數字就是(管理者 ID)
	echo "\n" . '<meta property="fb:admins" content="100000349020722" />' . "\n";
    
    // Facebook APP ID。需另外申請
    // echo '<meta property="fb:app_id" content="APP_ID" />' . "\n";

    // 類型:文章
    echo '<meta property="og:type" content="article" />' . "\n";

    // 網站名稱。網誌名稱
    echo '<meta property="og:site_name" content="' . get_bloginfo('name') . '"/>' . "\n";

    // 標題。文章標題 | 網誌名稱
    echo '<meta property="og:title" content="' . get_the_title() . " | " . get_bloginfo('name') . '"/>' . "\n";

	// 連結(url)
    echo '<meta property="og:url" content="' . get_permalink() . '" />' . "\n";

    // 圖片(url)
	echo '<meta property="og:image" content="' . $img[0] . '" />' . "\n";

	/*
	 * strip_tags(string, allow) 剝去 HTML、XML 以及 PHP 的標簽
	 *
	 * @ string 必須。規定要檢查的字符串
	 * @ allow 可選。規定允許的標簽,這些標簽不會被刪除
	 *
	 *
	 * mb_strimwidth(string $str, int $start, int $width [, string $trimmarker [, string $encoding ]]) 用来取得指定的寬度截斷字符串
	 *
	 * @ $str 指定字符串
	 * @ $start 指定字符串從何處開始截取
	 * @ $width 截取文字的寬度
	 * @ $trimmarker 超過 $width 數字後要顯示的字符串
	 * @ $encoding 參數為字符編碼。如果省略,則使用內部字符編碼
	 */
	// 描述。對「文章摘要」,設定截取字數
    echo '<meta property="og:description" content="' . mb_strimwidth(strip_tags(apply_filters("the_content", $post->post_excerpt)), 0, 100,"...") . '"/>' . "\n";	
}
add_action('wp_head', 'insert_fb_in_head', 10);
?>

2 則評論 to “讓 Facebook、Google+『推文』時,正確抓取指定資訊,例如:內容、圖片……”

  1. 頭痛很久了 說道:

    您好~我在function 最下面加入語法後,按fb分享時依舊無法顯示圖文,下面為檢視畫面語法~請問大大該如何是好?謝謝

    • SmallJacky 說道:

      1. 請利用 Facebook Object 看它解析後的結果與問題。
      2. 我看您的網頁原始碼發現,meta 的 og:image、og:url、og:title、og:description 都設定了三個,我猜有安裝 FB 相關的外掛。

      以上您再確認檢查一下,有問題在討論。

發表迴響