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

2011年9月20日 / 月黒 posted in WordPress / No Comments

先日、単一記事のページにソーシャルボタンを設置しました。
WordPressならプラグインを利用すればお手軽に設置できますが、ブログのイメージにあわせた自分好みのデザインにしたかったので、自力でやってみました。

はじめに

2011/12/08 追記

続・WordPressにプラグインを利用しないでソーシャルボタンを設置する方法

下記を参考にする場合は、こちらもあわせて御覧ください。
ツイートボタンの仕様変更に合わせて、記事の内容を修正しています。

普段、僕が記事を共有するときは、ブラウザの拡張機能かブックマークレットを利用しています。ブログに設置されているソーシャルボタンを殆ど使った事がなく、あまり重要視していなかったのですが…

共有ボタンとしても大いに使えるブックマークレット「Komepon！」のすゝめ | けんけん.com

こちらの記事やTwitterで結構使っている人がいることを知りました。
※Komepon！便利ですね！ @knk_n さん、ご紹介ありがとうございます。

これは早く付けないとマズイな、ということで設置してみました。

ソーシャルボタンと言ってもいろいろあるわけですが、今回設置するのは以下の4つです。

「はてなブックマーク」　「Twitter」　「Facebook」　「Google+」

僕はFacebookもGoogle+もやっていないのですが、需要がありそうなので設置してみました。mixiとGREEも一応調べましたが、今回のデザインにあったボタンがなかったのと需要もなさそうだったので見送りました。

参考にしたページ

スクロールしてもついてくる！ブログにソーシャルボックスをつけよう。 | ウェビメモ

参考にしたのは @xxmiz0rexx さんのこちらの記事。
参考記事では、スクロールしてもついてくるボックスになっていますが、今回僕が実装したものは、ついてこないものになっています。

HTML

<!-- ソーシャルボックス -->
<ul id="social_box"> 
	<!-- はてなブックマーク -->
	<li><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" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" 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></li>
	<!-- Twitter -->
	<li><a href="http://twitter.com/share" class="twitter-share-button" data-url="<?php the_permalink(); ?>" data-text="<?php the_title(); ?>" data-count="vertical" data-via="tsuki_kuro">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></li>
	<!-- Facebook -->
	<li><iframe src="//www.facebook.com/plugins/like.php?href=<?php the_permalink(); ?>&amp;send=false&amp;layout=box_count&amp;width=55&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font=verdana&amp;height=60" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:55px; height:60px;" allowTransparency="true"></iframe></li>
	<!-- Google+ -->
	<li><g:plusone size="tall" href="<?php the_permalink(); ?>"></g:plusone></li>
</ul>

僕が実際にこのブログで利用しているコードです。
各サービスの公式ページでコードを作成し、ウェビメモのソーシャルボックスに実装した形になっています。

WordPressを利用している方なら、上記コードをコピペしてもらえれば、そのまま利用出来ると思います。ペーストする場所は利用しているテーマで変わると思いますが、通常「single.php」というファイル内になるかと思います。

＜2011/09/29追記＞
Twitterのコードには、僕のユーザー名（tsuki_kuro）が入るようになっています。
コピペして利用される方は tsuki_kuro をご自身のユーザー名に変更してご利用下さい。

CSS

#social_box{
	background:#2C2C2C;	/* ボックスの背景色 */
	width:60px;			/* ボックスの横幅 */
	padding:15px;		/* ボックスの内側の余白 */
	margin-left:-150px;	/* ボックスの横の位置 */
	text-align:center;	/* ボタン内を中央揃え */
	position:absolute;	/* ボックスの位置を固定 */
	top:200px;			/* ボックスの縦の位置 */
	list-style:none;	/* マーカー（行頭記号）を表示しない */
	border:1px solid #333;		/* ボーダーの設定 */
	border-radius: 5px;			/* 角丸　CSS3 */  
	-webkit-border-radius: 5px;	/* 角丸　Safari,Chrome用 */  
	-moz-border-radius: 5px;	/* 角丸　Firefox用 */
}

#social_box li {
	padding:5px 0px 0px 0px;	/* ボタン間の余白 */
	background:none;			/* リストの背景を表示しない */
}

CSSはこんな感じです。こちらもこのブログで実際に利用しているものです。
何の設定をしているのかは、コメントで明記してあります。
※/* ～ */の部分がコメントです。

ちなみに、ウェビメモのようにスクロールしてもついてくるボックスにしたい場合は、7行目の値を下記のように変更します。

#social_box{
	background:#2C2C2C;	/* ボックスの背景色 */
	width:60px;			/* ボックスの横幅 */
	padding:15px;		/* ボックスの内側の余白 */
	margin-left:-150px;	/* ボックスの横の位置 */
	text-align:center;	/* ボタン内を中央揃え */
	position:fixed;		/* ボックスがスクロールしても付いてくる */
	top:200px;			/* ボックスの縦の位置 */
	list-style:none;	/* マーカー（行頭記号）を表示しない */
	border:1px solid #333;		/* ボーダーの設定 */
	border-radius: 5px;			/* 角丸　CSS3 */  
	-webkit-border-radius: 5px;	/* 角丸　Safari,Chrome用 */  
	-moz-border-radius: 5px;	/* 角丸　Firefox用 */
}

#social_box li {
	padding:5px 0px 0px 0px;	/* ボタン間の余白 */
	background:none;			/* リストの背景を表示しない */
}

ソーシャルボタンのコード作成

テンプレートタグ

ボタンの作成をする前に、WordPressのテンプレートタグを理解しておきます。

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

ページが出力（表示）される時に、テンプレートタグがURLやタイトルに置き変わるということが理解できたら、ボタンの作成をしていきます。

はてなブックマーク

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

上記ページでコードを作成します。
テンプレートタグをテキストボックスに入力して作成したものは利用出来ません。先にコードを作成してから、URLとタイトルの部分をテンプレートタグに置換えます。これは全てのボタン共通の注意点です。

Twitter

Twitter / ツイートボタン

上記ページでコードを作成します。
言語選択を日本語にすると、ボタンが「ツイートする」になってしまうので、英語にした方が見た目がいいと思います。好みの問題ですが。

Facebook

Like Button – Facebook開発者

上記ページでコードを作成します。
Facebookだけ日本語化されていないので、ちょっとわかりづらいですね。
僕は下記のように設定しました。

URL to Like ：適当に入力　※あとでテンプレートタグに置き換えます
Send Button (XFBML Only) ：チェックを外す
Layout Style ： box_conut
Width ： 55
Show Faces ：チェックを外す
Verb to display ： like
Color Scheme ： light
Font ： verdana　※サイトに合わせたフォントを選択します

[GetCode]をクリックします。
Implementationは[iframe]を選択します。

作成されたコードのままだとボタンの下に余分な余白が出来ます。
下記のように変更して調整します。

height=90　→　height=60
height:90px　→　height:60px

Google+

プラスワンボタン

上記ページでコードを作成します。
作成したコードをhead要素内（もしくはbody終了タグの直前）と、ボタンを表示する場所に貼り付けます。head要素は通常「header.php」というファイル内にあると思います。
+1ボタンを表示するプラグインを利用している場合は、プラグインがコードを作成するはずですので、head要素内のコードは貼り付ける必要はないと思います。

おわりに

CSSがよくわからず、実装するのにかなり苦労したのですが、自分好みのデザインで設置することが出来て満足しています。

この記事を参考に実践される方は、必ず修正するファイルのバックアップを取ってから行って下さい。何が起こっても僕は責任は取れませんので、自己責任でお願いします。

※間違いや問題点などありましたら、コメントやTwitterなどで教えて頂けると幸いです。

< CSS, HTML, WordPress, ソーシャルボタン >

« ダイエットログ 2011-09-19ダイエットログ 2011-09-20 »

Comments (0)

› No comments yet.

コメントを残すコメントをキャンセル

Pingbacks (2)

03:58, 2011年9月21日[とあるL点の藻屑日記] WordPressにプラグイン使わずソーシャルボタン設置
07:01, 2012年2月13日WordPress自作戦記第二回「引き継ぎ篇」 | けんけん.com

moonblack.net