使用 Cloudflare AddToAny Share Buttons 來分享你的網站

記下來這個部落格一直都沒有開啟分享的功能,是因為 Worpdress 的 AddToAny Share Buttons 套件在小蛙的 theme 會一直出問題,索性就不放了,不過今天在 Cloudflare 上看到一個功能,覺得有趣馬上試用看看,效果很好,這篇記錄一下給有需要的人參考。

Cloudflare 之前有介紹過是一套非常強大的免費 CDN,算起來也很佛心,免費版本已經提供非常多好用的功能了,今天小蛙要再來講它裡面有一個叫做 Apps 的功能。

登入 Cloudflare 之後,進入要管理的 Site 之後,上方選單中的最右邊的 Apps,進去之後搜尋 Share 就可以看到 AddToAny Share Buttons 的 App 可以安裝

小蛙安裝過了有點懶得刪掉再重新設定一次,下面拿另一個套件的畫面來放,點選 Preview on your site

進入下一個畫面之後會看到切割成左右兩邊,右邊是網站的預覽,左邊是一些設定

Buttons type 是設定你要浮動 Floating 或是固定在某處 Inline,Vertical bar 跟 Horizontal bar 分別是垂直的跟水平的,因為電腦版頁面比較寬,因此適合垂直放在最邊邊,當然還是要視每個人狀況而定,一般手機板左右比較窄,因此設計成分享按鈕為水平的,這邊小蛙的設定是電腦版的時候,在網站左側垂直浮動,在手機版的時候則變成底部中央浮動。

接著是按鈕設定,顏色可以選擇預設的或是自訂,下面分別是按鈕大小、圓角程度、按鈕間距、跟按鈕離底部的距離等設定,把下面的 Show sharing options 打勾進行按鈕類別的設定。

如果 Service 下拉沒有看到自己要的服務,可以點選 AddToAny service code 那行藍字,過去找自己要的服務,點進去之後可以看到 code 是什麼,照著填上來就可以了,像這邊小蛙去查了 Line 的 code 是 line,Service 選 Other … 然後 Service code 填入 line 就會出現 Line 的分享按鈕了。

最後下面留一個 Service: AddToAny 的話,就會出現一個 + 符號,目的是如果使用者沒有找到自己要的分享工具,可以透過這個 + 點進去找,最後一行如果留空白,會自動把當前頁面分享出去。

所有步驟完成之後,點選左下角的 Install on all pages,就會安裝在網站上每個頁面的左側。

什麼?你照著設定了還是沒有?那很有可能是你的網站只是透過 Cloudflare 代管,但是並沒有使用 Cloudflare 的 CDN 服務喔!來打開它吧!

最上方選單,點選 DNS 選單

點選紅框部份,變成橘色就表示目前該網址服務有通過 CDN,有通過 CDN 的服務 Cloudflare 才有辦法幫忙加上你所安裝上去的 Apps 喔!

不過還是有點小小的問題,小蛙還不知道怎麼處理,不過沒有什麼太大的影響,想說就先放著,就是 … 它連後台也加上了,變成這個分享按鈕會擋到自己的選單 …

發佈留言

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