プラグインなしで WordPress サイトにソーシャルボタンを設置する方法

ソーシャルボタンを作るの備忘録

各種ソーシャルボタンの作成手順をまとめました。いろんなところで解説されている内容とほとんど同じです。自分が忘れないようにするためと、ひとつのページにまとめておくと、あとで修正するときに便利だからメモの代わりに残しておきます。

用意するのは以下のもの。

  • はてなブックマーク: 国内最大級のブックマーク
  • Twitter: 140文字の短文を投稿できる情報サービス
  • Facebook:友達や同僚、同級生、近所の人たちと交流を深めることのできるソーシャルユーティリティサイト
  • Google+:友だちや家族とつながったり、気になるジャンルの情報を追いかけたりできるツール
  • Pocket: 「あとで読む」系のツール
  • LINE: 国内で最も人気のあるスマートフォンアプリ

ほかにも海外でよく使われているものが多数ありますが、ひとまず今回はこれだけで。

ソーシャルボタンを作る方法

ソーシャルボタンを作る方法は3つあります。どれもメリットとデメリットがあるので目的と用途に合わせて利用してください。

  1. ブログパーツなどを使う
  2. WordPress プラグインを使う
  3. 公式サイトで取得したコードを編集して貼る

ブログパーツを使う場合

ブログパーツは探せば無料でいくらでも出てきます。以下は、自分でもいちどは使ってみたことのあるもの。

ツイートボタン、いいねボタンなどをまとめて簡単設置|忍者おまとめボタン (簡単・多機能・カスタマイズあり)

Zenbackであなたのブログに全てのフィードバックを。 (ソーシャルボタンだけでなく関連記事やコメントも)

AddClips ソーシャルブックマーク&RSSボタン統合サービス (たくさんのブックマークとRSS登録ボタン)【2015年7月時点でサービス終了】

Twitter “Follow” Badge for your site / blog (追尾型フォローボタン)

簡単で高機能なのがメリットです。とくに無料ブログを利用している人にはおすすめのツールでしょう。クリックして選んでいくだけで、すべての作業が完了するので、あとは生成されたコードを貼るだけになります。

だいたい10分くらいで全ての作業が終わります。

デメリットは、ひとつずつのボタンを自分好みにカスタマイズすることができないので、サイトのデザインにうまく合わせられないかもしれません。また広告が大きく表示されることもあります。これもサイトの都合に適ったものになるとはぎらないので注意が必要です。

WordPress プラグインを使う場合

メリットは作業が簡単なことです。こちらも10分くらいで終わります。しかも、多くのボタンに対応したプラグインが用意されています。設定も簡単で、HTML や CSS、JavaScript などの知識は不要です。

また、ソーシャルボタン関連のアップデートによるメンテナンスをする必要もありません。たとえば Facebook は OGP やら API が変更されるので有名ですが、その対応もプラグインの作者に一任できます。

デメリットは、ボタンのカスタマイズができないことです。好きな場所に設置したり、ボタンの形・大きさ・色などを自由に変更できません。また利用しているテーマと合わずに不具合を起こすこともあります。

とくに注意したいのは、プラグインの作者が開発・更新をやめているときです。公式ページでも更新が停まって2年以上経過しているプラグインには警告が出ます。古いプラグインは最新バージョンの WordPress との互換性がなかったり、セキュリティ上に問題があるかもしれません。利用する際には、必ず頻繁に更新されている最新版を利用してください。

よく利用されているソーシャルボタン系プラグインはこちら。

Jetpack by WordPress.com (ソーシャルボタンに限らず30ほどの機能あり)

WP Social Bookmarking Light (定番)

Tweet, Like, Google +1 and Share (これもよく使われている)

Sharebar (これも一時期よく見かけた)

WP to Twitter (ツイートに詳細設定をしたいなら)

Simple Tweet (国産で使いやすい)

Facebook (Facebook 社の公式プラグイン)

ほかにもあるので探してみてください。利用者が多いプラグインだと、いろんなところで導入方法が書かれていますし、不具合の解決法もよく書かれています。

公式サイトで取得したコードを編集して貼る場合

メリットは、プラグインの逆になりますが、カスタマイズの自由度がグッと上がることです。設置場所・形・大きさ・色、さらにはマウスカーソルを重ねたときの変化を付けることだって可能です。

デメリットは、作業工程が増えることです。ひとつひとつの公式サイトへ行って、ボタンの種類を選択し、自分のサイトの設置したい場所に HTML で書き込みます。

そのさい、ボタンの並び方の指定がされていませんので、CSS に並び方や位置の指定をしなければなりません。プロパティや値を正しく指定しなければ、思うようなデザインが表示されないので、その点は調整が必要です。

とはいえ、書店で入門書1冊を買えば、かんたんに手に入る知識ですが。

 

ところで、WordPress で利用する場合には、各々のページの URL 出力に合わせて設定を変える必要があります。これは公式サイトで取得したコード内の URL を、

<?php the_permalink(); ?>

 に(各ページの URL を出力するテンプレートタグ)に置き換える作業です。これもコピペで簡単に終わらせることができます。

テンプレートタグ/the permalink – WordPress Codex 日本語版

HTML や CSS がよくわからない人にはむずかしく感じられるかもしれませんが、一度やってみて、慣れてしまえば簡単です。

まあ、めんどくさくはありますけど…(´゚д゚`)エー

公式サイトでソーシャルボタンのコードを取得する

以下、ひとつずつ方法を書いていきます。

はてなブックマーク

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

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

基本的に公式ページの説明に従っていけばいいだけです。横にボタンとコードのプレビューが表示されるので、わかりやすいです。WordPress で使う設定方法にするのであれば、少しだけ変更点があります。

まずボタンのタイプを選び、次にボタンの設定でいろいろ選んでいくのですが、このとき「ページのアドレス」と「ページのタイトル」はコードを取得してから変更するので何を入力してもかまいません。

残り2点の「ブックマーク数」と「表示言語」の種類だけ、ここで決めておいてください。

コードを取得したら「ページのアドレス」と「ページのタイトル」を、以下のように WordPress のテンプレートタグに書き換えて、自動的に各々のページの URL を出力してくれるようにします。

【変更前】

ページのURL

ページのタイトル

【変更後】

<?php the_permalink(); ?>

<?php the_title(); ?>|<?php bloginfo(‘name’); ?>

最終的にこのようになりました。

最後のあたりを見てみると、async=”async” という文字列があります。これは非同期読み込みに対応していることを意味しています。

Twitter

Twitterボタンの設置ページ

Twitterボタン | About

Twitter ボタンも公式ページで選択していくだけでほとんど作れます。もちろん、Twitter への登録は済ませておいてください。取得したコードを修正して以下のようにしました。

変更点は3,5,6 行目です。まずデザインの変更として3行目を

class=”vertical-button”

にして、バルーンで表示されるツイート数を上になるよう変更します。こんな感じ。

Twitterボタンの例

そして、5,6行目を以下のように変更して URL とページタイトルを取得するようにしました。

data-url=”<?php the_permalink(); ?>”
data-text=”<?php the_title(); ?>”>

あとは Web サイトの表示させたい場所に貼り付けるだけです。

Facebook

Facebook Like Button Web

Facebook Like Button

まず先に Facebook への個人登録は済ませておかなければなりません。ソーシャルボタンをFacebook ページと連携させたい場合には、サイトと連携するページをあらかじめ作成しておきます。

Facebook ページの作成画面

その後、Facebook Developers で新規のアプリを作ってIDを取得してください(これらの手順はここでは割愛)。

Facebook アプリ登録画面

ここまでの用意ができたら Facebook Like Button にて、ソーシャルボタンのコードを取得します。 現在では API 変更に対応した新しいコードが生成されます(2015年5月以降の仕様)。

HTML5 でコードを生成すると2つにわかれて表示されます。はじめのほうは先に<body>タグの直後に置いて読み込ませておき、後のほうは設置したい場所に挿入してください、と書かれています。

上のコードを変更する必要はありません。登録したアプリに合わせて自動的に Facebook ID が変更されます。変更するのは下の方です。

2行目を変更しています。出力する URL を WordPress に合わせているだけです。

data-href=”<?php the_permalink(); ?>”

全ページに「いいね!」ボタンを設置する必要がなく、たとえば記事ページにだけ置きたい場合には、2つのコードをまとめて並べて貼ればいいでしょう。

Google+

1 ボタン   Google  Platform — Google Developers

+1 ボタン – Google+ Platform — Google Developers

Googleの「+1ボタン」もプレビューを見ながら好きなデザインを選べます。Google+ に登録していなくても、Google のサービスに登録を済ませていれば利用できます。

作られたコードには日本語の説明書きがあるので、それに従って貼っていけばいいでしょう。

例のように、最後の行に以下を加えました。

href=”<?php the_permalink(); ?>”

ページの下の方には「非同期読み込み」にする方法と例が書いてあるので、こちらも利用しましょう。

これらもまとめて並べて設置してかまいません。

Pocket

Pocket公式サイト

Pocket

Pocketは とくに変更点がありません。公式ページで生成されるコードをそのまま貼り付けるだけで完了です。

Pocket ボタンの作り方を紹介しているサイトによっては以下のコード

data-save-url=”<?php get_permalink(); ?>”

を追加しているところもありますが、そのままのコードで WordPress に対応しています(当ブログは何も変更していません)。指定したいのであれば追加してください。

もしかすると以前は必要だったのでしょうが、くわしいことはわかりません。まあ、何もしなくていいのだから、ありがたいですね。

LINE

LINE公式サイト

設置方法|LINEで送るボタン

「LINEで送るボタン」は WordPress の場合には、いちばん手間がかかります。

公式ページの「技術仕様 3 記述例」のところに、「WordPressのテンプレートに記述する場合」があるので、そこにあるコードを利用します。

さらに「4 デザイン」の下にある「ボタン画像をダウンロード」をクリックして、zipファイルをダウンロードします。

「LINEで送る」ボタン設置用画像

解凍すると、その中に Web サイト用のボタン画像があります。ここから使いたいボタン画像を選んで、レンタルサーバーにアップロードしてください。方法はFTPクライアントソフトなどでテーマのディレクトリに入れてもいいし、管理画面「メディア」の「新規追加」でもいいでしょう。

さいごは「LINEで送るボタン」のコードを調整します。公式で取得したコード内にある[ボタン画像のURL][ボタン幅][ボタン高さ]を、いまアップロードした画像に合わせて変更したら、完了です。

こちらにも書きました。参考にしてください。

WordPressサイトに「LINEで送るボタン」を設置する方法 | かっぱのWordPress入門ブログ

さいごに

ソーシャルボタンを作るときには、サイトの目的と用途、デザイン性、カスタマイズのしやすさ、セキュリティ面、あとからメンテナンスが簡単にできるか、などをあらかじめ考えておくことをおすすめします。

「とりあえずソーシャルボタンは入れとこかなあ」と”何となく”の気分で設置したら、あとから変更するときに、何かと困ることが多いです(経験上)。

いろいろ試してみて、自分のサイトに合った方法を見つけてください。

関連記事

Twitter Cards をプラグインなしで設定してみました:Twitter カードアナリティクスも使えるようになった!

Twitter Cards とは? 「Twitter Cards」というのは、ふだんのTwitter投稿で表示されるスペースの下の部分に、設定した説明内容を追加するサービスです。たとえばサイト名や紹介文や画像などを入れることができます(リッ…

PageSpeed Insights で「スクロールせずに見えるコンテンツのレンダリングブロック JavaScript / CSS を排除する」と提案されたときの修正方法

Google Developer では無料サービスの1つとして「PageSpeed Insights」という「ウェブページのコンテンツを解析し、ページの読み込み時間を短くするための修正方法を提案してくれるツール」が提供されています。 Pag…