WordPressに公式「Tweet」ボタンを設置する場合の注意点

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)は自分のアカウント名に書きかえてください。

Comment

  1. WordPressのトップページ(index.php)で公式ツイートボタンのURLを各記事別になるようにする設定方法 | bl6.jp

    2012-05-31 09:13

    […] WordPressに公式「Tweet」ボタンを設置する場合の注意点 | Sabakura Blog […]

コメントを投稿