WordPressでソーシャルボタンを追加する方法【初心者向け】

FacebookやTwitterなどのソーシャルメディアの普及によって、ソーシャルボタンを設置するサイトが多くなってきました。

記事などをシェアしてもらうことでサイトのトラフィックも増えるのでぜひ導入しておきたい機能です。

 

そこで今回は、WordPressのサイトにソーシャルボタンを設置する方法をご紹介します。

なお本記事は、TechAcademyのWordPressオンラインブートキャンプの内容をもとに紹介しています。

 

 

目次

ソーシャルボタンを設置する方法はいくつかありますが、本記事ではすぐに実践できる3つの方法を紹介します。

• ソースコードを入力してソーシャルボタンを設置する方法
• テンプレートを編集してソーシャルボタンを設置する方法
• プラグインを利用してソーシャルボタンを設置する方法

自分で実施できるものから試してみてください。

 

 

ソースコードを入力してソーシャルボタンを設置する方法

ソーシャルメディアごとに個別の登録を行う方法です。

今回は、利用者の多いTwitterとFacebookのボタンを埋め込む方法を紹介します。

 

Twitterボタンを設置する

Twitterのツイート(tweet)ボタンを設置してみます。

まずは公式サイトに掲載されているコードをコピーします。

 

そして、Twitterボタンを表示させたい場所に直接コードを入力します。

 

記事内に埋め込むこともできますので、今回は例として記事に埋め込みます。

記事内にソースコードを記述する場合は、「テキストモード」になっているかを確認して入力してください。

 

埋め込んでから投稿を確認してみると、ツイートボタンが設置されていることがわかります。

 

Facebookボタンを設置する

続いて、Facebookの「いいね！(Like)」ボタンを設置してみます。

まずは、「いいね」ボタンを生成するページでコードを取得しますしょう。このページからボタンのデザインなど好きな形式を選択することができます。

 

Twitterのボタンと同じように、Facebookボタンを表示させたい場所に直接入力します。

今回は先ほどのTwitterのボタンと並べて設置してみました。

 

[PR] Webサイト制作で副業する方法とは

テンプレートを編集してソーシャルボタンを設置する

先ほどのように記事ごとに貼り付けることもできますが、少し面倒ですよね。

そこで、テンプレートを編集して全ての記事にソーシャルボタンを設置することにします。
ここでは大きく分けて3ステップで作業を進めます。

 

1. JavaScriptの読み込みを記述する
2. ソーシャルボタンを読み込ませたいところにソースを記述する
3. ボタンの表示を調整する

順番に見ていきましょう。

 

JavaScriptの読み込みを記述する

まずは「ダッシュボード>外観>テーマの編集」からfooter.phpを開きます。

ソースコードの</body>と書いてあるところの直前に、以下のコードを貼り付けてください。

==================
<!—ソーシャルボタンのスクリプトです footer.php の</body>前に貼り付けます–>

<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.async=true;

js.src = “//connect.facebook.net/ja_JP/all.js#xfbml=1”;

fjs.parentNode.insertBefore(js, fjs);

}(document, ‘script’, ‘facebook-jssdk’));</script>

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.async=true;js.src=”//platform.twitter.com/widgets.js”;fjs.parentNode.insertBefore(js,fjs);}}(document,”script”,”twitter-wjs”);</script>

<script type=”text/javascript”>

window.___gcfg = {lang: ‘ja’};

(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>

<!—/ソーシャルボタンのスクリプトですここまで–>
==================

 

ソーシャルボタンを読み込ませたいところにソースを記述する

続いて、ソーシャルボタンを読み込ませたいところに次のソースを貼り付けます。

普通の投稿なら、single.phpに、固定ページなら、page.phpに貼り付けます。

今回は、Twitter、Facebook、Google+、はてなブックマーク、Pocketのボタンを埋め込みます。

==================
<!– Twitter –>

<div>

<a href=”https://twitter.com/share” data-lang=”ja” data-count=”vertical”>ツイート</a>

</div>

<!– Facebook –>

<div>

<div data-href=”<?php the_permalink() ?>” data-send=”false” data-layout=”box_count” data-width=”450″ data-show-faces=”false”></div>

</div>

<!– Google+ –>

<div>

<div data-size=”tall”></div>

</div>

<!– はてなブックマーク –>

<div>

<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” data-hatena-bookmark-lang=”ja” title=”このエントリをはてなブックマークに追加する”><img src=”http://b.st-hatena.com/images/entry-button/button-only@2x.png” 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>

</div>

<!– Pocket –>

<div>

<a data-pocket-label=”pocket” data-pocket-count=”vertical” data-lang=”en”></a>

<script type=”text/javascript”>!function(d,i){if(!d.getElementById(i)){var j=d.createElement(“script”);j.id=i;j.src=”https://widgets.getpocket.com/v1/j/btn.js?v=1″;var w=d.getElementById(i);d.body.appendChild(j);}}(document,”pocket-btn-js”);</script>

</div>

==================

これでいったん埋め込みはできました。

ただし、このままではボタンが縦に並ぶだけなのであまり見た目が綺麗ではありません。

そこで、CSSを設定してボタンを整列させましょう。

 

ボタンの表示を調整する

今度は「ダッシュボード>外観>テーマの編集」から、Style.cssを開き、下記のコードを貼り付けます。

==================
.snsbox {

float: center;

display: inline-block;

margin: 0 0 15px 10px;

}

.twitter-snsbox{min-width:87px;max-width:90px;}

.facebook-snsbox{min-width:70px;max-width:115px;}

.gplus-snsbox{min-width:50px;max-width:80px;}

.hatena-snsbox{min-width:80px;max-width:125px;}

.pocket-snsbox{min-width:60px;max-width:115px;}
==================

これで横一列に整列できました。

あとは自分の好みで、margin（余白）などを変更してみてください。

 

 

プラグインを利用してソーシャルボタンを設置する

先ほどはテーマを編集しましたが、初心者の方だと少し難しいかもしれません。そんなときはWordPressのプラグインを使うことをおすすめします。

 

ソーシャルボタンを埋め込むことができるプラグインは複数ありますが、今回は「Tweet, Like, Google +1 and Share」というプラグインで説明します。

 

まずは、プラグインをインストールしましょう。やり方がわからない場合は、WordPressプラグインのインストール方法の記事をご覧ください。

インストールが完了すると、管理画面＞設定＞Tweet Like Plusone
にプラグインが表示されます。

 

全て英語で書いてありますが、設定は簡単なので安心してください。

どのソーシャルボタンを設置するか、チェックボックスで決定します。

ここで選択できるのは下記の6つのボタンです。

1. Display Twitter ： Twitterのツイートボタン
2. Display Facebook Like ： Facebookの「いいね！」ボタン　※言語は「Japanese」を選択
3. Display Google +1 ： Google+の「+1」ボタン
4. Display Facebook Share ： Facebookの「シェア(Share)」ボタン
5. Display Linkedin ： LinkedInのシェアボタン
6. Display Custom Buttons ： カスタムボタンを表示

また、「Display order」で1~6の数字を入れることで表示順を決めることもできます。

 

設置ボタンを決定したら、「Size of Icons」でボタンのサイズを選びます。

その後は、表示方法、表示場所をカスタマイズして設定します。

表示方法は下記を参照してください。
「Alignment」…回り込みの設定

• Left Aligned ： 左寄せ、回り込み無し
• Right Aligned ： 右寄せ、回り込み無し
• Float Left ： 左寄せ、回り込み有り
• Float Right ： 右寄せ、回り込み有り

 

「Where to Display」…表示箇所の設定

• Display on Posts ： 投稿記事
• Display on Pages ： 固定ページ
• Display on Home Page ： トップページ
• Display on Archive Pages：アーカイブページ
• (Categories, Tages, Author etc.) ： 月別、カテゴリー別などのページ
• Display Above Content ： 画面上に
• Display Below Content ： 画面下に

 

設定が完了したら、右下の「Save Changes」をクリックして保存します。

 

ここまで完了したら、記事を投稿してみてください。

サイト上に設定したボタンが表示されました。

表示方法は、設定画面からCSS等を編集して変えることもできます。

 

 

無事にソーシャルボタンを設置できましたか？

ソーシャルメディアからのどのくらいのトラフィックがあるかは、WordPressにGoogle Analyticsを導入することで確認してみましょう。

 

 

[お知らせ]TechAcademyでは、WordPressを使ってカスタマイズしたオリジナルサイトを構築できるWordPressオンラインブートキャンプを開催しています。期間中の8週間は現役エンジニアのメンターが毎日学習をサポートするので、独学よりも効率的に学ぶことができます。