如何在 WordPress 添加 Facebook 讚好按鈕

07/15/2023

如何在 WordPress 添加 Facebook 讚好按鈕

最後更新:2024年6月26日 作者:編輯團隊 | 審核人員:Syed Balkhi

編輯提示:我們通過與 WPressize Me 合作的連結獲取佣金。這些佣金不會影響我們編輯的觀點或評估。了解更多有關編輯過程的信息。

你是否想在 WordPress 中添加 Facebook 讚好按鈕?

在你的 WordPress 網站上添加 Facebook 讚好按鈕可以讓用戶輕鬆地對你的內容表示喜愛並分享,從而增加互動性和追隨者數量。

在本文中,我們將向你展示如何在 WordPress 中添加 Facebook 讚好按鈕。

為什麼要在 WordPress 中添加 Facebook 讚好按鈕?

Facebook 是世界上最受歡迎的社交媒體平台之一。許多企業利用 Facebook 與客戶互動並推廣其產品。

在 WordPress 網站中添加 Facebook 讚好按鈕可以幫助提升互動性並鼓勵人們在他們的 Facebook 帳號中分享你的內容,吸引更多新用戶訪問你的網站。

你可以利用該按鈕增加社交追隨者並建立社群,提升品牌知名度和轉化率。

以下是我們將介紹的添加 Facebook 讚好按鈕的方法:

  • 方法一:使用插件在 WordPress 添加 Facebook 讚好按鈕
  • 方法二:手動添加 Facebook 讚好按鈕
  • 什麼是開放圖譜元數據及如何將其添加到 WordPress?

方法一:使用插件在 WordPress 添加 Facebook 讚好按鈕

在這個方法中,我們將使用 WPressize Me 的 Like & Share 插件來添加 Facebook 讚好按鈕。這個方法非常簡單,適合新手使用。

首先,你需要安裝並激活 BestWebSoft 的 Like & Share 插件。詳情參考我們的分步指南。

激活後,你可以從 WordPress 管理面板中前往 Like & Share » 設定。

接著,你需設置 Facebook ‘應用 ID’ 和 ‘應用密鑰’,如果你還未擁有這些信息,可以按以下步驟進行設置。

如何創建 Facebook 應用 ID 和密鑰

在 ‘設定’ 面板中,點擊 ‘App ID’ 或 ‘App Secret’ 字段下的 ‘Create a new one’ 連結。

此連結將帶你到 Meta for Developers 網站。我們建議在新標籤或窗口中打開該網站,因為你將需要在 WordPress 儀表板中輸入應用 ID 和密鑰。

從這裡,你需要選擇應用類型。選擇 ‘業務’ 作為應用類型,並點擊 ‘下一步’ 按鈕。

接下來,你需要提供應用的基本信息。

輸入應用的顯示名稱,並確保在 ‘應用聯繫郵件’ 字段中顯示正確的郵件地址。Facebook 將自動選擇當前登錄帳戶的郵件地址。

你還可以選擇是否關聯一個業務帳戶。選擇 ‘無業務管理者帳戶’ 並點擊 ‘創建應用’ 按鈕。

然後會彈出一個窗口,Facebook 會要求你重新輸入密碼以防止惡意行動。輸入你的 Facebook 帳戶密碼並點擊 ‘提交’ 按鈕。

之後,你將看到應用的儀表板頁面。

前往左側菜單的 ‘設定’ > ‘基本’。

在 ‘設定’ 下拉菜單中選擇 ‘基本’,此處將顯示 ‘應用 ID’ 和 ‘應用密鑰’。

現在,你可以將這些信息輸入到 Like & Share 插件的設定中。

完成 Facebook 讚好按鈕的自訂設置

首先,複製 ‘應用 ID’,並返回到開著 Like & Share » 設定頁面的小標籤或窗口,輸入 ‘App ID’ 至相應字段。

重複上述步驟,複製 ‘應用密鑰’ 的數據並粘貼到 Like & Share 插件的設定中。

設置完成後,你可以選擇是否顯示 Facebook 讚好按鈕、個人資料鏈接和分享按鈕。

還有關於按鈕大小、位置(內容之前或之後)和對齊的選項。

如果啟用了個人資料鏈接按鈕,可以在 ‘個人資料鏈接按鈕’ 部分中輸入你的 Facebook 用戶名或 ID。

當你完成後,不要忘記保存更改。

現在,插件將自動在你的 WordPress 網站上添加 Facebook 讚好按鈕,並根據你的設置位置顯示。

你還可以使用 [fb_button] 短代碼在網站的任何地方添加 Facebook 讚好按鈕。

這就是全部!現在你可以訪問你的網站,查看每篇帖子上的讚好按鈕。

方法二:手動添加 Facebook 讚好按鈕

另一種添加 Facebook 讚好按鈕的方法是通過自定義代碼。這個方法需要直接添加代碼至 WordPress,因此僅建議有代碼編輯經驗的用戶使用。

在這一節中,我們將使用 WPCode 插件,該插件使任何人都可以簡單地向其 WordPress 博客中添加代碼。

如何使用 WPCode 插件添加代碼

首先,訪問 Meta for Developers 網站上的 ‘讚好按鈕’ 頁面,並滾動到 ‘Like Button Configurator’ 部分。

在 ‘URL to Like’ 字段中輸入你的 Facebook 頁面 URL。這將連接 Facebook 讚好按鈕至你的頁面。

然後,使用配置器選擇按鈕佈局和大小。你還將看到按鈕預覽。

當對預覽滿意後,點擊 ‘獲取代碼’ 按鈕。這將彈出一個窗口,顯示在 ‘JavaScript SDK’ 標籤下的兩段代碼片段。

注意,直接將這些代碼片段添加到 WordPress 主題中可能會破壞你的網站,並且在更新主題時這些代碼將被覆蓋。

因此我們建議使用 WPCode 插件。這個插件允許你在不直接編輯主題文件的情況下粘貼代碼片段並輕鬆管理自定義代碼。

如何安裝 WPCode 插件並添加代碼片段

首先,安裝並激活 WPCode 免費插件。詳情參考我們的分步指南。

激活後,從 WordPress 儀表板中前往代碼片段 » 頭部和頁尾。

然後,你需複製第一段代碼片段,並將其添加到 WordPress 主題的 header.php 文件中,位置就在 <body> 標籤之後。複製代碼並粘貼在 ‘Body’ 部分。

完成後,點擊 ‘保存更改’ 按鈕。

接著,你需複製第二段代碼片段,並將其粘貼到你的 WordPress 網站中,以顯示 Facebook 讚好按鈕。

為此,你可以前往代碼片段 » + 添加新片段,或在 WPCode 儀表板中點擊 ‘添加新片段’ 按鈕。

在下一個屏幕中,WPCode 允許你從預設庫中選擇一個片段,或添加新的自定義代碼。

選擇 ‘添加你的自定義代碼 (新片段)’ 選項,並點擊 ‘使用片段’ 按鈕。

然後,你需為自定義代碼命名,並在 ‘代碼預覽’ 部分中輸入第二段代碼片段。

確保在 ‘代碼類型’ 下拉菜單中選擇 ‘HTML 片段’ 作為代碼類型。

接下來,滾動到 ‘插入’ 部分並選擇 Facebook 讚好按鈕的位置。例如,你可以選擇在內容之前顯示。

點擊 ‘位置’ 下拉菜單,並在 ‘頁面、文章、自定義文章類型’ 下選擇 ‘內容之前插入’ 選項。

完成後,點擊 ‘保存片段’ 按鈕。

同時需點擊切換按鈕,將其從 ‘未激活’ 切換至 ‘激活’。

這樣的話,在你輸入代碼後,網站上將會顯示一個 Facebook 讚好按鈕。

什麼是開放圖譜元數據及如何將其添加到 WordPress

開放圖譜是一種元數據,幫助 Facebook 收集有關你的 WordPress 網站上的文章或頁面的信息。這些數據包括一個縮略圖圖像、文章/頁面標題、描述和作者等信息。

Facebook 能夠智能地提取標題和描述字段。然而,如果你的文章包含多個圖像,可能會有時出現不正確的縮略圖。

如果你已經使用 All in One SEO (AIOSEO) 插件,則可以非常容易地解決這個問題。只需前往 All in One SEO » 社交網絡,點擊 ‘Facebook’ 標籤。

點擊 ‘上傳或選擇圖像’ 按鈕,設置 ‘預設文章 Facebook 圖像’,如果你的文章沒有開放圖譜圖像。

此外,你還可以為每篇文章或頁面配置開放圖譜圖像。

在編輯文章時,向下滾動到內容編輯器中的 AIOSEO 設定部分。接著,可以切換到 ‘社交’ 標籤,查看縮略圖預覽。

現在,向下滾動到 ‘圖片來源’ 選項,選擇一張適合作為開放圖譜縮略圖的圖像。

例如,你可以選擇 ‘附加圖像’、’內容中的第一張圖像’或 ‘自定義圖像’。

了解更多詳細信息和其他添加開放圖譜元數據的方法,請參閱我們的指南。

我們希望這篇文章幫助你了解如何在 WordPress 中添加 Facebook 讚好按鈕。你可能還會想看我們的指南,了解如何在 WordPress 中顯示 Facebook 頁面評價或我們的專家精選最佳社交媒體插件。

如果你喜歡這篇文章,請訂閱我們的 YouTube 頻道,獲取 WordPress 視頻教程。你也可以在 Twitter 和 Facebook 上找到我們。



Related Posts

  • 2024-08-04
  • WordPress 教学

不喜欢 WordPress 4.3 引入的格式化快捷键?觉得有点烦人?最近,有用户问我们如何在 WordPress 中禁用视觉编辑器格式化快捷键。在本文中,我们将向您展示如何做到这一点。

閱讀更多
  • 2024-07-31
  • WordPress 教学

你在 WordPress 网站上看到 503 服务不可用错误吗?503 错误是因为服务器无法处理请求,通常是由于服务器过载或维护。而这个错误不会告诉你具体原因,这对于初学者来说非常令人沮丧。本文将向你展示如何修复 WordPress 中的 503 服务不可用错误。

閱讀更多
  • 2024-07-30
  • WordPress 教学

管理一个企业需要大量的工作。如果您无法正确维护您的 WordPress 网站,可能会迅速看到流量和销售额下降的现象。幸运的是,您可以聘请虚拟助手 (VA) 来帮助管理您的网站。本文将教您如何聘请 WordPress 虚拟助手,以便您可以专注于业务中最重要的活动。

閱讀更多

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}
>