記事の詳細
ブログにFacebookやTwitterなどのソーシャルボタンを設置する方法

WordPressをインストールしたときの初期のテーマだと、ソーシャルボタン(Facebook、Twitterなど)が設置されていません。ソーシャルボタンを設置したい場合は、自分で任意の場所に設置コードを記述する方法、プラグインを使用する方法、簡単にソーシャルボタン設置できるサービスを利用する方法の3つがあります。
ここでは、簡単にソーシャルボタン設置できるサービスを利用する方法と、自分で任意の場所に設置コードを記述する方法を紹介します。
簡単にソーシャルボタン設置できるサービスを利用する
一番手軽にできるのが、ソーシャルボタン設置サービスを利用する方法です。ここでは2つのサービスを紹介します。
ローソンガジェットでソーシャルボタンを設置する方法
ローソンガジェットは、LAWSON(ローソン)が提供しているソーシャルボタンを簡単に設置できるサービスです。
1.まずローソンガジェットのページで色を選んでソースをコピーします。
2.ソースをコピーしたら、ヘッダーやフッターの任意の場所(php)に貼り付けます。これだけで完了です。左端にガジェットが表示されます。
忍者おまとめボタンでソーシャルボタンを設置する方法
忍者ブログでおなじみのサムライファクトリーが提供しているサービスです。
1.まず「設置ボタンを1つずつ選択して作成」をクリックします。
2.忍者ツールズのアカウントを作るか、FacebookやTwitterのアカウントでログインします。
3.規約に同意して、設置するサイトで「WordPress」を選びます。
4.使用したいブックマークボタンを追加していきます。
5.追加し終わったら「コードを取得する」ボタンを押します。
6.コードをコピーして、WordPressの任意の場所(テンプレートの記事下やサイドバーなど)にコードを挿入します。
7.これでコードを貼り付けた場所にソーシャルボタンが表示されます。
自分で任意の場所に設置コードを記述する方法(横並び)
まず使用しているテーマのスタイルシート(CSS)に以下のようなid属性を記述します。
#socialbook ul{ list-style-type: none; list-style-image:none; margin: 0; padding: 0; } #socialbook li{ float: left; margin: 0; padding: 5px 5px 15px; }
後はブックマークボタンを表示させたい場所に、以下のコードを貼り付けます。(ここではTwitter、Facebook、google+、はてなブックマークを設置するコードを紹介しています)
※テキストウィジェットや記事本文にコードを貼り付ける場合は、PHPを書き込めるようにするプラグイン(Exec-PHPなど)が必要です。
<div id="socialbook"> <ul> <li><a href="https://twitter.com/share" class="twitter-share-button" data-count="vertical" data-url="<?php the_permalink(); ?>" data-text="<?php the_title(); ?>">Tweet</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script></li> <li><iframe src="http://www.facebook.com/plugins/like.php?href=<?php the_permalink(); ?>&layout=box_count&show_faces=false&width=50&action=like&colorscheme=light&height=62" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:70px; height:62px;" allowTransparency="true"></iframe></li> <li><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><g:plusone size="tall" href="<?php the_permalink(); ?>"></g:plusone></li> <li><a href="http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>" class="hatena-bookmark-button" data-hatena-bookmark-layout="vertical-balloon" 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></li> </ul> </div>
これでコードを貼り付けた場所に、以下のようなソーシャルボタンが表示されると思います。