如何在WordPress部落格上加入 Facebook「讚」按鈕來分享文章?

記得當時挨踢路人甲沉迷於小遊戲而接觸facebook臉書,時間與熱度慢慢的解除一昧追求流行瘋狂的行為,當回歸理智後發現原來臉書的社群功能才是它主要的拿手絕活,進而發現facebook的粉絲專頁也蠻不錯的,更沒想到會自己架部落格(wordpress),看到別人的部落格上都會出現Facebook的「讚」鈕,感覺好酷哦!為了讓自己經營的部落格有更多的推廣,特別加入facebook、Google+推文的按鈕,期許更多人能欣賞到不錯的文章。

 

首先至社群外掛程式網頁,在左邊選擇想要設定的外掛功能,有儲存按鈕、讚、分享、發送…等眾多外掛,筆者以「讚」按鈕來說明。

 

進入設定頁面後,第一個「按讚的網址」是指定推文的網址指定,除非你要推文的網址是固定的,例如路人甲是要在部落格(wordpress)內文呈現,所以先填一個易記的網址或編號,待程式碼產生後較容易尋找並取代,版面設計就是按紐的型態,選擇預設的standard,box_count、button_count與button,接下來是區塊的寬度指定,動作型態是指按鈕顯示的文字,最後按下[取得代碼]來產生程式碼。

 

提供兩種嵌入按鈕到網頁的方式,挨踢路人甲使用「Javascritp SDL」程式碼,其下方有兩個程式碼區,上方是通用的語法,一般只要放在<body>之後即可,下方式是顯示按鈕的語法,就是放入你想要顯示的頁面位置,為了能動態分享文章網址,藍色框內的網址必須修改。

 

WordPress的佈景主題是採外掛的方式,路人甲無法得知每個佈景主題的設計差異,一般來說文章頁面是single.php檔,在\wp-content\themes\佈景主題名稱下就可找到,利用文字編輯器開啟single.php檔,為了讓Facebook「讚」按鈕能自動抓取對應的文章網址,須將原先程式碼上的「分享文網址」改成動態顯示網址的語法,就是在 data-href=之後的網址改成"<?php echo get_permalink(); ?>"。

<!– Facebook 分享按鈕。顯示按鈕的語法 –>
<div class=”fb-share-button” data-href=”<?php echo get_permalink(); ?>” data-layout=”button_count” data-mobile-iframe=”true”></div>

 

通用的語法只要放在<body>之後即可,筆者將放在header.php上。

 

顯示按鈕的語法則放入單篇文章(single.php)內,其位置擺放也要留意,如挨踢路人甲想放在文章的最上面,所以找到<?php the_content(); ?>語法,插入其上,這樣就可以先顯示按鈕後在顯示文章內容。

 

為了讓自己經營的部落格有更多的推廣,下圖除了加入Facebook讚外,也加入最新的FB「儲存」功能與Google+。若你懂得CSS語法,可以是設定一個 <div> 包住Code語法,並在style.css檔內指定CSS樣式,讓自己的社群分享鈕更有與眾不同的個性化哦!

itwalker
itwalker

或許技術與功力已遠遠不及時下年輕人,但試著去畫一個圓,圓不圓沒關係,盡力就好,如果覺得文章不錯的話,請大家按個「讚」或「+1」,感謝您的支持與鼓勵!歡迎加入我的粉絲團 : https://www.facebook.com/itwalker ,更多關於挨踢路人甲的文章: https://walker-a.com

文章: 2988