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

WordPress(ワードプレス)で「ソーシャルボタン」を設置する方法を初心者向けに解説した記事です。Twitterのツイートボタン、Facebookの「いいね!」ボタンの設置方法を中心に説明。テーマ編集、プラグインでの導入方法もあります。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

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

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

 

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

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

 

大石ゆかり

田島メンター!!WordPressの記事にFacebookやTwitterのボタンを設置したいんですけど、どうしたらいいんですか〜?

田島悠介

いくつか方法あるけど。できるだけ簡単な方法がいいよね。

大石ゆかり

そうですね。

田島悠介

じゃあとりあえず手軽な方法を3つ教えるね!

 

目次

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

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

 

 

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

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

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

 

Twitterボタンを設置する

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

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

Twitterボタン

 

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

 

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

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

ツイートボタン入力

 

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

ツイートボタン表示

 

Facebookボタンを設置する

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

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

いいねボタン設置

 

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

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

いいねボタン表示

大石ゆかり

記事ごとに設置できるんですね!

田島悠介

そうだね。特定のページだけボタンを設置したいときにはこの方法が良いね。後の2つの方法はすべてのページに設置する方法だよ。

 

[PR] WordPressで挫折しない学習方法を動画で公開中

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

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

そこで、テンプレートを編集して全ての記事にソーシャルボタンを設置することにします。
ここでは大きく分けて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週間は現役エンジニアのメンターが毎日学習をサポートするので、独学よりも効率的に学ぶことができます。