[WordPress] プラグイン不要!箱型ソーシャルボタンをブログの好きな場所に好きなだけ設置できるコードとやり方

スポンサード リンク

@_harashinです。

はてブ、Twitter、Facebookなどのソーシャルボタンをブログ記事に表示する際は、“WP Social Bookmarking Light”をこれまで使っていました。
お手軽に設置できるのが素敵なプラグインなんですが、少し難点が…。

記事の上部か、下部かのどちらかにしか設置することができないのです。
両方に表示させるためにプラグイン自体を編集する、という手段もありますが、難しそうだったので別の手段を選ぶことにしました。

それが今回紹介するプラグインを使わない方法です。

横長ボタンより箱型のほうが見栄えがいいと思う

ちなみにこの記事で設置するボタンはタイトルの通り、箱型(Vertical)のものです。
横長のボタンもありますが、箱型のものを選ぶのにはちょっとした理由があります。

それは何かというと、下の図をご覧ください。

▲これが現在このブログに設置している箱型のボタン。

▲こっちが横型のボタン。

ご覧の通り、横型ボタンだとTwitter、Facebook、Google+の右横にスペースが空いてしまいます。

シェアされた回数、いいね!された回数などを表示する吹き出し部分のスペースがあらかじめ確保されているからです。

スタイルを適用して調整することもできなくはないですが、作業がとても難しくなっちゃうのです…。

あと箱型だとサイズが少し大きいので、見やすい、クリックしやすいという利点もあって僕は箱型を選択しています。

作業の流れ

  1. FacebookのAppIDを取得しておく
  2. JavaScriptのコードの指定位置にAppIDを入れてコピーする
  3. コピーしたものをヘッダーorフッターにペーストする
  4. phpのコードをfunctions.phpにコピペする
  5. ボタン貼り付け用コードを任意の場所に貼る
  6. ボタン用のスタイルを設定する

※WordPressを対象にしたものです。
※phpファイルを直接編集するので、事前にバックアップを取っておくことをお勧めします。
※phpの構文ミスで真っ白の画面が表示されると、とても心臓に悪いです。

ちなみにボタンは、はてなブックマーク、Twitter、Facebook、Google+、Evernoteを用意しています。
必要に応じて取捨選択してください。

1. FacebookのAppIDを取得しておく

おちゃのこサポートくらぶ – Q.facebookアプリの作り方とアプリIDの確認

▲初っ端から丸投げですが、上記のサイトがわかりやすいと思うので参照ください。

WordPressでの「いいね!」ボタン設定についてのメモ | MUGA.me

▲ついでにこちらを見ながらOGP(Open Graph Protocol)の設定をしておくといいと思います。

フェイスブック、ミクシィ、グリーで使われている OGP (Open Graph Protocol) とは何か – IT戦記

▲「そもそもOGPって何さ?」という方はこちらにわかりやすい説明があります。

2. JavaScriptのコードの指定位置にAppIDを入れてコピーする

下記のコード、Facebookの中の“appId=XXXXXXXXXXXXXXX”のXXX…にさっき取得した自分のIDを入れて、コピーしておきます。
ダブルクリックで全選択できます。

<!-- Facebook -->
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1&appId=XXXXXXXXXXXXXXX";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<!-- Google+ -->
<script type="text/javascript">
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

<!-- はてなブックマーク -->
<script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>

<!-- Twitter -->
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

<!-- Evernote -->
<script type="text/javascript" src="http://static.evernote.com/noteit.js"></script>

3. コピーしたものをヘッダーorフッターにペーストする

<body>~</body>タグの間であればどこでもいいでしょう。
フッターに置いたほうが、読み込みが比較的速くなるそうなので僕はそうしています。

ヘッダーとフッターがどこにあるのかというと、テーマフォルダの中にあります。

具体的には、ヘッダーは「\wp-content\themes\「適用させるテーマフォルダ」\header.php」、フッターは「\wp-content\themes\「適用させるテーマフォルダ」\footer.php」です。

4. phpのコードを”functions.php”にコピペする

下記のコードを、細心の注意を払いながらfunctions.phpに貼り付けます。
functions.phpも先程と同様、テーマフォルダの中にあります。

functions.phpはコードの冒頭が“<?php “で、末尾が“?>”になっていると思います。

これも貼り付ける場所は任意ですが、誤って構文エラーを起こすといけないので、末尾の“?>”の上部にペーストするとよいと思います。

// ソーシャルボタン(Vertical)
function SocialButtonVertical()
{ ?>
	<ul >
		<li class="hatebuButton"><a href="http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>" class="hatena-bookmark-button" data-hatena-bookmark-title="<?php the_title(); ?>" data-hatena-bookmark-layout="vertical" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a></li>
		<li class="tweetButton"><a href="https://twitter.com/share" class="twitter-share-button" data-count="vertical" data-url="<?php the_permalink(); ?>" data-text="<?php the_title(); ?>" data-via="" data-lang="ja" >ツイート</a></li>
		<li class="likeButton"><div class="fb-like" data-href="<?php the_permalink(); ?>" data-send="false" data-layout="box_count" data-width="72" data-show-faces="false"></div></li>
		<li class="gplusButton"><g:plusone size="tall" href="<?php the_permalink(); ?>"></g:plusone></li>
		<li class="EvernoteButton"><a href="#" onclick="Evernote.doClip({}); return false;"><img src="http://static.evernote.com/article-clipper-vert.png" alt="Clip to Evernote" /></a></li>
	</ul>
<?php }

ちなみにTwitterボタンを押すと記事をシェアできますが、上記コードを編集してシェアするときの文面を変えることができます。
詳しくは@knk_nさんの記事を参照ください。

[ブロガー必見]ブログ内ツイートボタンをカスタマイズしてTwitterアカウント名をイイ感じに表示してみた | けんけん.com

5. ボタン貼り付け用コードを任意の場所に貼る

下記のコードを、ボタンを表示させたい場所に貼り付けます。
このブログでは記事のはじめと終わりに設置しました。

<!-- ソーシャルボタン(Vertical) -->
<div class="sbver">
<?php SocialButtonVertical(); ?>
</div>

個別記事内に設置するのであれば、<?php the_content() ; ?>の前後だと思います。

<div class=”sbver”>はこの後でスタイルを適用させるために付けています。

6. ボタン用のスタイルを設定する

とりあえず僕が設定しているスタイルです。
お好みに合わせて編集してください。

/* ソーシャルボタン */

div.sbver ul	{margin: 0;
		padding: 0}

div.sbver li	{list-style-type: none;
		float: left;
		margin-right: 10px}

リンク集

公式ページ

はてなブックマークボタンの作成・設置について

Twitter / Twitterボタン

Like Button – Facebook開発者

Google +1 ボタン

サイトメモリーって何? | Evernote

参考にさせてもらった記事

WordPress にはてブと Twitter と Facebook のボタンを10秒で貼り付けられるコードを書いてみたよ | ウェブル

WordPress用ソーシャルボタンのスニペット公開したよ! | 世界中の1%の人々へ

WordPressプラグイン「WP Social Bookmarking Light」を外すことにしました | けんけん.com

ボタンレイアウトを見直しました | ソーシャルボタンを縦に並べて配置するときに大切なこと | けんけん.com

新しくなった公式Twitterボタン(ツイートボタン)のデザインを修正する: 小粋空間

完成!

functions.php関連のトラブルを起こしながらも、自分の手でソーシャルボタンを設置することができました。

もしどこか間違ってたりしたら、@_harashinまでリプライを飛ばしてもらえると助かります。

スポンサード リンク

最後まで読んで頂きありがとうございます。
気に入って頂けたら、RSSフィードの購読をお願いします。

RSS FEED

« »