如何在網站加入 Google+「+1」按鈕來推送文章?

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

google-push-button_00

設定方式

建立「+1」按鈕的 code。使用 Google 提供的 開發者,依設定的資訊,自動產生所須的 code。

將 code 貼至 WordPress 的 single.php(獨立文章模板頁),並建立一個 <div> 容器,包住貼上的 code,可用來收納其他「社交網站」的推文按鈕,例如:Facebook、Gllgle+1 和 Twitter……,方便排版。檔案路徑:/wp-content/themes/{主題名稱}/single.php

<!-- 所有推文容器 -->
<div id="push-button">	
	<!-- Google g+1 按鈕 -->
		<!-- Google g+1 按鈕。social plugins 必備通用語法,看要加在哪裡都可以 -->
		<script src="https://apis.google.com/js/platform.js" async defer>
		    {lang: 'zh-TW'}
		</script>

		<!-- Google g+1 按鈕。顯示按鈕的語法 -->
		<div class="g-plusone" data-size="tall"></div>
	<!-- Google 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;
}

完成的結果。


發表迴響