如何在網站加入 Facebook「讚」按鈕來推送文章?

使用 Facebook 的人越來越多,且現在幾乎人手一機的智慧型手機,在有空閒時總會不自覺的上 Facebook 了解一下朋友動態、時事新聞或是發表一下自己目前的心情。相信大家在各大網站、及部落格上也時常看到 Facebook『讚』按鈕的蹤跡,有些人與小傑一樣自己在經營部落格,希望別人看到不錯的文章時,也能有 Facebook『讚』按鈕,幫助推送此文章,那如何在部落格加入 Facebook『讚』按鈕呢?

facebook-push-button_00

設定方式

建立「讚」按鈕的 code。使用 Facebook 提供的 社群外掛程式,依設定的資訊,自動產生所須的 code。

將 code 貼至 WordPress 的 single.php(獨立文章模板頁),並建立一個 <div> 容器,包住貼上的 code,可用來收納其他「社交網站」的推文按鈕,例如:Facebook、Gllgle+1 和 Twitter……,方便排版。為了讓Facebook「讚」按鈕,自動抓取對應的文章網址,須將原先「要推送的頁面網址」更改成動態顯示網址的語法 data-href="<?php echo get_permalink(); ?>",如下第 17 行。 檔案路徑: /wp-content/themes/{主題名稱}/single.php

<!-- 所有推文容器 -->
<div id="push-button">
<!-- Facebook 讚按鈕 -->
	<!-- Facebook 讚按鈕。social plugins 必備通用語法,看要加在哪裡都可以 -->
	<div id="fb-root"></div>
	<script>
	(function(d, s, id) {
		var js, fjs = d.getElementsByTagName(s)[0];
		if (d.getElementById(id)) return;
		js = d.createElement(s); js.id = id;
		js.src = "//connect.facebook.net/zh_TW/sdk.js#xfbml=1&appId=348910951871250&version=v2.0";
		fjs.parentNode.insertBefore(js, fjs);
	}(document, 'script', 'facebook-jssdk'));
	</script>

	<!-- Facebook 讚按鈕。顯示按鈕的語法 -->
	<div class="fb-like" data-href="<?php echo get_permalink(); ?>" data-width="450" data-layout="box_count" data-action="like" data-show-faces="false" data-share="false"></div>
<!-- Facebook END... -->
</div>

設定推文容器 CSS 樣式。檔案路徑:/wp-content/themes/{主題名稱}/style.css

/*
 * 所有推文容器樣式
 */
/* 設定容器定位點 */
	div#push-button {
	position: relative;
	margin: 20px 0 0 0;
}
/* Facebook 讚按鈕 */
div#push-button div.fb-like {
	/* 依需求設定 */
}
/* Google g+1 按鈕 */
div#push-button div#___plusone_0 {
	position: absolute;
	bottom: 0;
	left: 61px;
}
/* Twitter 推文按鈕 */
div#push-button iframe#twitter-widget-0 {
	position: absolute;
	bottom: 0;
	left: 131px;
	width: 50px !important;
}

完成的結果。


發表迴響