如何在 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 基礎設定（連結數據）
• 常見問題
• 聯絡犬哥網站

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

---

1. 開始前需準備？

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

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

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

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

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

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

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

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

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

方案評論

Divi 的使用方案很簡單，它提供基本的「 Divi 」方案和更多功能的「 Divi Pro 」方案，兩者都有「 年租方案 」和「 終身方案（一次性）」。

每種方案都能應用在無限數量的網站，費用也維持在合理範圍，犬哥建議可以選擇「 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 串接教學，進行學習。

---

常見問題

---

聯絡犬哥網站

在網站架設＋網路行銷的過程中，或許會遇到一些解決不了問題，可以在下方留言給我，我會盡力協助解答！

接下來，額外分享 2 個實用資源，可有效幫助大家解決問題。

資源一：犬哥網站（專業 WordPress 網頁設計＆SEO 行銷公司）

如果你沒時間自己架站，或是遇到網站沒有流量、Google 網站排名不理想。歡迎洽詢 犬哥網站（WordPress 網頁設計＆SEO 行銷公司），請專家協助你會更容易！

我們有多年網頁設計、SEO 網站排名經驗，加上上百個高質感作品、SEO 實戰案例，絕對能滿足您的需求！

資源二：WordPress 高手架站課＋SEO 排名飆升課（線上課程）

如果想學習更深入的 WordPress 架站技巧，或是想透過 SEO 關鍵字提升網站流量？

可以參考犬哥近期推出的這兩門課程，課程非常的扎實，都是犬哥自己實戰出來的經驗分享，不打高空只教你做出成績！