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

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

twitter-push-button_00

設定方式

建立「推文」按鈕的 code。使用 Twitter 提供的 工具,依設定的資訊,自動產生所須的 code。

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

<!-- 所有推文容器 -->
<div id="push-button">	
	<!-- Twitter 推文按鈕 -->
	<a href="https://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="jacky_small" data-lang="zh-tw">推文</a>
	<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
	<!-- Twitter 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;
}

完成的結果。


發表迴響