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

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

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

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

不使用任何插件手動(dòng)添加like Box

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

按獲取代碼按鈕獲取點(diǎn)贊框代碼。

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

在 WordPress 中添加 HTML5 Facebook Like Box 代碼

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

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

<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 庫(kù)。現(xiàn)在復(fù)制代碼的第二部分，它看起來(lái)像這樣：

<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ū)域。如果您精通代碼，那么您可以將其粘貼到頁(yè)腳、帖子之后等。

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

在 WordPress 中添加 XFBML Facebook Like Box 代碼

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

復(fù)制第一段代碼并將其粘貼到主題header.php文件中的標(biāo)簽后面

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

<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 中一鍵使用

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

第二行代碼是 xml 命名空間聲明，您需要將其添加到站點(diǎn)的標(biāo)記中。最簡(jiǎn)單的方法是打開(kāi)主題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 中一鍵使用

最后，復(fù)制第三行代碼，如下所示：

<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)粘貼第三行代碼。保存您的更改并預(yù)覽您的網(wǎng)站。

在 WordPress 中添加 Facebook Likebox iframe

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