Sabakura Blog

Twitterの公式ツイートボタンをWordPressに設置する際にちょっとつまずいたのでメモしておきます。
なお、プラグインを使わずに直接コードを書く場合の話です。

記事タイトルと記事URLを設定する

当たり前といえば当たり前なのですが、本来Tweetボタンを設置する際には各記事のタイトルとURLを設定する必要があります。
しかし、公式ページからなにも考えずにコードを作ると以下のようになります。

<?php
<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="serverkurabe" >Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
?>

このコードを見ていただくと分かるのですが、どこにもタイトルや記事URLを設定する部分がありません。実はこのままのコードを利用する場合、Tweetボタンが表示されているページ（ブラウザで現在開いているページ）のタイトルとURLが自動で設定されます。

ぱっと聞くとそれで問題ないように思えるのですが、たとえばトップページを開いた場合、トップに並ぶ各記事内のTweetボタンは、すべてトップページのタイトルとURLを取得してしまいます。

これを避けるためには、記事タイトルとURLを取得するWordPress定番の関数（タグ）「the_title()」と「the_permalink()」を使って以下の部分を足します。

data-text="<?php the_title(); ?>" data-url="<?php the_permalink() ?>"

よって最終的なコードは以下になります。
（そのままWordPressのindex.phpやcategory.phpにコピーしてもらって動作します。）

<?php
<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="serverkurabe" data-text="<?php the_title(); ?>" data-url="<?php the_permalink() ?>">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
?>

なお上記のコードは、横一行タイプのボタン形式（horizontal）を指定しています。またTwitterアカウント名（@serverkurabe）は自分のアカウント名に書きかえてください。