アメブロにGoogle+への共有ボタンを設置する方法 Tipsまとめ

Google+公式の共有ボタンではありませんが、モバイル（ベーシック）のURLを利用した
Google+へのページリンク共有ボタンのソースが公開されたため、アメブロに設置してみました。

公開されているSourceのウェブサイト
Link:How to Share on Google+ from any website

<a href="https://m.google.com/app/plus/x/?v=compose&content=INSERT_MESSAGE_HERE_WITH_URL_IF_YOU_WANT" onclick="window.open('https://m.google.com/app/plus/x/?v=compose&content=INSERT_MESSAGE_HERE_WITH_URL_IF_YOU_WANT','gplusshare','width=450,height=300,left='+(screen.availWidth/2-225)+',top='+(screen.availHeight/2-150)+'');return false;"><img src="http://path.to/plus.png" alt="Share on Google+" width="55" height="22" /></a>

それを利用して日本語向けに紹介しているのがこちらのサイト
Link:非公式のGoogle+共有ボタンをブログに設置する方法

イメージ画像は平和画像さんのもの（フリー素材）を利用させて頂きました。
Link:http://thepeaces.tumblr.com/post/8722960072

こちらの画像をアップロードして、imgタグのsrcに指定してあげれば
HTMLタグとしてウェブサイトやblogに導入することができます。

今回は、Javascriptを利用して各blog記事の共有ボタンを作成しましたので
アメブロ内のタイトル下とページ下部への設置方法を紹介します。

Google+ Share buttonのscriptコード

上記Source CodeのままではJavascriptに組み込めないので
変更を加えて上げる必要があります。

また、そのまま設置するとボタンをクリックした際に
ページがモバイルGoogle+のままになってしまうので
下記Javascriptにて新しいWindowでpopupするようにしてあげます。

<script>
var swin=null;
function popitup(mypage,w,h,pos,myname,infocus){
if (w!=parseInt(w)||w<=0) w=750;
if (h!=parseInt(h)||h<=0) h=550;
if (myname==null){myname="swin"};
myleft=0;
mytop=0;
if (myleft==0 && mytop==0 && pos!="random"){pos="center"};
if (pos=="random"){myleft=(screen.width)?Math.floor(Math.random()*(screen.width-w)):100;mytop=(screen.height)?Math.floor(Math.random()*((screen.height-h)-75)):100;}
if (pos=="center"){myleft=(screen.width)?(screen.width-w)/2:100;mytop=(screen.height)?(screen.height-h)/2:100;}
settings="width=" + w + ",height=" + h + ",top=" + mytop + ",left=" + myleft + ",scrollbars=no,location=no,directories=no,status=no,menubar=no,toolbar=no,resizable=no";swin=window.open(mypage,myname,settings);
if (infocus==null || infocus=="front"){swin.focus()};
return false;
}
</script>

次にJavascript用にGoogle+ Share buttonを書き換えます。

gshare_btn = '<a rel="nofollow" target="_blank" onclick="return popitup(this.href);" href="https://m.google.com/app/plus/x/?v=compose&hl=ja&content=' + title + BLOG_TITLE + '&nbsp;' + '-' + '&nbsp;' + url + '">' + '<img src="http://stat.ameba.jp/user_images/20110810/15/ichitaso/92/97/g/o0080002011407323579.gif" alt="Share on Google+" title="Share on Google+" width="80" height="20"></a>';

これを以前紹介した各種SNSボタンを設置するCodeに組み込みます。
Link:アメブロのタイトルと記事の下に各種SNSボタンを設置する方法

以前は、Amebaなうのリンクボタンを設置していましたが
ほぼ利用しないと考えて、こちらと入れ替えてみました。

※ソースコードが長いため外部ファイルの利用が必須です

タイトル下にSNSボタンの設置

Link:Amebloのタイトル下にSNSボタンを設置するコード

実際に設置するときは、「var Twitter_ID = 'TwitterID', BLOG_TITLE = '|BlogTittle';」の
「TwitterIDを自分のTwitterID」へ「BlogTittleを自分のブログタイトル」に変更してください。

また、新デザインの場合class名が変わってしまっているため
42行目の('div.entry .theme');を('.articleTheme');に変更すると反映されるかと思います（未検証）

記事下にSNSボタンの設置

Link:Amebloの記事下にSNSボタンを設置するコード

こちらは、Top画面では表示させたくないため
記事のページを開いたときだけ動作するようにしています。

同じくTwitterIDとBlogTitleを変更する必要があります。
新デザインの場合は46と100行目の('div.foot');を('div.articleLinkArea skinWeakColor');
にすると反映されるかと思います（未検証）

設置するにあたって、ボタンがはみ出してしまったので
CSSでテーマ部分の文字サイズを縮小しました。

.entry .theme {
    font-size: 0.6em;
}

※新デザインの場合はclass名が変わってきます。

他にGoogleの+1ボタンをIE向けにCSSで追記してあげる必要があります。

#___plusone_0,#___plusone_1,#___plusone_2,#___plusone_3,#___plusone_4,#___plusone_5,#___plusone_6,#___plusone_7,#___plusone_8,#___plusone_9{
*display: inline !important;
}

これで全てのボタンの設置が完了です！