当サイトのWordPressカスタマイズポイント10～ソーシャルメディアボタン

2013年 2月9日　 Wordpress

今回はソーシャルメディアボタンの設置についてです。

ソーシャルメディアボタンとは、twitterの「つぶやく」ボタンやFacebookの「いいね」ボタンなどのことです。

ソーシャルネットワークサービス（SNS）とも言われていますが、紛らわしいのでどちらかに呼び方を統一してほしいものです（笑）

一応私はボタンを指すときはソーシャルメディアボタン、TwitterやFacebookなどのサービス自体を指す時は、SNSと呼んでいます。

話はそれましたが、とにかく今回は「あの」ボタンの設置についてです。

設置するボタンの選択

まずはどのSNSのボタンを設置するか決める訳ですが、各SNSの利用者とターゲティング、SEO対策の3つの視点で考えると、当サイトの場合はTwitter、Facebook、Google+1、はてなブックマークの4つにしました。

ビジネスとの親和性が高いので、TwitterとFacebookを選び、Google+1はあまり広まっていませんが、Googleは「SNSでの共有数も評価する」という方針のようですし、同じGoogleなので多少はSEO対策で有利になるかと（笑）

はてなブックマークは、少し古い方法にはなりますが、SEO対策とアクセスアップのために一応抑えておきました。

greeやmixiなどもありますが、どちらもあまりビジネス向けではないので除外。

また、たくさんのボタンを並べることもできますが、あまり多く設置すると、ページの読み込み時間が長くなり、離脱率を高めますし、SEO対策で不利になるので、数を絞って設置した方がいいです。

設置するボタンが決まれば、次は『どうやって実装していくか？』です。

WordPressの場合、WP Social Bookmarking Lightという便利なプラグインがありますが、headという部分にソースが追加されるので、あまり好きではありません。

また、プラグイン同士の競合が起こる可能性もあるので、テーマ（テンプレート）に直接記述して、埋め込むことにしました。

テーマに埋め込むといっても、当サイトの場合は

の合計10個のファイルにソーシャルメディアボタンのコードを記述しなければなりません。

一つ一つ手作業でコピペしていっても良いのですが、修正したくなったら10個のファイルを修正しなければならないので、手間が掛かります。

そこで、smb.phpというファイルを作ってコードを記述して、そのファイルを各ファイルで読み込むようにしています。

この方法だと、smb.phpという一つのファイルを編集するだけでいいので、修正が10分の1の作業量で済む訳です。

少し脱線しますが、こういった共通化できる部分は別ファイル化して読み込む（インクルードする）ようにすると、メンテンスが非常に楽になります。

他の業者が作ったホームページの修正作業を請け負っていると、この方法を使っていない業者が多いのがわかりました。

この方法を使わないと作業量が増えるため、修正料金も高くなってしまいます。

ちょっとした気遣いで、メンテナンスが楽になりますので、この別ファイルを読み込む方法はおすすめです。

ソーシャルメディアボタンを設置するのに、これ以外に特別なことはしていません。

強いて言えば、Facebookは「いいね」のカウントが右に表示されるので、きれいにレイアウトするために「いいね」ボタンを右端にしたくらいです。

smb.phpにコードを記述して、それぞれのファイルで読み込むようにすれば、ソーシャルメディアボタンの設置は完了です。

次回はブログの関連記事の表示について書きたいと思います。