プラグインを使わずソーシャルボタンを設置する方法

プラグインを使わずソーシャルボタンを設置する方法

これまでFacebookやTwitterなどのソーシャルボタンをブログ記事内に表示するのにプラグインを使っていましたが、読み込みに時間がかかってしまうため、表示速度の改善の邪魔でした。プラグイン自体を編集しようか迷っていましたが、最終的にプラグインを使わない方法で対応したので、その方法をご紹介します。

ソーシャルボタン設置前の準備

ソーシャルボタンを設置する前に、まずやらなければならない作業がいくつかあるので以下に簡単にまとめてみました。(主にFacebookの説明で他の3つのに関しては殆ど説明することがありません。)

設置するのは下記4つです。

  • Facebook
  • Twitter
  • Google+
  • はてなブックマーク

他にもソーシャルメディアはありますが、現在ブログに設定ている事例で説明させて頂きます。

Facebook開発者登録

初めて設置する場合は開発者登録が必要です。

  • Facebookにログイン
  • https://developers.facebook.com/apps/へアクセスし、
    ページ右上の「Register as a Developer」をクリックします。
  • ユーザー情報のアクセス許可の表示が現れますので、
    「I accept the Facebook Platform Policy and the Facebook Privacy Policy」にチェックを入れて「続行」をクリックしてください。
  • アカウントの認証を実行する上で、携帯メールアドレスの登録が必要となるので入力し、また「続行」をクリック。
  • 登録した携帯アドレスに認証コードが送られてきますので、コードを入力すればFacebook開発者登録は完了です。

Facebookアプリの作成

Facebook開発者登録が完了したら次にFacebookアプリの作成を行います。

もう一度、https://developers.facebook.com/apps/へアクセスし、
今度はページ右の「Create New App」をクリックして下さい。

ソーシャルボタン設置1

すると上記のように別ウインドウで「新しいアプリを作成」画面が表示されます。

「Display Name」「カテゴリ」を入力し、「アプリケーションを作成」をクリック。
※「Namespace」は空欄のままでもOKです。

ソーシャルボタン設置2

次画面でセキュリティチェックを行って下さい。

ソーシャルボタン設置3

出来上がったページの「ダッシュボード」のアプリID欄に記載されている数字がアプリIDとなります。

ソーシャルボタン設置4

それと序でに、「設定」「Add Platform」から、ウェブサイトのURLを設定しておいても良いでしょう。

テーマファイルへの設置

JavaScriptのコードにFacebookアプリIDを入力

下記JavaScriptのコードの「XXXXXXXXXXXXXXXX」の位置に取得したFacebookアプリIDを入力します。Twitter、Google+、はてなブックマークに関しては特別入力するものはありません。

<!-- 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=XXXXXXXXXXXXXXXX";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!-- Twitter -->
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></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>

上記コードをheader.phpfooter.phpへコピペして下さい。私の場合ページの読み込み速度が気になるのでfooter.phpに記載しました。

functions.phpへの設定

functions.phpへ下記のコードを設置して下さい。

<?php
function SocialButtonVertical()
{ ?>
<ul>
<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="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="gplusButton"><g:plusone size="tall" href="<?php the_permalink(); ?>"></g:plusone></li>
<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-balloon" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a></li>
</ul>
<?php
}
?>

ボタン表示用のコードを任意のファイルに設定

私は個別記事に下記コードを設置しましたが、ご自分のファイルに合わせて変更して下さい。

<div class="sbver">
<?php SocialButtonVertical(); ?>
</div>

最後にスタイルを設定します

上記で設定した“sbver”にスタイルを設定します。

.sbver ul {
margin: 0;
padding: 0;
clear: both;
}
.sbver li {
list-style-type: none;
float: left;
margin-right: 10px
}

このスタイルはあくまで参考ですので、各自でカスタマイズしてご自分のテーマに合わせ直して下さい。

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