0) {echo('');} echo(""); ?>

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ボタン発行ページでパラメーターを調べて、適当に調整して下さい。

また、IE6等の古い環境ではブラウザ上にエラーメッセージが出てしまうので、
<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&amp;size=medium&amp;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ヶ月程度で使えなくなってしまいました。
今回見つけた方法も、いずれ使えなくなるかもしれません(^_^;