Top  義経の備忘録  ブログに色々なボタンを設置してみた。「Google+1ボタン」編

Category : 義経の備忘録

2012-01-27(Fri)
ども…皆さんこんにちは。義経です。

FC2ブログに各ボタンを設置する解説を行っております。
Twitter:ツイートボタン →Twitterツイートボタン編
Google:Google+1ボタン →今回
mixi:イイネ!ボタン →mixi:イイネ!ボタン編
Facebook:いいね!ボタン →Facebook:いいね!ボタン編
はてなブックマーク:はてなブックマークボタン →はてなブックマークボタン編

さて今回はGoogle+1ボタンです。

このGoogle+1ボタンとはからなのですが、Google+というFacebookのぱくr…Google版の様な物があります。
そのGoogle+のいいねボタンと思っていただければ良いかと思います。

んで、このGoogle+1ボタンはちょっと特殊で、Googleの検索条件にこのGoogle+1ボタンが有効らしいと言う事です。
ちなみにGoogle+1が押されているページを検索すると…検索順位が優位になる…らしい

まぁそんな事みたいなので設置してみました。

今回はGoogleのGoogle+1ボタン編です。基本的にFC2ブログ用に書いていきます。
GoogleのGoogle+1ボタンの設置方法

Google+に関してもTwitter同様に公式でボタンが用意されています。
→Google+1をウェブサイトに表示
+1 ボタン-143849

Google+1はリアルタイムでプレビューが変わっていくのでだいたいそれを見ながら自分好みに変えていけば良いと思います。

基本的にサイズとAnnotationと幅で調整しますが、だいたいこんな感じになります。
サイズ:標準 Annotation:インライン 幅450

サイズ:中 Annotation:バルーン

サイズ:大 Annotation:バルーン


まぁこのくらいの違いです。
後は詳細オプションですが…
これも基本的に変更する必要は無いと思います。有効なHTML5構文なんてすると…IEだと表示すらされませんw
と言う事で、触る必要がありません…が!
とりあえずソースにこれだけは追加しておいた方がいいという物があります。
href="<%topentry_link>です。
これを記載することにより、ページ毎のボタンができあがります。

これを記載したソース
<!-- このタグを +1 ボタンを表示する場所に挿入してください -->
<g:plusone size="tall" href="<%topentry_link>"></g:plusone>

<!-- この render 呼び出しを適切な位置に挿入してください -->
<script type="text/javascript">
window.___gcfg = {lang: 'ja'};

(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>

となります。
このソースですが実際には2つにわかれます。
<!-- このタグを +1 ボタンを表示する場所に挿入してください -->
<g:plusone size="tall" href="<%topentry_link>"></g:plusone>


<!-- この render 呼び出しを適切な位置に挿入してください -->
<script type="text/javascript">
window.___gcfg = {lang: 'ja'};

(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>

です。

上のソース~ボタンを表示する場所に~の方は、実際に設置したい場所。但しhref="<%topentry_link>を追加している場合は、<!--topentry--> ~ <!--/topentry-->の中に設置します。
下のソース~適切な位置に挿入~の方は、<head>~</head>の中に設置します。

という感じです。
Google+1ボタンはFC2では標準では無い為、追加で設置する必要があります。


↓役に立った・面白かったなど思っていただけましたら是非クリックをお願いします。
このエントリーをはてなブックマークに追加
コメント
コメントを書く

管理者にだけ表示を許可する

トラックバック

http://areda.blog9.fc2.com/tb.php/1260-d0c29594

この記事にトラックバックする(FC2ブログユーザーのみ)