SNSボタンを表示するWordPressプラグインを作ってみました。

　ブログを少しずつ、さくらVPSの方へ移そうと思っていたのですが、以外と手間がかかりそうなので、当面、こちらのブログに戻すことにしました。
　このため、さくらVPSのWordPressに投稿していたデータをこちらへ再投稿します。

　はてブやTwitter等のSNSボタンをWordpressに設置するプラグインには、WP Social Bookmarking Lightという高機能なプラグインがあるのですが、wp.Vicuna.Ext.と相性が今イチというか、ボタンの配置位置等をもう少し調整したい感じがしました。
　そのため、Wordpressプラグインの習作として、SNSボタン配置するプラグインを作ってみました。
　

• SEOMode:ソーシャルブックマーク＆投稿ボタンの設置方法

2.ソースコード
　ソースコードは以下のようにしました。（一部途中で改行）
　2～12行目は標準プラグイン情報を記したヘッダー部です。
　17～26行目は、JavaScriptファイルの読み込みを行う関数を定義しています。
　30～91行目は、SNSボタンを配置する関数を定義しています。
　とりあえず、設置するボタンは、自分が使っている、はてなブックマーク、Twitter、そのうち使うかもしれない、Google+1、facebook-likeボタンとしました。 　また、wp.Vicuna.Ext.のinfoバー直下に、横一列でボタンを配置したいので、ul要素のinlineではなく、tableを使用しました。
　85～86行目は関数を実行するチェックポイントに登録しています。今回は、ヘッダー生成時にJavaScriptファイルを読み込み、コンテンツの生成が終了し、フッター生成されるタイミングでsetSNSButton関数をフックしています。

 
<?php
/*
 Plugin Name: Sns-button
 Plugin URI:

http://blog.termat.net/web/snsボタンを表示するwordpressプラグインを作ってみまし/

 Description: ソーシャル・ブックマークボタンの配置
 Author: t.matsuoka
 Author URI: http://www.termat.net/
 Version: 1.0.0
 License: GPLv2 (http://www.fsf.org/licensing/licenses/info/GPLv2.html)
 */

function initButton(){
?>
<script type="text/javascript"
	src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript"
 	src="http://b.st-hatena.com/js/bookmark_button.js"
	charset="utf-8" async="async"></script>
<script type="text/javascript"
	src="http://platform.twitter.com/widgets.js"></script>
<script type="text/javascript"
	src="https://apis.google.com/js/plusone.js">{lang: 'ja'}</script>
<script src="http://connect.facebook.net/ja_JP/all.js#xfbml=1"></script>
<?php
}

function setSNSButton(){
?>
<script type="text/javascript">
<?php	if (is_page() || is_single()) : ?>
var url=document.URL;
$(".info").each(function(){
	var table=$("<table />");
	var tr=$("<tr />");
	table.append(tr);
	table.css("margin-top","-20px");
	table.attr("cellspacing","0");
	table.attr("cellpadding","0");
	table.css("background-color","#ffffff");
	table.css("border-spacing","0px");
	table.css("border-width","0px");
	tr.css("border-width","0px");
	var ha=$("<a />");
	ha.attr("href","http://b.hatena.ne.jp/entry/");
	ha.attr("class","hatena-bookmark-button");
	ha.attr("data-hatena-bookmark-layout","standard");
	ha.attr("title","このエントリーをはてなブックマークに追加");
	var himg=$("<img />");
	himg.attr("src","http://b.st-hatena.com/images/entry-button/button-only.gif");
	himg.attr("alt","このエントリーをはてなブックマークに追加");
	himg.attr("width","20");
	himg.attr("height","20");
	himg.attr("style","border: none;");
	ha.append(himg);
	var td=$("<td />");
	td.css("border-width","0px");
	td.append(ha);
	tr.append(td);
	var ta=$("<a />");
	ta.attr("href","http://twitter.com/share");
	ta.attr("class","twitter-share-button");
	ta.attr("data-count","horizontal");
	ta.attr("data-lang","ja");
	ta.text("Tweet");
	td=$("<td />");
	td.css("border-width","0px");
	td.append(ta);
	tr.append(td);
	td=$("<td />");
	td.append("<fb:like href='"+url+"' send='false' layout='button_count'
		 width='100' show_faces='true' font=''></fb:like>");
	td.css("border-width","0px");
	tr.append(td);
	td=$("<td />");
	td.css("border-width","0px");
	td.append("<g:plusone size='small'></g:plusone>");
	tr.append(td);
	table.insertAfter($(this));
	var hr=$("<hr />");
	hr.insertAfter(table);
});
<?php	endif; ?>
</script>
<?php
}
add_action('wp_head', 'initButton');
add_action('wp_footer', 'setSNSButton');
?>

　SNSボタンを配置するだけという低機能ですが、とりあえず、SNSボタンを自分が配置したい場所に配置できました。