Google +1のタグをiframeのみで実装する方法を見つけたのでエントリーにしてみます。この方法を使うと、プラス1ボタンの横幅を指定するのが凄く楽になります。
(ただし、いつまで有効に使えるか不明です。)
作動サンプル
このページサイトTOPページ
▲jsコードを読み込まず、iframeのみで実装しています。
数日作動させて気が付いた点
- IE6では作動しない。表示しようとするとエラーが出る。
- IE7でも、チョット作動が怪しい。
- jsファイルを読み込まない分、サイト表示は高速化される(100~200ms)
- 正常にカウントされるっぽい
(今の所自己クリのみ。押して貰えていないから解らない(^_^;)
iframeコード&作動サンプル
mediumサイズ例
<iframe title='plus' src='https://plusone.google.com/u/0/_/+1/fastbutton?count=true&size=medium&url=http://xxx.com/xxx/xxx.html' frameborder='0' scrolling='no' width='60' height='20' >g+1</iframe>tallサイズ例
赤文字部分は各自が任意で好きな値を入れる事。
<iframe title='plus' src='https://plusone.google.com/u/0/_/+1/fastbutton?count=true&size=tall&url=http://xxx.com/xxx/xxx.html' frameborder='0' scrolling='no' width='50' height='60' >g+1</iframe>
▲DIVタグ等のスタイルシートを弄らなくても、簡単に横幅指定出来るのがミソ。
ウチのサイトは+1が3桁まで伸びる事はまずないので、横幅60~70あれば十分かなw
上記で紹介した大きさ以外を指定したい場合などは、公式の+1ボタン発行ページでパラメーターを調べて、適当に調整して下さい。
<script type="text/javascript">▲こんな感じで自前でブラウザ判別をしてやる必要がありそう。
function changeEle() {
if (navigator.userAgent.indexOf("MSIE 6") != -1 || navigator.userAgent.indexOf("MSIE 7") != -1)
{}
else{
var hoge = document.getElementById("hogehoge"); //表示させたいID
hoge.innerHTML = "<iframe title='plus' src='https://plusone.google.com/u/0/_/+1/fastbutton?count=true&size=medium&url=http://xxx.xxx.com/' frameborder='0' height='20' scrolling='no' width='60'>g+1</iframe>";
}
}
</script>
テスト中
現在、このページは試験的に、 https://apis.google.com/js/plusone.js を読み込まないようにしています。javascript無くても正常にカウントしてくれるっぽい。
注意
正規の方法を利用した時のようなheader内のメタタグ (meta property とか link rel="canonical" とか) の読み込みはしてくれないと思います多分。(試していません)
過去にも似たようなテストをした事あり
Google+1がリリースされた直後にも同様の実験を試した事がありました。
(当時採用した方法: Google プラス1のタグをiframeや「divとaタグ」で実装 )
(上記ページのソースにコメントアウトしてコードを残しています。どんな方法を使っていたか知りたい人はソースの確認をして下さい。)
しかし当時、Google+1の実装方法は頻繁に変更され、上の方法は1ヶ月程度で使えなくなってしまいました。
今回見つけた方法も、いずれ使えなくなるかもしれません(^_^;