ブログでは一般的になったtwitterの共有ボタンをプラグインを使用しないで、付ける方法を書き留めます。

スポンサーリンク

1.公式のボタンを使用する場合

まずは下記のTwitter公式ページに行きボタンのソースを作成してきます。 Twitterボタン

ソースをコピーしてきたら、data-urlとdata-textをwordpress用に変更します。


<a href="https://twitter.com/share"
	class="twitter-share-button"
	data-via=""
	data-size="large"
	data-url="<?php the_permalink(); ?>"
	data-text="<?php the_title(); ?>"
	data-count="none"
>Tweet
</a>

ツイート数は2015年11月20日で取得できなくなるため「data-count="none"」とします。

javascriptは、footer.phpの</body>直前あたりに記述します。ボタンを複数置く場合でもスクリプトは１カ所だけで良いし、表示速度も速くなるためです。


<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>

2.オリジナルのボタンにする場合

オリジナルボタンで表示する場合には、javascriptは必要ありませんが、タイトルとurlをエンコードする必要があります。


<a class="twitter-button" href="https://twitter.com/share?
	url=<?php echo urlencode(get_permalink()); ?>&
	text=<?php echo urlencode(get_the_title()); ?>" >
	Twitter
</a>

ボタンは、CSSで作成してもいいですし、<img src=...>で画像で作成してもよいです。