如何在 Divi 加上社群分享＋關注按鈕？（使用 Monarch WordPress 外掛）

這是一篇完整「 Monarch WordPress 」外掛教學，我們將使用 Divi 主題＋Monarch 外掛，在頁面不同位置（側邊欄、底部等 .. ），插入社群軟體分享＆關注按鈕。

Divi 是許多網頁設計師喜愛的一款佈景主題，除了功能強大外，還有很多高質感的設計元素（和現成模板）。

使用 Divi 架設形象網站，或是 多種架站類型 的站長，可能會想將社群軟體分享＋關注按鈕，嵌入至頁面不同位置當中。

雖然 Divi 也有內建社群分享功能，但對於客製化方面，沒有太多的可選擇性。

因此，我們可以安裝 Monarch 外掛來幫助我們，實現嵌入多種社群媒體，以及客製化按鈕樣式、位置、動畫功能。

本篇文章會從 Divi 介紹＋購買流程開始，接著我會介紹 Monarch 是什麼，以及它的多種設計方向，還有完整教學，準備好的話，就開始學習吧！

• 1. 開始前需準備？
• 2. Monarch 是什麼？
• 3. Monarch 安裝啟用＆憑證激活
• 4. Social Sharing 社群分享按鈕
• 5. Social Follow 社群關注按鈕
• 6. General Settings 基礎設定（連結數據）
• 常見問題
• WordPress 學習資源

在 Divi 加上社群分享＋關注按鈕，使用 Monarch WordPress 外掛影片教學：

---

1. 開始前需準備？

Divi 是由知名 Elegant Themes 公司開發，是許多網頁設計師喜愛的一款軟體，除了功能強大且有很多高質感的元素（和現成模板）。更多完整 Divi 中文教學。

不需要任何程式概念，用拖曳方式就能設計漂亮的網站，就像官網所描述的，視覺化設計和佈局排版都將變得更加容易。

使用 Divi 主題，完整架站教學（全攻略分享）

Elegant Themes 旗下產品，有全功能 Divi Theme 佈景主題、Divi Builder 頁面編輯器、Extra 主題（可用在部落格 / 新聞雜誌 / 作品集 ..）、Bloom 電子報註冊行銷工具、Monarch 社群工具等 ..。

所以使用 Divi 軟體，不會只有一種軟體可用，而是能享受它們公司的所有服務，非常的划算。

加上多種區塊模板和完整的網站樣板，有商業風、線上開店平台、科技風、服務類型等 .. 多種主題風格。

你只需幾點擊按鈕，即可引用區塊樣板，或套用整個網站設計。

Divi 對 Woocommerce 開店平台外掛有完美的支持，並提供多種線上開店的區塊功能，一樣用拖放方式即可放入頁面。

使用 Divi 會是個很棒的選擇，因為它能幫你做到很多事。

方案評論

Divi 的使用方案很簡單，它提供「 年租用方案 」和「 終身方案（一次性）」，這兩種價格方案。

兩種方案都能應用在無限數量的網站，費用也維持在合理範圍。

有個好處是，Divi 整體系列包含自開發的多功能 WordPress 佈景主題，且和旗下產品有完美兼容，這代表你可能不需再額外購買 WordPress 主題。

特別一提，終身使用方案在 WordPress 頁面編輯器市場中，是比較棒的收費方式。

這代表你只需負擔一次性的小額費用（和外包網頁設計相比），就能終身享用所有 Divi 功能。

產品定價

Divi 的年租用方案，原定價是 $89 美元 / 年（約 $2,700 台幣 / 年），可應用在無限數量的網站。

Divi 的終身方案，原定價是 $249 美元（約 $7,500 台幣 / 終身），一次性費用即可終身使用，可應用在無限制數量的網站。

但有個好消息要告訴大家，請看下面享有全方案的折扣優惠！

終身方案是一次性費用，購買之後隔年不會有額外費用，你可享有 Divi 軟體終身更新＋優先的客戶服務（建議優先選擇，比較划算）。

---

2. Monarch 是什麼？

---

3. Monarch 安裝啟用＆憑證激活

這個章節，我們會教學購買完 Divi 之後，該如何安裝 Monarch 外掛＋憑證激活。

Step1：下載 Monarch 檔案包＋WordPress 主題安裝

登入 Elegant（開發 Divi 的公司）會員之後，從右上方主選單中的 Account 列表，找到 My Downloads 進入檔案安裝頁面。

接著，我們找到 Monarch 外掛並下載。

前往 WordPress 後台，將 Monarch 外掛檔案包上傳，進行安裝＋啟用。更多 外掛安裝教學。

這樣一來，Monarch 就安裝成功啦！

Step2：取得憑證，激活 Monarch

通常在安裝 Monarch 前，都會先安裝好 Divi ，這時安裝好的 Monarch 外掛，便會自動套用憑證。

不過若是沒有自動套用憑證，該怎麼辦呢？

可以前往 Divi 官網 並登入，點選 Account > Username & API Key 前往憑證專區。

會看到 Username（使用者帳號）和 API Keys（使用憑證），這兩個分別複製起來，等等會用到。

備註：如果沒有出現 API Keys 可自行新增（也可設定標籤，方便找尋）。還有 Divi 可在多個網站上使用，每個網站需對應一組憑證，假設之後網站用不到 Divi，可在這把對應的憑證註銷掉，就不會佔用空間。

前往 WordPress 網站，找到 WordPress 工具 > Monarch Settings，點擊右上列的鎖頭圖示，分別輸入剛複製的使用者帳戶 ＆ API 憑證，完成後儲存。

這樣我們就激活憑證成功，可以開始使用 Monarch 外掛囉！

---

4. Social Sharing 社群分享按鈕

完成 Monarch 安裝啟用＋憑證激活以後，我們就可以來設置社交軟體的按鈕囉。

這個章節，我會示範如何在 WordPress 不同位置，新增 Monarch 的 Social Sharing 社群分享按鈕。

Step 1：選擇顯示社群軟體分享按鈕位置

首先，前往 WordPress > 工具 > Monarch Settings > Social Sharing > Locations ，選擇社群分享按鈕顯示位置。

Monarch 共有 5 個位置，可設定顯示社群軟體分享按鈕：Sidebar 側邊欄、Inline 頁面中橫序排列、Pop up 彈跳視窗、Fly in 底部視窗、Media 媒體圖片。

這邊因為教學，我都先全部勾選，但站長可依照使用習慣進行勾選，不一定要全部選取唷。

若還沒有想法，也可以先往下查看完教學，再來進行設置。

Step 2：串接預顯示的社群軟體

這個步驟，我們先來串接想顯示的社群軟體吧。

前往 Networks 區塊，選擇 Add Networks。

跳出選擇社群軟體的視窗，找出自己想串接的社群軟體，分別勾選後，選擇「 Apply 」進行儲存。

發現成功串接囉，接著可填寫顯示社群軟體名稱，設定完成，按下「 Save Changes 」儲存。

這樣就完成社群軟體的串接囉，那麼接下來的步驟，就是設計按鈕樣式啦。

因為 5 個位置的按鈕設計方式都大同小異，我會先示範 Sidebar 側邊欄位置的設定，站長可先學習如何設計按鈕，再根據自身需求來做調整。

Step 3：設計 SideBar 側邊欄按鈕

選擇 SideBar 側邊欄區塊，進入設計按鈕頁面，可選擇側邊欄按鈕動畫，以及按鈕形狀。

下滑可以繼續進行顯示設定，詳細如下圖所示：

接下來是按鈕顏色設置，我們可以使用內建色彩（也就是社群軟體本身的品牌顏色），也可以調整成我們的自訂色彩。

最後是設定按鈕會顯示在哪個 WordPress 網站中，可以選擇：Home 首頁、Post 文章、Page 頁面、Project 項目分類。

設定都完成後，我們就可以選擇儲存囉。

Step 4：前往頁面查看＋測試按鈕

我們到前台文章頁面刷新，發現成功顯示側邊欄社群軟體分享按鈕，點擊之後，也會順利跳轉分享頁面。

補充說明：社群分享按鈕位置

Monarch 共有 5 個位置，可設定顯示社群軟體分享按鈕，本章節只示範側邊欄。

詳細的位置圖如下，給站長在進行設置時，當作一個參考：）

彈跳視窗則會在頁面閒置，或下捲時出現（若有啟用＋設定該項目）。

那麼，以上就是完整的 Monarch WordPress 外掛，有關 Social Sharing 社群分享按鈕功能，大家都學會了嗎？

---

5. Social Follow 社群關注按鈕

Monarch 也能夠新增「 Social Follow 社群關注 」按鈕，而非單純的社群分享。

這個章節，我會示範如何新增 Social Follow 社群關注按鈕，串連我們的社群帳戶，並且分享兩種嵌入方式，分別是：新增小工具至側邊欄、產生短代碼嵌入文章。

準備好的話，就開始囉！

Step 1：串接社群媒體

首先，我們一樣先前往串接社群媒體。

前往 Social Follow > Networks > Add Networks，新增社群媒體。

出現媒體頁面，依據站長需求勾選，這邊我先勾選「 Facebook 」、「 YouTube 」、「 Instagram 」以串接社群帳號：）

勾選完畢，選擇「 Apply 」進行儲存。

輸入社群帳號的媒體名稱、帳號網址、帳號名稱，追蹤人數可依據需求鍵入。

下方選項，可勾選「 Open link in new window 在新視窗開啟社群帳號 」讓訪客點選按鈕後，另開新瀏覽器視窗讀取社群帳號，更方便訪客操作。

• 媒體名稱：各媒體前台顯示名稱，站長可自由設定。
• 帳號網址：貼上欲串接帳號的網址。
• 帳號 ID：輸入帳號 ID 後，可讓 Monarch 抓取到社群帳號的追蹤人數。Facebook 的 ID 為「 粉專 ID 」，YouTube 的 ID 為頻道連結最後面的代碼，在後面的章節有詳細教學：）
• 目前追蹤人數：若沒有串接 API 可自由輸入數值，若有串接則會如圖片中一樣，出現「 綠色勾勾 」。
• Open link in new window：在新視窗中打開社群帳號。
• Get counts via API：勾選後，即可輸入 API ，讓 Monarch 自動抓取社群帳號的追蹤人數。

這邊若站長不太清楚如何設定 API ，可先輸入「 媒體名稱 」、「 帳號網址 」這兩項，先跟著我在這個章節，進行社群關注按鈕的上線：）

若有想讓 Monarch 自動抓取追蹤人數的需求，可在下個章節，進行 API 串接的學習。

都設定完成，記得按下「 Save Changes 」儲存變更，接著我們就可以進行下一步驟。

Step 2：小工具 / 短代碼，兩種嵌入方式

Monarch WordPress 外掛的 Social Follow 社群關注按鈕，有 2 種嵌入方式，分別是：將小工具嵌入側邊欄、短代碼嵌入文章 / 頁面。

以下會分別對這兩項方法，進行介紹。

方法 1：小工具嵌入側邊欄

我們將左側邊欄，切換至 Widget 小工具頁面，先進行社群關注按鈕的相關設計。

選擇鼠標懸停按鈕動畫、外框形狀。

下滑區塊，可調整按鈕顯示細節設定，詳細說明如下圖：

站長可依據自身需求，參考上圖說明進行勾選＆設定，調整完畢，我們下滑下一個區塊。

這裡可變更按鈕顏色設置，若想使用內建色彩，可以不用特別操作。

設定完成，按下「 Save Changes 」儲存變更。

接著，就可以在 WordPress 側邊欄加入「 Social Follow 社群關注按鈕 」小工具，讓訪客可透過側邊欄，找到站長的社群軟體關注鈕，以進行追蹤。

前往 WordPress 外觀 > 小工具 > 找到 Monarch Follow 小工具，點擊或拖曳加進「 Sidebar 側邊欄 」，並進行儲存更新。更多 新版區塊小工具教學。

前往前台刷新，發現側邊欄成功新增 Social Follow 社群關注按鈕小工具囉！

以上就是完整新增 Social Follow 社群關注按鈕操作，大家都學會了嗎：）

方法 2：短代碼嵌入頁面＆文章

接著我們就來示範如何生成短代碼，並且嵌入至 WordPress 文章＆頁面的方法。

前往 Social Follow > General Settings > Generate ShortCode ，這邊可以個別設計短代碼會呈現的 Social Follow 社群關注按鈕。

因為這邊按鈕的按鈕自定義設定，跟上方小工具的形式類似（可參考方法 1），來進行按鈕的客製化設計，這裡就不重複介紹：）

往下滑會看到短代碼生成器，生成＋複製代碼，接著點選「 Save Changes 」保存短代碼。

接下來，就可以將「 Social Follow 社群關注按鈕 」短代碼嵌入至 WordPress 文章當中囉！

輸入文章段落。更多 如何新增＋編輯 WordPress 文章。

前往 WordPress 的文章 > 全部文章，在想編輯的文章中，我們直接貼上「 Social Follow 社群關注按鈕 」的短代碼。

更新或發佈文章後，再度前往文章頁面，會發現成功在 WordPress 文章中，新增 Social Follow 社群關注按鈕囉：）

小備註：若想在 WordPress 頁面新增 Social Follow 社群追蹤按鈕，可以使用 Divi Builder 編輯頁面，新增「 Code 」小工具，在 Text 文本，貼上短代碼就可以囉。

---

6. General Settings 基礎設定（連結數據）

上個章節，我們提過，可以在 Monarch 串接社群帳號 API，自動結算粉絲人數。

但需要注意的是，串接 API 並更新粉絲人數的操作，會佔用到一些主機資源唷！

若需開啟社群軟體 API 串接，請先前往 Social Follow > Networks ，開啟「 Get counts via API 」選項。

開啟之後，我們就來個別串接現在使用的三個社群軟體：Facebook、YouTube、Instagram 吧。如果有串接其他社群的需求，可參考 Monarch 官方 API 串接教學。

在左側列表，找到並前往 General Settings > Main ，這邊需要貼上 Facebook App ID 和 APP Secret，才可串接 Facebook。

這裡我們需前往 Facebook for Developers 取得Facebook App ID 和 APP Secret，可參考 Super Socializer 外掛 文章的 Facebook 串接章節，取得方式是一樣的唷！

另外，Instagram 的 API 憑證，則是需本身為 商業帳號，並且在 Facebook for Developers 申請進階權限，才能夠取得唷：）

貼上社群帳號各自的憑證之後，點選「 RE-Authorize 」按鈕，進行授權。接著，就會跳出 Facebook 通知，確認是否繼續串接，點擊確認即可。

輸入好 API 以後，我們還需要回到 Social Follow > Networks ，貼上「 帳號 ID 」。

Facebook 和 YouTube 帳號 ID 對應的位置分別如下，大家可以當作一個參考：）

貼好各自的社群帳號 ID 後，選擇保存即可。

因為可串接的社群軟體多達 20 幾種，所以這邊就不分別介紹，若有串接其他社群軟體 API 需求，可配合 Monarch 官方 API 串接教學，進行學習。

---

常見問題

---

WordPress 學習資源

學習 WordPress 網站架設流程中，或許會遇到一些解決不了問題，可以在下方留言給我，我會盡力協助解答！

接下來，額外分享 3 項架站資源，可有效幫助大家處理網站問題。

資源一：犬哥數位（專業 WordPress 網頁設計公司）

如果你沒時間自己架站、或是遇到解決不了的網站問題。歡迎洽詢 犬哥數位（WordPress 網頁設計公司），請專家製作會更有效率！

資源二：WP 精選模組攻略書

由於 WordPress 主題 / 外掛有非常多種，很多網友私訊我不知道安裝哪一款，才有辦法實現功能。或是已經試了很多款外掛，但始終找不到適合自己的。

對此我整理了 高達 100 多款精選主題＆外掛大全（電子書），這些都是我們團隊協助客戶開發案件時，會搭配使用的。一來外掛品質優良，二來功能性也足夠強！

資源三：官方教學資源（含 FB 社群解答）

如果你偏愛自架網站，也歡迎持續關注 犬哥網站 Blog，我們都持續有發布新的網站架設、網路行銷教學。

或是你比較喜歡看影片學習，也可關注 YouTube 頻道，幫助你更容易進入狀況。

當然，如果你在操作過程中遇到問題，也可以加入 WordPress 架站 x SEO 教學時光屋 – 犬哥網站 ，除了有網友一同幫你解惑外，犬哥團隊也會同步在社團幫助大家。