ブログ(WordPress)にTwitterボタン、はてブボタンを追加する方法

Twitterボタンはそのまま貼付けるだけで、
同じソースで他のページでもそのURLなどを取得して問題なく動いたんです。

しかし、はてブボタンはそのページのURLを取得できないので、
毎回、URLを入れないといけない仕様です。

まずは、Twitterボタンの設定方法

公式サイト:Twitter / ツイートボタン

上のリンクから、簡単に設定できます。
好きなデザインを選んで、
WEBサイトから共有する際に、ユーザーのツイートの中に含まれるテキストを入れたり、
そして、最後にページしたにあるソースを、自分のブログに貼ればOKです。

だた、下記を追記してあげると、ホームに表示させた時も
記事のURLを取得してくれます。

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

実際にいれてみるとこんな感じ。

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

次は、はてブボタンの設定方法

公式サイト:はてなブックマークボタン

こちらも、上のリンクから、簡単に設定できます。
ただし、Twitterのように「ボタンが表示されるページのURL」というのは設定できません。

でもWordPressならw

<a href="http://b.hatena.ne.jp/entry/URLが入る場所" class="hatena-bookmark-button" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a>
<script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>

この「URLが入る場所」ってとこに、このテンプレートタグを入れます。
これは、現在のページURLを取得するタグです。

<?php the_permalink(); ?>

ってことで、今このブログに入れてるのはこれです。

<a href="http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>" class="hatena-bookmark-button" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a>
<script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>

この記事に関連する記事

コメントをどうぞ