分享按鈕 AddToAny Share Buttons 部落格文章必備

分享按鈕 AddToAny Share Buttons 部落格文章必備

網站裡有那麼多篇文章,如果你添加了 分享按鈕 的外掛在你的網站中,就能讓閱讀者更方便快速地分享你的文章哦!這次ㄓㄓ介紹的 社群分享按鈕 是我個人覺得以免費版來說,調整彈性很大的一款。推薦給大家~~

延伸閱讀:
什麼是WordPress?.com和.org差在哪?
免費虛擬主機試用
其他外掛分享

AddToAny 分享按鈕 是什麼?

AddToAny 是一款可免費下載的「社群分享按鈕」,同時也是 WordPress 最受歡迎的分享外掛!

為你的網站增加分享鈕,可以讓閱讀者輕易地分享你的文章至其他社群媒體,像是:FB、Twitter、Line。藉此增加曝光度與流量。(還有你的營收😉)

AddToAny 分享按鈕 WP外掛

這個免費的外掛部件是可以依照個人調整,做出一款屬於你的獨特按鈕!不論是顏色的搭配、社群的選項、還有分享時的文字敘述都能客製化!而且不只在WordPress上可使用,它也支援其他平台,像是Joomla、Blogger都有它的身影。

網站名稱:AddToAny Share Bottoms and Icons
網站連結:https://www.addtoany.com/

安裝AddToAny 分享按鈕 外掛步驟

|安裝外掛

首先到WordPress後台,到「外掛」的區塊選擇「安裝外掛」→搜尋「AddToAny」→安裝。

|啟用外掛

安裝完成後到「設定」區塊,可以找到「AddToAny」。點進去開始設定吧!

|個人化設定

在這邊可以看到兩個分頁:標準和浮動。

標準按鈕就是固定在你設定的位置,也就是我的網站目前的設定樣式。(我固定在文末位置)。浮動按鈕(Floating)就是當你滑動頁面時,按鈕會跟著你。你看到哪它就跟你到哪。

兩種方式沒有好壞之分,依照你想呈現的方式選擇即可。

以我個人體驗來分享的話,我較喜歡固定式的社群分享按鈕,因為浮動式的對我來說有點擋畫面😅不過另一方面,浮動式按鈕在視覺上大量曝光,有可能會更刺激閱讀者進一步分享的意願。(歡迎討論)

設定按鈕教學

|圖標樣式 Icon Style

首先第一個設定是「圖標樣式 Icon Style」。它有尺寸可以設定,我是用預設的32px。
「前景 frontground 」指的是社群圖案的顏色
「背景 background」指的是方框內的顏色

裡面的選項又分成三種,我用前後台的截圖來看,比較好懂差別在哪。
「Orignal」一般預設的樣式 (前景預設為白色,背景預設為原社群LOGO的顏色)
「Transparent」透明
「Custom」自訂顏色

|分享按鈕 Share Buttons

這裡有超~~多~~~社群選項按鈕!一堆你沒看過的社群軟體都會在這裡看到😮 從裡面選擇幾個你覺得適合自己網站的分享按鈕吧~

通常大概會選擇3-7個左右,並不是越多越好哦!若太多反而會造成畫面上的混亂,降低視覺上的好感。以文章分享來說,最常用的應該就是FB、LINE、複製連結這三個選項。

選擇的社群分享按鈕中若出現「顯示數量 Show Count」的選項,在前台就會顯示這樣的畫面,越多人分享就能成就感越高(?) 還有一方面是閱讀者看到很多的分享數,會對此篇文章的信任感增加。也會提升你的網站好感度+++

像我的小網站應該不會有人分享我的文章,我就不會開啟這個功能讓它掛0在那邊看的我心酸😂😂😂

|通用按鈕 Universal Button

其實我不太清楚 Universal Button 翻成中文有什麼更好的解釋。不過就功能來說是指「查看更多分享按鈕」的意思。

這裡又分成四種模式,我一樣用前後台的截圖對比,這樣比較好了解~~

(1) 預設的符號按鈕

(2) 圖片網址:可自己設計icon上傳使用
*圖片尺寸記得要和你在「圖標樣式 Icon Style」設定的大小一樣,才不會很搞笑。前面幾個ICON都很小巧可愛的,突然很巨大的圖片在最後面造成版面失控。

(3) 文字顯示 Text only
這裡的文字可自行設定。

(4) 無

AddToAny 分享按鈕 WP外掛

|分享標語 Sharing Header

這個欄位你可以自由填寫,吸引閱讀者的注意!或是選擇簡單乾淨的畫面,不填寫任何文字也OK。

|按鈕位置 Placement

你可以選擇你的按鈕要出現在哪個區塊,有「上方 top」、「底部 bottom」,或是「上下都要 top & bottom」。

Display 是顯示的意思。下面可以自行勾選你希望分享按鈕會出現的位置。

⚠要注意的是 post 是指文章, page 是指頁面!

post 文章
.on the front page:文章頁面
.on archive pages:封存頁面
.in the feed:RSS的feed

excerpts:文章摘要處 (文章列表區)

pages:頁面

media pages:多媒體頁面(這個我還不知道會顯示在哪裡,如果有人知道可以留言跟我分享😄)

AddToAny分享按鈕WP外掛

|菜單選項 Menu Options

在下方有一個「菜單選項 Menu Options」: Only show the universal share menu when the user clicks the universal share button。意思是只有在 點擊 通用按鈕後,才會顯示其他社群按鈕選單。

一般預設是游標滑過去就會顯示選單了!這個小設定蠻貼心的,讓沒有要分享文章的讀者不會被按鈕影響到~

|附加語法 Additional JavaScript/CSS

如果你會一些程式語言,可以在這裡為你的按鈕創造更多可能性。(我不會,這裡就交給大家自由發揮了!)

AddToAny 分享按鈕 WP外掛

|高級選項 Advanced Options

這裡可以設置屬於你自己的ICON,將你所有的圖片,上傳到相對應的資料夾裡面,並且將圖片名稱都改為正確格式,就能做出獨一無二的社群分享按鈕啦~~

指定您的自定義圖標目錄的網址。例如,這個網址 //example.com/blog/uploads/addtoany/icons/custom/裡面包含「facebook.png」、「twitter.png」等檔案。確保自定義圖標文件名與plugins/add-to-any/icons 裡面的檔案名稱相符。

關於緩存的選項「Cache AddToAny locally with daily cache updates」下面的文字敘述中提到:大多數站點不應使用此選項。那如果有跟我一樣對網站、程式都是菜菜菜菜鳥的人,我們就聽它的。

老實說,我不太能理解這段敘述😅😅😅 請原諒我無法運轉的腦袋,不過我這邊也會提供GOOGLE翻譯過的文字和AddToAny官方網站名詞解釋給大家參考的:

Cache AddToAny locally with daily cache updates
使用每日緩存更新在本地緩存AddToAny

大多數站點不應使用此選項。默認情況下,AddToAny異步且最有效地加載。由於許多訪問者已經在其瀏覽器中緩存了AddToAny,因此對於那些訪問者而言,從您的站點本地提供AddToAny的速度會變慢。如果啟用了本地緩存,請確保為uploads /addtoany目錄中的圖像文件設置將來的緩存/過期標頭。

關於浮動按鈕

|按鈕方向

浮動按鈕有兩種方向可顯示:「垂直 Vertical Buttons」、「水平 Horizontal Buttons」。

AddToAny 分享按鈕 WP外掛

|按鈕位置 Placement

靠左 Left docked
靠右 Right docked
置中 Center docked
附加至內容 Attach to content (這需要CSS,我先走了,請大家加油)
無 None

AddToAny分享按鈕WP外掛
AddToAny分享按鈕WP外掛

|響應式設定 Responsiveness

當手機螢幕於小於 多少數值 時隱藏
Hide on mobile screens 數值 pixels or narrower

當頁面從頂端向下滾動超過 多少數值 時隱藏
Hide until page is scrolled 數值 pixels or more from the top

當頁面距離底部少於 多少數值 時隱藏
Hide when page is scrolled 數值 pixels or less from the bottom

響應式的CSS詳細說明可至AddToAny網站中觀看。

|一般設定

從頂部往下的距離 Position
距離左或右的寬度 Offset
(取決於你原本是設定 靠左 Left docked、靠右 Right docked)
分享按鈕的背景色 Background
(可選擇 透明Transparent、自訂顏色 Custom)

AddToAny 分享按鈕 WP外掛

介紹就到這邊,謝謝看完的你們啊👏希望這篇文章能夠幫助到大家!如果可以的話也請幫我拍手按讚,化讚為賞給我一點鼓勵吧~你的小小點擊能夠讓我為這個網站更努力的分享!謝謝你呀~

ㄓㄓ

喜歡分享,可以一直吱吱喳喳說個不停的24歲少女(?),希望能一直保持菜鳥的熱忱去學習所有事情。喜歡水豚。現在還沒脫離牙套地獄。

發表迴響

%d 位部落客按了讚: