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

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

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

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

5s3HN8Hr40iKyEFWvKIlSPQ6H5AMENAiKU6D puF4k22LJiAEIdi6 sxE4U1yLHYl lePIiqtTxXHoTmPqX7rtPYnX4L53 MWO 2gFxOktERfy JWBVkUHJv Ul MCzqFDp 90lquQb8vRTE7HvMma0IuI RJGzlmbQv3m06 n3u3zvCS1jV0a EPdfP MLyRtlvIYCacBDi64I RH3RufLQDODJRQhfzSyYxFvCGK0wnJE7KRJN aI3oLOFjPY41P8Lwa DPmjC4lAkq3TwWdmdtvzU xk58ifdBnBfaRUuuKHTk4RJAPUjacfuhRvXvvdIbVCbb8yVOxHVetJF8UXC0T90Z0j2 vcokmWm30q88W0Vg8HraqTLC4IKnr0hxG mbO4QA9 nf ICfJizEMxp vtRK6S9qc8U7iFVpxkPtDJRwNPy9tN1LeR9u6je4loELpqBXe4bdRgOQwC1i E9gjEfCA2tAd4ng4aKDPokd3UvTOyGfTLFpA16edoVxGmeonAtrAlZPqWy9B9worQAJxjvLmJTqqJ WBDYxmQjQmeiXMu8saHxlEkmVu79NcJWU8DYTov5ZG1f O9f IR6zaIdWiNPTe1kufgzuI7 C7o1psRxgaEbF2Ko55DAUJ HzE1Xj2JjjOVvbOieGt6fhhCRIxW=w331 h106 no 使用 Cloudflare AddToAny Share Buttons 來分享你的網站

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

5TK mqHC0Vd96JPl9RR5iZDwC3G2XVxSg TnGvh0tPm1OMF0pj3we6IaZK3AeGUZ1g2l8W4TogkmHxNvHAkmHvazOl8fVkWuA5A2ajy61yJsxh2sYJ9 eJoLs6xXHMQKkq0Jx7CIJm8xuJnlqEXynFCbaMSNHGR52BG99FmTaopEirBl FIGoOfedsREQX8 eNezkzOZLWAzvZulZ4b1mmhWatzUNlRWbEqMQm0EeUx7a803Cj4DGFIDTs W1DiAMsJeyBxYtE0oRQ4u4vw8vl9TJVumDWFjmPJGgKEbxbzZnWPFjQePpALX3Ah8zX8nKhqJaX6tm 5wqreVTsuRhnRCiCpsOStlTZnlTgtZ16HIBQAT it5 EtFCcwgiD3veWXYicbFV4KQLaGgn 62Or8YAKdB0lCgKbReRYS6gmouPxIXbJXVtpM9xcdRxWRhBouD4bS5Q53NGP Vfca6T TEGzk88iTYfCvOl0XDF REscobCiFrfkGuZ8FnRB ZKcZshjX8SsFOJ7kN96JSpUEDPFWJ3qXWj7O1pzcxZNaMNyQPkFG9DKwUXJ pDQHb5sbii0B Qq4zoTDFVuGd5Bhnt5FMEJenNj7Gc EOPBG883bxdVzogcous4uDf4bsZ7LRReovGswq8x zhW vAhrDoQUNHk22=w1877 h578 no 使用 Cloudflare AddToAny Share Buttons 來分享你的網站

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

eu84Gz Xxs5gOlyswLynXCEMMbXY3EITxQgNL1l 58t2WlPOPhtdbM2990ZOrGZb8g1metaXVFYAAL0eIjA2Rrdp8lDSiHFn4PLpzlyD55xtZj5IUgILFI7x7J xc1Ydhsz7Cf4lMdx04R noB29Lqk2EY1EUCgg CBXzpDWi0dfXdvY6I4rvky8o4v Z1TyX0TGFuz WINVoyXQYBlpmuqnO0Lu6WdXttDQJWfGSFuMZK75Ic 957t4fRuFVpsS9VbIylmAwK6Y08KacsF8mLb0Xz0pDo8KnEtOFysiqPHSoh41c TFyWkCejyaqsVC6rI h8XbzRPhbK hMYhPAKVAjkKUyDRLl9g8FBRZRVByrn44XiVsg89Jj6SyUEfpyhZm8bvlin6m1JYLz9M0bKCP1AbbL JmP4gSXidIJKTktA 39GGSavdTkvFDcitlXO7s3i6o1gsfee xLwf3wR3coB lVHpdWa2c MV2pr0KfZBsoNVjXAtuGa2tHeARzNjY1T4nsObwE9h2HWx4BznRy1JxBqVrqSMnIdnv3cIo IAjGqe4qZKps wBhnWKJeEhDwFl WltbaAwQ9qyVwfLOa0ZMa3F7OSmN elMX0NTHcDg7WX8UvJikHW Pi DQPlG8qvBNxidslsKPEYPTZdnIQ59B=w306 h362 no 使用 Cloudflare AddToAny Share Buttons 來分享你的網站

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

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

78WPmB8TgpxnRCrfY79GMLO7MusIPGajc1rlPvgvoa1kW dphcBGcsXKusPZt hP6fe6LtXDibkWim3lBz8qkW 1gOXswEZuUc5a6sqBS6pfY4XxJpoUseK9UyXLgvL1ui9 K9ttlnxld31GSIUO Onh8UaXz4pSp0xrjX0CpIZyW0ggw9BgzyHhZNa 1k lUToOl11j8xDb1Yt0eZVhi1Qvddmcsr T5uE hdLTcKgddGGJIAR6NmxqEhLn3bPb3 afB6NZEKzKPvJurhIM AV3Jg4EKMMxBCxlKuOCFTvpObVxSdCLp7fUwXOgS nFD5lzVYqO8UFAOKERQz ykQxlembgwMLCEFL07 FYAHrq5WjjTatR4 lvfwNEzTl2wb06YcghAwwR4xOeec90n8Am516bx7sfeOGe mQJg4rLd4TdBqaTFWemqPtIkdeO7wKo9 GXnfiiRrWTpjRfC7AVPHQYCuhs17A6P0hPRP7K44anFTGhJypTBwZIUbtt74CCMnEll66bgvABfU ThK6CWP j3FKfnse3GdkeTEWpd7BcT7OCwX3OG7poMtOw 7AUNli4uwba0HXBpDxfCDUEtwbyuEjF1PyvqIljmMnRyIrRNTLWIkN ka IobhqtfBbHjxqJ2rr8cHbxbv5tErvHJlQ8TGj=w514 h416 no 使用 Cloudflare AddToAny Share Buttons 來分享你的網站

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

szq2ANUhmbyv9KGQU2yrbOW cfCMmDI42nddsN6i7 kTkj42W700iL5oc0AyeyABYkbXNkcETLu9ARLKONd 23DD6cMQSdKUPMCTvjZDzB9E B5mhma2y9pEFC1Vm4ypWCekOWw AgWjYZkbPZEpwNCmaex iEY w60BvRTyRj5yi tU62VQpVT3JGo4zuYfpSV5bQnwTXpjPBnuLwLWYOeM6WzccRagL92d0EXIK0Qhe32jDalEJrSCCq5xV7WQ kDQmZiHLtH2TxZocp6cVMCWN xjCrh3 N8c3 AFRRbtCjfOKQrT0yX91b MfqZackXJtFxVN9ZA6SwwZOhpcbBkzg7lCnUs0hSNvv75xGjlNStqSq2YsosM1LbQzm74 XBO71wtDRwvEDICuEA 2LC8 1c2z0IrD63QChhcxcNn0 ODWU9Se qrZNG9z43I PlxRYyW3xYaqsq8DU bJwqwbZhj6e9H81k s0Ny 2xwF 6TTCEoZ16p0DjvGx3wsr5fOrg cEp9Tr5JBoHbO2V zKjmukI59spTWjBRyX8ebh01L8hhWdsy0LEbxk2Ak7SCUBQ5 gYjTeFtO5D3h2b1LXnptqCLWja6lhf1wFwvgkwNF Az1WiJ6Fmzjyhs2FnSdLPvrpvAZ3dLxgVRFHoiXz3 pUKm=w490 h681 no 使用 Cloudflare AddToAny Share Buttons 來分享你的網站

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

bsHGeTh1MLLegw2ST1VuAfHqhljRRHJChBfJKnoNMtwFndbkESX24x1SOq1d0ldXM7qSGhlTUwlndGDPCKFfFc5 f7C5A1 krV4Sh26qVZWtiN1HGkQm5qIE0MurLArXVJ2rz2u0Hk sd2LS mMm epwBO WuehyskafAcHMDml7NsAfeLCYMrn87xVFHC0E4dF1ycN ESYNu4ZVYt41geqFd1KxTojcXgWpZVDHkQAfonyJsJ m2C1ubupj DT5ieOJ7CnbrDFgpvWgYq3DtZxdW2gskQR5rvOHCTde8q2UzLSsHfgmXdomZXRJz 1es83OBTodNGIt zyS2A2HbyYYcZeThCXQswJzQqWV2iOBxlnP rcMsbSc3UQI3guU4oiWnGOeV230jS60MCuKJQNGauOJkrAXOtBxmPQOYB4WyaCL5UzuHDTMan8izHgv1DZElLc3LHYPpyvH4JF afBneavJ4w97PzM iQsF2Xv878E7Kd1p7fdIYdwa PA7Uv YVGQQy9xNa9LP ocSRRvxDH2HE40Ta GFvOCxAPTzwvLewMH2xrIp19 GVIOmWmUYxfwrlVndCD5ZssTnk k2KBBFKEeUf8Pw5OjjI0uhR dMouNXAfzVO8EFlIDBNcQOLmSKveHxDg XBo rBD8DnTt nc=w529 h304 no 使用 Cloudflare AddToAny Share Buttons 來分享你的網站

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

ZEthz1NVeuPbHVBZmhJJBqpa uLlvQtq6Wb6A9LCKpPNWycdNggn4FQiBtKby25B06n1pnkIMrfSfNRTmAtkS3l6VbE5lDvMytxEuGg8k VdeVZ2 HTIXnmO 2uNMR4JLXHTGH4ImRw1GTPuQCYqZ39PBiAJ2e 6RzxFXkOQMWWkZPOzfAsG0liF4nobLqVzj4Rwa3EKQ2dmZkJq7t1KS1s2gtltZJ3ks4md0xObEl2naSrp egrYqi8jYhPYBTk62sNSVLPrVSaDMogXnqIWKg4 zUFaXdnVfsj8YRl8FJVNPOJnP7Zmnr3yulME7Rft6Hgk6dVQpyCqII3DTojk9cyDOln2ko4DpTHKSr45raUlyqc9pITcdxW95oTcfI4wVGfXDOVQwwUAOKbtZa6r1TyQX3i4wvKqmXtO4QZMtppdixwIOlV8n xc10V74xaLMPqXs6J42nN2Gp40VDxbZftaCULAhEj99wlgM8itv7UojDvljPwFAMjrCHT6cwHNYqF5YxoW90nWmHNXud b g72mghnOIJcR5M9kh0vDrbw 5XfBLU4Sx7CYZMa60mqTS1 aFt5VG9EpNnR88FMiW2yaDlL14RvrXXDEgi0tNs Gaol6jqWRo5o5uZdYJMG3marjuf cBinDeb5qRy71Oe6q2h 0tu=w397 h100 no 使用 Cloudflare AddToAny Share Buttons 來分享你的網站

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

最上方選單,點選 DNS 選單

jSl058r50BQ770RY4Tss2W4N o7e1jtTYcFppmwG4zv3CZEcArEYJmmkPbZ03mgjtB5hoNsZZt7iy2zoLcjGxxNgTkSyAdLgdlTX13WuJv1obKyNY3ccb9KNDzV Sm8vIPpZUxuCyi7JJ0Ei41ZElrE rM6vf1oTOmqjK EH6vTAhxA9aGSGYnV4laN1cnWt5JuLyjI0AsyCifTchtfk6vcV PHGIU5JTeEmpQrRqKqM1EOqc7Zxzs8WQWYLU5DXb8HI7bkz4Nd6JEGsQ40B7TL 5vioKJZmTth T IosDtQYtQbIDSD3IB8ewUd7AMAEiTLlzkLRxI0FulYPV8lGn8HWRBX9bzsh1Vm3AGzbGtptrK3HG8JYgQlUug4gTqeOPOLy2cABULBo1qM66su4nXnl3qeiEj5qHcRq5UShmVY0T92NBFfoCZUpy9eAkloayb6XR2mvz3H bsiaRjPbx jl1XHeYcgxAcfnrMqfiAm OIe40jPMCWtV8RADQ lF0pAQpDx 0MKMrhYQEql0IGycFHDY5PkIZNRY3z7Zk2hHMK7 PXxOgGUod GJJw9L BJtAEB9r7qpHIX7YVPNQhblHMRtplc7Edboaf MNzszHwHcBtXyew2YjfV1JO80k4RyxW0BMdd1cxAa3QPRey pXBkwv0j=w327 h99 no 使用 Cloudflare AddToAny Share Buttons 來分享你的網站

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

faOF8fFxauyjCabQ0r0wzZ9Jqi3DPIPpp6UIvb1zqMLrchgMWXeUTNG34Hw7Mbc1hISVFgpB2zql8IvN640bcjiAgMjqb1nl7r2NzZEuO0Dyn6Ch7SZd gdv7rUKlQobi1 B7E04r7rvgiHU62u JR9XFWRIFTHWrZjz843UGYJh9NIWDcF2HG3ablLyIPXeLwzD8 ZfYL198cmJQNOlyEvg3ZXV5Un8t0xRCQTsUU3ihaP5myQnZ1bW6OhfGpM6FYSARnLJS4STbd8fv uXvf1ZSUN0PwCImCbvzRzde1WZMkraSqwh1KJm4LoqQ28qUlDlLu1ncfQ1ZTLgUHq1QVkzOCQZrpcDLg3dVaisOUIasbtSEpyCcOmp4EIALqUUixgYX8RIG7zES1ivvAn2t3UUxZWE8yxLk3wbsOWzoMB8yPXsPqFzM 9SG8WvYXT0mOUJK5vjHhSnAR2Hdy3bwqeAa7fKx3NrZ8jNVIh7OiSEpFIcsftqUM iu1iPrP jSBcHHaEmsnLK9ixTs3hcZNvCg7 V1IhU4taZnJbL5wrRC0uuErLMC6tkV yGMawM5KeFT4i74AmtRWVESJGnuWQa Y1TCaW444GMKZqm24GkDVBMoX4BizwCPMeyNezBMuqZxd3aW5NhRTjachEU8CvtR624oCkG=w1035 h181 no 使用 Cloudflare AddToAny Share Buttons 來分享你的網站

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

ENDd5BZBpBpANnBI6mvTFzijYMr QOlbQAN7EO7FDIBlASXcNOodVZKPy4tSRj2mjejqCN3vPVW7GVFtcuegZnjcjCHkC6rM VdrQzssmFUYBLZ qAjG28xPmX0p0ebtsafwLsJztQvgH9riwPNtkZhp5skXm4i4FQXY23c1iKaByplmwihcEP IWFd8v5fqgsGyPvY02FrxabmlW7lXAL76bo290qFpku8fpeYs kSK UQdZkEwi64 Li9V0yCStmIL7WNObCfwkGsUB55191irnLmrOXvYJyN1Kt3b8pLfYsmzjHoR4WfH5b8v19W1oIZTYWGhnhlqjGjPbYzZNgR0UY4LuasNDo lATDtrWqSLkYO9maqS97X98NGrz aQOfWwA0C jA KSnVGB5qqHVn4zpArTj1jdC4UkuKHXNQuuwDERnLMShdGBqdzMKB6xELSr cbN2zjGZs75T2pGERXV0aeKij7g25 IpEe8xTJryxqukn W7j8b1ne90TMcuHkhVp77e9q5mudoVPf6NuJX8WIGugx5ZDj3CYgDFE abSLqzqIKqLctOmYxDIxGEyfKHOfLwh BhTctKTYieyep0R Pa6GCDXH1c571uTIdY Uf8gT4jMealquz2Ny1ayFihGLT hVAwHNPTAxBeLkw86qqfY=w157 h335 no 使用 Cloudflare AddToAny Share Buttons 來分享你的網站

Cloudflare 系列文章:

    發佈留言

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

    這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料