[JavaScript] Google+の共有(Share)ボタン

2013/09/5

こんにちは。きんくまです。

Google+の共有ボタンを動的生成しようとしてまして、はまったのでメモです。

公式のドキュメントによると
>> +1 ボタン
>> 共有

+1ボタンは

gapi.plusone.render()

という感じにplusoneを使います。

共有ボタンはそのかわりにgapi.plusを使います。

それで、ドキュメント読みつつ、何度ためしても400 bad requestとかいうエラーが出ます。plusoneではエラーが出ないのに!
んんーーーーー。

エラー内容は「URLがこのページに存在しません。」みたいなの。
なので、ドメインあわせてみたりしたんだけどやっぱり駄目。

ググってみたところ、どうやらドキュメントに載ってないことが書いてました。

>> Google share explicit load

{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自体は変わらんかった。

という感じです。

LINEで送る
Pocket

自作iPhoneアプリ 好評発売中!
フォルメモ - シンプルなフォルダつきメモ帳
ジッピー電卓 - 消費税や割引もサクサク計算!

ページトップへ戻る