はてブ twitter facebook のボタンを設置

公開日：2011年2月17日 / 最終更新日：2023年05月06日

今まで他のブックマークサービスのボタンを付けていたのですが、そろそろ見直しするかということで、はてなブックマーク、twitter、facebookのボタンを設置してみました。

以下、ざっくりとした設置方法です。コードを取得してWordpressのテーマに貼り付けてるだけです。

はてなブックマークのボタン設置

以下サイトで設定
http://b.hatena.ne.jp/guide/bbutton

コード例
<a href=”http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>”data-hatena-bookmark-title=”技術関係ブログ”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>

個別記事に設置するので <?php the_permalink(); ?> で指定。

twitterのボタン設置

以下サイトで設定
http://twitter.com/goodies/tweetbutton

コード例
<a href=”<a rel="nofollow noopener" href="http://www.google.com/url?sa=D&q=http://twitter.com/share" target="_blank">http://twitter.com/share</a>” data-count=”horizontal” data-via=”mitakasound” data-lang=”ja”>Tweet</a><script type=”text/javascript” src=”<a rel="nofollow" href="http://www.google.com/url?sa=D&q=http://platform.twitter.com/"target="_blank">http://platform.twitter.com/</a><br /> widgets.js”></script>

これは個別記事のURLを持ってきてくれるので指定なし。「data-via」に入れたアカウント宛のメンションとなります。

facebookのボタン設置

以下サイトで設定
http://developers.facebook.com/docs/reference/plugins/like/

コード例
<br /> <iframe src=”<a rel="nofollow noopener" href="http://www.google.com/url?sa=D&q=http://www.facebook.com/plugins/like.php%3Fhref%3D" target="_blank">http://www.facebook.com/plugins/like.php?href=</a><?php<br /> the_permalink(); ?</p> <div id="qhide_37958">>&layout=button_count&show_faces=true&width=80&action=like&colorscheme=light&height=21″ scrolling=”no” frameborder=”0″ style=”border:none; overflow:hidden;</div> <p>width:80px; height:21px;” allowTransparency=”true”></iframe><br />

こちらも、個別記事に設置するので <?php the_permalink(); ?> 。