WordPress 加 Facebook 的讚按鈕(使用 Open Graph Protocol)


facebook

WordPress 加 Facebook 的讚

雖然在網站的文章上加 Facebook 的讚鈕並不是太困難的事情

而且可以說確實非常簡單,但如果要使用 Facebook 新的 Open Graph Protocol 來搭配讚鈕的話,那麼就需要花點時間去瞭解一下 Open Graph Protocol 相關的代碼

如果你很懶,也不想研究到底有沒有 Open Graph Protocol 有甚麼不一樣,那就不要管 Open Graph Protocol 了,直接簡單的輸入一些資料,然後產生一組代碼,再把代碼拷貝回自己網站上插入相應的網頁裡頭,就可以做到在文章裡頭加上 Facebook 的讚按鈕。

Open Graph Protocol

很多介紹加讚按鈕的 blog 文章還是以前沒有 Open Graph Protocol 時候的讚,還有的雖然是介紹新的 Open Graph Protocol 的讚,但卻是直接翻譯 Facebook 給開發者的網頁,就像這一頁介紹的主要是 Open Graph Protocol 的參數意義,雖對一些害怕英文的網友有一定的幫助,但大部分還是要自己去嘗試。無法很快速的加上自己的讚

以 WordPress 為例,加上 Facebook 的讚(採用Open Graph Protocol)

要使用 Open Graph Protocol 為 WordPress 文章加上讚鈕,首先必須先準備好相關的參數,分別說明如下

(1) og:title

<meta property="og:title" content="<?php if(is_home()) {   echo "你的網站title"; } else { $theme->meta_title(); } ?>"/>

這一段是定義你的文章在 Facebook 分享時呈現的標題,如果是首頁,則顯示網站的標題,否則顯示文章的標題 $theme->meta_title()

(2) og:type

<meta property="og:type" content="article"/>

og:type 直接給 article 就可以

(3) og:url

<meta property="og:url" content="<?php echo "http://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']; ?>"/>

這個是告訴 Facebook 文章的網址, "http://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']; ?>" 這一串就是該篇文章的網址組合

(4) og:description

<meta property="og:description" content="<?php the_excerpt_rss(); ?> "/>

定義該篇文章的描述

   

(5) og:site_name

<meta property="og:site_name" content="你的網站名稱"/>

我定義了以上五個 Facebook 的 Open Graph Protocol 的 meta 訊息,其實還有一個 og:image ,但由於要知道該頁面文章所使用的圖片內容 URL 有點困難,所以這裡我沒有定義,Facebook 會自動抓取文章的一張圖片。

以上定義好以後將代碼貼於 <title> 這一行的下面 (在 header.php 裡)

文章內加上 Facebook 的讚

上面的 Open Graph Protocol 相關 meta 設定好以後,下一步就是放置 Facebook 的讚,這裡的做法跟單純放讚(不管 Open Graph Protocol)的做法是一樣的

這裡介紹一下用 iframe 的方式

在 URL to Like 先隨便填入一個網址 http://test.com ,因為採用 iframe 的話要有網址才能生成代碼

facebook

按下 "Get Code" 按鈕,選擇 IFRAME 選項

facebook
選擇 IFRAME

<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Ftest.com&amp;send=false&amp;layout=standard&amp;width=450&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=35" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:35px;" allowTransparency="true"></iframe>

此時把 href= 後面的網址換掉,換成 href=<?php echo "http://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']; ?>

也就是說網址是根據當前頁面所抓到的網址為主

整個讚鈕的程式段如下

<iframe src="//www.facebook.com/plugins/like.php?href=<?php echo "http://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']; ?>&amp;send=false&amp;layout=standard&amp;width=450&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=35" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:35px;" allowTransparency="true"></iframe>

將這一段代碼放置於 post.php 或者 post-single.php (根據你使用的佈景而不同)

放置的地方可以根據你自己的意思,比如放在文章標題下面或者是文章底部

WordPress 加 Facebook 的讚按鈕延伸閱讀

(*) WordPress 加 Facebook 的讚按鈕

本文地址:WordPress 加 Facebook 的讚按鈕(使用 Open Graph Protocol)
內容對你有幫助嗎? 臉書分享:
分享到:

2 Responses to WordPress 加 Facebook 的讚按鈕(使用 Open Graph Protocol)

  1. kanbo 說道:

    以后常来学习

  2. 3640 說道:

    收藏先

發表迴響

您的電子郵件位址並不會被公開。 必要欄位標記為 *

*

您可以使用這些 HTML 標籤與屬性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

交換連結: Liang's Blog |