犬哥網站

希望這篇文章對你有幫助!

如果希望我協助「 網站建置、主機代管等 .. 」,歡迎 聯絡我
如何在 Divi 加上社群分享+關注按鈕?(使用 Monarch WordPress 外掛)

如何在 Divi 加上社群分享+關注按鈕?(使用 Monarch WordPress 外掛)

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

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

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

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

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

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

在 Divi 加上社群分享+關注按鈕,使用 Monarch WordPress 外掛影片教學:

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

1. 開始前需準備?

WordPress頁面編輯器 :Divi 佈景主題和頁面編輯器
Divi 佈景主題和頁面編輯器

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

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

使用 Divi 主題,完整架站教學(全攻略分享)

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

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

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

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

WordPress頁面編輯器 :Divi 多種佈景主題樣板
Divi 多種佈景主題樣板

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

WordPress頁面編輯器 :WooBuilder 購物網站編輯器
WooBuilder 購物網站編輯器

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

方案評論

Divi 的使用方案很簡單,它提供「 年租用方案 」和「 終身方案(一次性)」,這兩種價格方案

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

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

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

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

產品定價

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

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

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

★☆ — 重要資訊 — ☆★

犬哥網站與 Divi 有長期合作關係,點擊此連結 Divi 20% 折扣,將可享用任一方案 20% 的折扣優惠,請一定要把握唷:)

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


2. Monarch 是什麼?

Elegant Themes 旗下產品:Monarch Social Share 社群分享外掛
Elegant Themes 旗下產品:Monarch Social Share 社群分享外掛

Monarch 是由知名 Elegant Themes 公司,所開發的社群分享、關注按鈕外掛,是環繞 Divi 生態圈的其中一款功能外掛。

它可在後台選擇多款社交軟體串接,並顯示在 WordPress 頁面不同位置上,也能夠使用短代碼,自由選擇想顯示的位置。

Monarch 可放置社群分享&關注按鈕在 WordPress 頁面上

也能客製化按鈕樣式形狀、背景顏色、文字、 Logo 顯示、動畫效果等 .. 外觀設置,同時對移動式裝置(平板、手機)也有很好的響應式效果。

管理方面,除了直觀簡單的設計,還能夠顯示點擊次數等 .. 數據分析,對於站長來說是很方便的外掛功能。

Monarch 可在後台檢視數據

如果你想使用 Monarch 外掛,並且繼續下方的教學,可先前往 Divi 完整教學 購買 Divi Theme,就能享有完整的公司套裝服務。

或是點擊下方按鈕,也可馬上享有優惠價格,購買 Divi 主題!


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

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

Step1:下載 Monarch 檔案包+WordPress 主題安裝

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

登入會員後,從 Account 列表,找到 My Downloads

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

Monarch WordPress 教學 :安裝 Monarch 外掛

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

wordpress外掛安裝 :上傳 wordpress 外掛(zip 的檔案格式)
上傳 Monarch 外掛(zip 的檔案格式)

這樣一來,Monarch 就安裝成功啦!

Step2:取得憑證,激活 Monarch

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

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

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

Divi教學 :前往使用者&API Key
前往使用者&API Key

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

Divi教學 :找到使用者帳號 & API Key
找到使用者帳號 & API Key

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

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

激活 Divi 軟體憑證

這樣我們就激活憑證成功,可以開始使用 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 媒體圖片。

前往 Social Sharing 設定,選擇按鈕顯示位置

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

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

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

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

前往 Networks 區塊,選擇 Add Networks。

前往 Networks 區塊,選擇 Add Networks

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

選擇想串接的社群軟體,按下「 Apply 」儲存

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

填寫顯示社群軟體名稱

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

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

Step 3:設計 SideBar 側邊欄按鈕

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

進入設計 SideBar 側邊欄社群分享按鈕區塊

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

下滑繼續進行 Sidebar 社群分享按鈕設定

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

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

設計按鈕顏色+選擇顯示位置

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

Step 4:前往頁面查看+測試按鈕

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

嵌入側邊欄社群分享按鈕成功~

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

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

詳細的位置圖如下,給站長在進行設置時,當作一個參考:)

Social Sharing 社群分享按鈕,可選擇放置多種位置

彈跳視窗則會在頁面閒置,或下捲時出現(若有啟用+設定該項目)。

Social Sharing 社群分享按鈕,顯示 Pop up 彈跳視窗

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


5. Social Follow 社群關注按鈕

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

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

準備好的話,就開始囉!

Step 1:串接社群媒體

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

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

前往 Social Follow 區塊,新增社群媒體

出現媒體頁面,依據站長需求勾選,這邊我先勾選「 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 側邊欄 」,並進行儲存更新。更多 新版區塊小工具教學

在側邊欄加入 Monarch Follow 小工具

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

成功在側邊欄新增 Social Follow 社群關注按鈕

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

方法 2:短代碼嵌入頁面&文章

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

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

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

進入短代碼生成頁面,開始設計短代碼形式社群關注按鈕

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

取得 Social Follow 社群關注按鈕短代碼

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

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

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

在文章段落貼上短代碼

更新或發佈文章後,再度前往文章頁面,會發現成功在 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 」選項。

開啟「 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 串接章節,取得方式是一樣的唷!

前往 General Settings > Main ,貼上 Facebook API

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

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

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

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

Facebook 和 YouTube 帳號 ID 位置

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

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


常見問題

Monarch 是什麼?

Monarch 由知名 Elegant Themes 公司開發的社群分享&關注按鈕外掛,是環繞 Divi 生態圈的其中一款功能外掛。

可在後台選擇多款社交軟體串接,顯示「 社群分享&關注按鈕 」在 WordPress 頁面不同位置上,也能夠使用短代碼,自由選擇想顯示的位置。

如何使用 Divi 主題+Monarch 外掛,嵌入社群軟體分享&關注按鈕?

購買安裝+激活憑證後,前往 WordPress > 工具 > Monarch Settings ,即可分別新增 Social Sharing 社群分享&Social Follow 社群關注按鈕。更多 WordPress 後台教學

社群分享按鈕,也可直接在 Monarch Settings 頁面做全站式設定。

社群關注按鈕,則需要額外串接社群帳號,以及生成短代碼,張貼至 WordPress 文章 / 頁面,或前往 WordPress 外觀新增小工具。更多 新版小工具教學

本文有詳細教學,若有需求,可以詳細閱讀進行學習:)

若不是使用 Divi 主題,該如何串接社群軟體?

如果不是使用 Divi 佈景主題的站長,但想串接相關社群軟體,可參考以下教學文章。

FB / Google 快速登入、分享:如何設定會員快速登入 / 註冊+社群分享(FB & Google)?

在 WordPress 嵌入 IG 貼文:如何將 IG 嵌入 WordPress 網頁 / 側邊欄 / 頁尾?

串接 Facebook 粉絲專頁 / 社團:如何在 WordPress 網頁嵌入 Facebook 粉絲專頁+臉書社團?

串接 Facebook Messenger:如何在 WordPress 網站嵌入 FB Messenger?


WordPress 學習資源

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

如果你沒有時間自己架站,或是想委託專人服務,那可以參考我們的 網站建置服務

我最近也開啟了 YouTube 頻道,裡面有些影片教學,你也能搭配 Blog 一起學習,應該會來的更加順手(歡迎訂閱我+開啟小鈴鐺,可收到第一手影片教學通知)。

當然,如果怕問題描述不清楚,也可以加入 WordPress 教學時光屋 – 犬哥網站 ,我同步也會在社團中幫忙解惑。

希望這些對你有所幫助,祝架站順利啦。

犬哥網站:wordpress教學社團

Leave a Comment

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

回到頂端