5330-bookmarks

シェア（共有）ボタンを追加する

WordPressで作ったサイトを宣伝する上で、ソーシャル系のサービスが提供しているシェア（共有）ボタンの設置はかかせません。

シェアボタンを提供しているソーシャル系サービスはそれこそ色々ありますが、サイトにボタンをごちゃごちゃ乗せるのも、見た目上よくないですし、使い勝手も悪くなってきます。欲張らずに、日本で人気のあるサービス３つくらいに絞った方が良いでしょう。サービスの追加や入れ替えは、後で簡単にできるので、ここではTwitter、Facebook、はてなブックマークの３つに絞って解説します。

  1. Twitter Retweet（Topsy Retweet Buttonプラグイン）
  2. Twitter Retweet（公式リツイートボタン）
  3. Facebook いいね！（Like!）
  4. 新はてなブックマークボタン

1. Twitter Retweet（Topsy Retweet Buttonプラグイン）

http://wordpress.org/extend/plugins/topsy/

Twitterのリツイートボタンを追加したい場合、いろいろプラグインがあるので、それを使うのが一番お手軽です。なかでもよく使われているのが、Topsy Retweet Button プラグインです。

プラグインをインストールしたら、設定メニューの下に「Topsy」というメニューが追加されるので、そこから設定します。デフォルトの設定のままでも動きますが、リツイートの中に自分のTwitterアカウントを入れたいときは、Retweet Usernameのところに入れておきます。あとはVisual Appearanceでボタンの見た目を決めます。

すると上のようなプレビューが表示されます。設定のButton Placementでブログのどこにボタンを挿入するか指定できますが、大抵、ページの上か下に差し込まれることになるので、細かく差し込み場所を指定したい場合は、PHPの topsy_retweet_big() というコードを使って、single.phpのボタンを表示したい場所に差し込みます。するとWordPressのページ上では、ボタンを表示するためのコードが自動で生成され、ブラウザ上でリツイートボタンとして表示されます。

2. Twitter Retweet（公式リツイートボタン）

Topsyのような外部サービスではなく、Twitterが提供する公式ボタンを使いたい場合は、プラグインを使う方法もありますが、差し込み場所を自由に指定したいのであれば、リツイートボタンのコードを作って好きな場所に差し込みます。

公式ボタンは以下のTwitterのサイトで作成することができます：

http://twitter.com/about/resources/tweetbutton

サイトに丁寧に説明されているので、ボタンの種類を決めるだけで簡単に公式リツイートボタンが作れます。

できあがったコードをsingle.phpの好きな場所に差し込めばOKです。

3. Facebook いいね！（Like!）

Facebookのいいね！ボタンもTwitterの公式ボタンのように、Facebookのボタン作成ページでコードを作ります。

http://developers.facebook.com/docs/reference/plugins/like/

  • URL to Like：空のまま（空にすることでボタンが表示されているURLを使います）
  • Send Button：アンチェック（SendはFB上のお友達との共有に使います）
  • Layout Style：box_countを選択（他のボタンと表示を合わせます）
  • Width：幅は”50”ピクセル（他のボタンの横幅がそれくらいなので合わせます）
  • Show Face：アンチェック

右にプレビューが出ますので、残りの項目を設定して、見た目の微調整ができたら、Get Code ボタンを押して、コードを生成します。するとiframeとXFBMLの二つのコードが表示されます。

どちらか好きなコードを、single.phpの好きな場所に差し込みます。XFBMLを選んでも、iframeのコードが生成され差し込まれます。

4. 新はてなブックマークボタン

新しくなったはてなブックマークボタンも、はてなのサイト上でコードを生成します。

http://b.hatena.ne.jp/guide/bbutton

URLとタイトルにブログの情報を記入し、好きなボタンタイプを選べばコードの完成です。できあがったコードをsingle.phpの好きな場所に差し込みます。

ボタンのレイアウトを直す

HTML要素としてsingle.php上に順番にボタンのコードを並べても、ブラウザ上で見るとボタンは縦一列に並んでしまいます。通常、ボタンを横に並べる場合が多いと思いますので、HTMLのリスト表示とスタイルシートを使って、横に並べます。

HTML


<ul class="socialbutton">
    <li><?php topsy_retweet_big() ?></li>
    <li>"ここにLike!ボタンのコードを入れる"（長いので略します。）</li>
    <li>"ここにはてなブックマークのコードを入れる"（長いので略します）</li>
</ul>

CSS


ul.socialbutton li {
    float: left;
    width: 50px;
    margin-right: 10px;
}

まず、HTMLのリスト表示に使うulとliのタグを使ってボタンのリストを作ります。ulタグにはclassにsocialbuttonなどの名前を付けておきます。liの中にそれぞれのボタンのコードを入れておきます。

次に、スタイルシートに先ほどHTMLで作ったリストのスタイルを定義します。ulの中のli要素はfloatで順番に横に並ぶようにし、widthで横幅を指定します。margin-rightで各ボタンの右側の余白を指定して間を少し開けます。これで、liの順に左から右へボタンがきれいに並びます。