Web’Notes

ソーシャルボタンを設置するWordPressプラグイン「Tweet, Like, Google +1 and Share」

Twitter By: eldh

Webサイトへのアクセス手段としては、検索エンジンに次いでSNSが上げられるようになって来ました。

Webサイトへのアクセスを増やすためには、SNSから簡単にリンクが貼れるソーシャルボタンが、今や必須といえます。

Tweet, Like, Google +1 and Share は、主要なSNSのボタンが簡単に設置できるだけで無く、日本独自の はてなブックマーク や mixi などのSNSボタンも追加することが出来ます。

1. Tweet, Like, Google +1 and Share でSNSボタンを設置する
2. Tweet, Like, Google +1 and Share のCSSカスタマイズ
3. はてなブックマークのSNSボタンを追加する

「Tweet, Like, Google +1 and Share」で SNSボタンを設置する

１．「プラグイン」>「新規追加」から「Tweet, Like, Google +1 and Share」を検索してインストールし、有効化します。

２．「設定」>「Tweet Link Plusone」をクリックして「Tweet, Like, Google +1 and Share」の設定画面に行きます。

３．最初はどのアイコンを表示するかを決めます。

Facebookのボタンを「Like」から「いいね」に変更するため「Select Face Book Like Language」を「Japanese」に変更します。

また今回は「はてなブックマーク」のボタンも表示するため、「Display Custom Buttons」にチェックを入れます。

４．次に表示するアイコンを決めます。アイコンには「Large」「Small」の2つのタイプがあります。

５．表示する位置を決めます。

設定周りはこれで完了です。

Tweet, Like, Google +1 and Share のCSSカスタマイズ

次は配置した、SNSボタンをCSSで整えます。

Insert Custom CSS のテキストエリアにSNSボタンのCSSを定義します。今回は、少しアイコンの間が狭いので広げてみました。

「Tweet, Like, Google +1 and Share」では以下のHTMLソースが出力されるので、これに合わせてCSSを定義します。

<div class="social4in" ">
	<div class="socialicons s4twitter">
	【Twitter】
	</div>
	<div class="socialicons s4fblike" >
	【Facebook】
	</div>
	<div class="socialicons s4plusone" >
	【Google+】
	</div>
	<div class="socialicons s4linkedin" >
	【LinkedIn】
	</div>
	<div class="socialicons s4custombtn-1" >
	【カスタム】
	</div>
</div>

はてなブックマークのSNSボタンを追加する

はてなブックマークのSNSボタンを追加するためには、まずSNSボタンのソースを取得します。

以下のサイトで はてなブックマークのSNSボタンのソースが取得できます。

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

取得したソース内の【サイトのURL】の箇所を「%%URL%%」に変更し、【サイトのタイトル】を「%%TITLE%%」に変更すると、各記事に即したURLとタイトルが動的に振られます。

<a href="http://b.hatena.ne.jp/entry/【サイトのURL】"
 class="hatena-bookmark-button" 
 data-hatena-bookmark-title="【サイトのタイトル】" 
・・・>
</a>

<a href="http://b.hatena.ne.jp/entry/%%URL%%"
 class="hatena-bookmark-button" 
 data-hatena-bookmark-title="%%TITLE%%" 
・・・>
</a>

最後に、「Add your own Custom Buttons」にソースを貼り付ければ「はてなブックマーク」のボタンが追加できます。

今回は、「Large」のアイコンを表示するため左側の「Place Large button Code in this box」にソースを貼り付けました。

「Small」のアイコンを表示するときは、左側の「Place Small button Code in this box」にソースを貼り付けます。

一番最後に「Save Changes」ボタンをクリックして、設定を保存します。

これで、Webサイトを表示するとこのように表示がされます。

これで、「Tweet, Like, Google +1 and Share」の紹介を終わりますが、今回紹介した以外にも「mixi」「Evernote」などのボタンを付けることができますので、ぜひ好みに合わせてカスタマイズしてみて下さい。

WordPress Facebook, Google, SNS, Twitter, WordPress, プラグイン