こんにちは。きんくまです。
Google+の共有ボタンを動的生成しようとしてまして、はまったのでメモです。
+1ボタンは
gapi.plusone.render()
という感じにplusoneを使います。
共有ボタンはそのかわりにgapi.plusを使います。
それで、ドキュメント読みつつ、何度ためしても400 bad requestとかいうエラーが出ます。plusoneではエラーが出ないのに！
んんーーーーー。
エラー内容は「URLがこのページに存在しません。」みたいなの。
なので、ドメインあわせてみたりしたんだけどやっぱり駄目。
ググってみたところ、どうやらドキュメントに載ってないことが書いてました。
{action: "share"}
引数にaction:shareを使えとのこと。
そうしたらうまくいくようになりました！
って、ドキュメントにそうやって書いててくれると嬉しいなって。
コードのまとめ
<html>
<head>
<script src="js/jquery-1.8.3.min.js"></script>
<style>
#button{
width:100px;
height:100px;
background: #C6E746;
}
</style>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{'lang': 'ja', 'parsetags': 'explicit'}
</script>
<script>
$(function(){
$('#button').click(function(){
gapi.plus.render('sns', {
"href": "http://www.kuma-de.com/",
"annotation": "bubble",
"action": "share" //これだ！！！！
});
});
});
</script>
</head>
<body>
<div id="button"></div>
<div id="sns"></div>
</body>
</html>
scriptタグの内側にオプションのオブジェクトを書くところ{‘lang’: ‘ja’, ‘parsetags’: ‘explicit’}はこちらのページを参考にさせていただきました。
最初、scriptタグのattributeに書いたのに反応しなくて困ってた。
>> Google+1ボタンの、+1先のURLを動的に変更する
このオプションのオブジェクトを書くやり方って、history.jsっていうライブラリを使ったときもそうだったんだけど、はやっている書き方なんだろうか？？
個人的にはロードしてから、xxx.init(オプション); とかいう感じの方がわかりやすい気がするのだけれど、、。
ちなみにhistory.jsのオプションはhistory.jsを読み込む前（あとじゃダメ）に
<script>
window.History = {options: {
html4Mode: true,
disableSuid: true
}};
</script>
<script src="jquery.history.js" ></script>
という感じに書くと大丈夫でした。
あ、そうそう。
ここに書いても誰も見ないかもしれなけど、history.jsのhtml4Modeをtrueにした状態のとき、History.back();が何故かie9で効かなかったです。
ie9はfalseにすることで解決しました。そっちにしてもURL自体は変わらんかった。
という感じです。
■ 自作iPhoneアプリ 好評発売中！
・フォルメモ - シンプルなフォルダつきメモ帳
・ジッピー電卓 - 消費税や割引もサクサク計算！
■ LINEスタンプ作りました！
毎日使える。とぼけたウサギ
