facebook like box也稱為facebook fan box，已成為許多網(wǎng)站的必備元素。它允許網(wǎng)站所有者為用戶提供一種簡單的方法來加入他們的 facebook 社區(qū)并在他們的 facebook 新聞源中獲取更新。最近，我們的一位用戶提醒我們注意，我們沒有討論如何在 wordpress 中添加 facebook like 框的主題。盡管我們已經(jīng)介紹了如何添加facebook 點贊按鈕、facebook 發(fā)送按鈕和facebook 評論。在這篇文章中，我們將向您展示如何在 wordpress 中添加 facebook 粉絲框。

使用 wordpress 官方 Facebook 插件添加 Like Box

也許向 WordPress 網(wǎng)站添加 facebook like 框的最簡單方法是使用 WordPress 的官方 Facebook 插件。您需要做的第一件事是安裝并激活Facebook插件。激活插件后，轉(zhuǎn)到外觀?小部件。只需將 Facebook Like 框小部件拖放到側(cè)邊欄即可。您需要在小部件配置中提供 Facebook 粉絲頁面的 URL。

該小部件具有與 Facebook 網(wǎng)站社交插件相同的選項。您可以選擇顯示流、顯示面孔、刪除標題、更改邊框顏色。目前只有淺色和深色兩種主題可供選擇。

不使用任何插件手動添加like Box

無需使用任何插件即可手動添加 Facebook Like 框。轉(zhuǎn)到Facebook 社交插件的 Like Box頁面。提供您的 Facebook 頁面的 URL 并配置“贊”框的外觀。

按獲取代碼按鈕獲取點贊框代碼。

Facebook 為您提供了多種在您的網(wǎng)站上添加點贊框代碼的方法。您可以選擇 html5、XFBML 和 iframe。我們將向您展示如何添加其中每一項，但您需要選擇一個。我們認為，對于大多數(shù) WordPress 驅(qū)動的網(wǎng)站來說，html5 是一個相當不錯的選擇。XFBML 非常適合使用其他使用 XFBML 顯示 Facebook 按鈕的 Facebook 插件的人。如果前兩個選項不適合您，請使用 iframe。

在 WordPress 中添加 HTML5 Facebook Like Box 代碼

單擊代碼窗口中的 HTML5 選項卡并復制代碼的第一部分。他們建議您將其粘貼到

通常位于 header.php 文件中的標記之后。然而，它可以在身體的任何地方發(fā)揮作用。為了讓事情變得簡單，您可以使用我們的插入頁眉和頁腳插件將其添加到頁腳中。代碼的第一部分如下所示：

<divid="fb-root"></div><script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id;js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=403924843027405";  fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));</script>

由

在 WordPress 中一鍵使用

此 JavaScript 將您的網(wǎng)站連接到 Facebook 的 javascript 庫。現(xiàn)在復制代碼的第二部分，它看起來像這樣：

<divclass="fb-like-box"data-href="http://www.facebook.com/wpbeginner"data-width="292"data-show-faces="true"data-stream="true"data-header="true"></div>

由

在 WordPress 中一鍵使用

這部分代碼告訴您之前加載的 JavaScript 在此位置并使用這些參數(shù)顯示類似框。為了本示例，我們將將此代碼粘貼到側(cè)邊欄小部件中。轉(zhuǎn)到外觀?小部件。將文本小部件拖放到側(cè)邊欄，然后將代碼粘貼到其中。保存您的小部件并檢查您的網(wǎng)站。

這也適用于您網(wǎng)站的任何其他區(qū)域。如果您精通代碼，那么您可以將其粘貼到頁腳、帖子之后等。

不要忘記將 Facebook 粉絲頁面 URL 更改為您自己的頁面 URL。

在 WordPress 中添加 XFBML Facebook Like Box 代碼

單擊 XFBML 選項卡即可獲取 XFBML Facebook 之類框的代碼。要添加 XFBML Facebook Like Box，您需要在 WordPress 中添加三小段代碼。

復制第一段代碼并將其粘貼到主題header.php文件中的標簽后面

。與上一個類似，這段代碼可以在身體的任何地方工作。為了讓事情變得簡單，您可以使用我們的插入頁眉和頁腳插件將其添加到頁腳中。這段代碼想要這樣的東西：

<divid="fb-root"></div><script>(function(d, s, id) {  var js, fjs = d.getElementsByTagName(s)[0];  if (d.getElementById(id)) return;  js = d.createElement(s); js.id = id;  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=403924843027405";  fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));</script>

由

在 WordPress 中一鍵使用

這個微小的 javascript 函數(shù)將您的網(wǎng)站連接到 Facebook 的 javascript 庫。

第二行代碼是 xml 命名空間聲明，您需要將其添加到站點的標記中。最簡單的方法是打開主題functions.php文件，粘貼以下代碼：

//Adding the Open Graph in the Language Attributesfunctionadd_opengraph_doctype( $output) {        return$output. ' xmlns:og="http://ogp.me/ns#" xmlns:fb="http://ogp.me/ns/fb#"';    }add_filter('language_attributes', 'add_opengraph_doctype');

由

在 WordPress 中一鍵使用

最后，復制第三行代碼，如下所示：

<fb:like-boxhref="http://www.facebook.com/wpbeginner"width="292"show_faces="true"stream="true"header="true"></fb:like-box>

由

在 WordPress 中一鍵使用

此代碼告訴您在第一步中加載的 JavaScript，在該位置并使用這些參數(shù)顯示類似框。轉(zhuǎn)到外觀?小部件。將文本小部件拖放到側(cè)邊欄，然后在該文本小部件內(nèi)粘貼第三行代碼。保存您的更改并預覽您的網(wǎng)站。

在 WordPress 中添加 Facebook Likebox iframe

單擊 iframe 選項卡復制 iframe 代碼。轉(zhuǎn)到外觀?小部件并將文本小部件拖放到側(cè)邊欄。將 iframe 代碼粘貼到文本小部件內(nèi)并保存更改。打開您的網(wǎng)站以預覽 Facebook 粉絲盒。