Google+1 が発表されましたね。
Google+1は、Google版のユーザー評価機能です。（Facebookにおける「いいね！」ボタンのようなもの）
ただ、現時点では英語版の検索にしか影響を与えないこと、ソーシャル系が弱いGoogleなので、このままうまく拡大路線に乗るか不安要素が大きいのですがね。
そんなことを気にしつつ、Google+1ボタンをアメブロにも貼り付けてみました。
アメブロにGoogle+1ボタンを設置する
設置方法は、「Amebaに「なうで紹介」と「mixiチェック」ボタンを追加してみたよ 」など過去に何度か紹介したjQueryによる設置方法に追加するだけです。
以下のソースをフリープラグインに書くだけで設置可能です。
フリープラグインの文字数制限に引っかかる場合は、「AmebloのフリープラグインのJavaScriptをGoogle codeにホストしたよ 」も参考にしてみてください。
<script>
$(document).ready(function(){
$.getScript("http://apis.google.com/js/plusone.js",function(){
{lang: 'ja'}
});
$.getScript("http://platform.twitter.com/widgets.js");
var page_url = location.href;
if (page_url.match(/^.+\/entrylist[\-0-9]*\.html$/g )) {
var entries = $(".newentrytitle a");
var classname = ".updatetime";
var flg = 0;
} else {
var entries = $(".foot a:contains('記事URL')");
var classname = "div.entry .theme";
var flg = 1;
}
for (i = 0; i < entries.length; i++) {
var url = entries[i];
if (flg == 0) {
title = entries.eq(i).text();
} else {
title = $("div.entry h3.title").eq(i).text();
}
// はてなブックマークボタン用
var hatena_btn = '<a href="http://b.hatena.ne.jp/entry/' + url + '" class="hatena-bookmark-button" data-hatena-bookmark-title="' + title + '" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><sc' + 'ript type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></sc' + 'ript>';
// Twitter投稿ボタン用
var twitter_btn = '<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="YourTwitterAccount" data-text="' + title + ' | Your Blog Title" data-url="' + url + '">Tweet</a>';
// Google+1ボタン用
var gplus_btn = '<div class="g-plusone" size="medium" data-size="medium" data-count="true" href=' + url + '></div>';
$(classname).eq(i).append(' ' + hatena_btn + ' ' + twitter_btn + gplus_btn);
}
});
</script>
はてなブックマークボタンと、Twitterへ投稿ボタンもあわせて設置するようになっているため、不要であれば該当箇所を削除してください。
Google+1ボタンを設置するための工夫
Google+1ボタンを設置するためのソースはウェブサイト上 から取得もできるのですが、そのままのソースを貼り付けてもうまく動作しませんでした。
お決まりのようにFireFoxだとうまく動くのですが、IEでは動作しません。
元々貼り付けるソースコードがHTML5用になっているためなのか、jQueryからロードしているためそのタイミングの問題なのか不明ですが、悩んでたら下記のエントリを見つけました。
Google +1 ボタンを設置してみました + Tips を少し ＠ WebOS Goodies
ってことで、元々のHTMLタグをdivタグに変更。
サイズが反映されないということなので（実際にそうでしたが）、size属性を追加しました。
var gplus_btn = '<div class="g-plusone" size="medium" data-size="medium" data-count="true" href=' + url + '></div>';
JavaScriptの呼び出しは、jQueryの$.getScriptを利用し、ロードが終わったら呼び出される属性をセットしておきます。
$.getScript("http://apis.google.com/js/plusone.js",function(){
{lang: 'ja'}
});
jQueryで呼び出しているため（アメブロだとこの方法でしか設置する方法はないかと思うのですが）、ページが呼び出し終わってからボタンが追加されるので、だいぶ遅れて表示されます。
関連記事
Google CodeにホストしていたJavaScriptをBitbucketに移行する
Google+1ボタンがIEだと折り返して表示されることへの対処（暫定版）
Amebaに「なうで紹介」と「mixiチェック」ボタンを追加してみたよ
AmebloのフリープラグインのJavaScriptをGoogle codeにホストしたよ
Amebloに貼り付けていた、はてなブックマークボタンを更新してみたよ
Amebaで任意の位置に自動でタグを挿入するブログパーツ書いたよ