2012/01/27

Google+共有ボタンChromeとFirefoxにも最適な設置方法公開♪

Google+の共有用URLを発見したので、それを応用して実際にオリジナルのGoogle+共有ボタンを設置しました。その方法を公開します♪


工夫したポイントは、SafariだけはGoogle側で最適なウインドウサイズで別ウインドウとして開くので問題ないのですが、Chrome・Firefoxに関しては別のタブとして開いてしまいます。この部分をjavascriptのwindow.openなどで工夫しSafariと同じような動作にしております。つまり、
Safari・Chrome・Firefox対応のGoogle+共有ボタンということです。

動作は下記リンクで試してみて下さい。

Google+でYasuo Maedaを共有 ←クリック


ソースコードは以下のようにしております。

<a href="javascript:void(0);" onclick="window.open('https://plus.google.com/share?url=https://plus.google.com/116174129635451094329', 'mypress', 'width=432, height=385, menubar=no, toolbar=no, scrollbars=yes');">Google+でYasuo Maedaを共有</a>

さらにボタンを画像パターンで作成しました。下記も実際に動作します。
Google+のボタンのように、オンマウス時の色を微妙に少しだけ変えてます(^ ^)/


Google+でYasuo Maedaを共有

【画像のダウンロードはココをクリック】

この共有ボタン画像は、個人・商用ともにフリーとさせて頂きますので、ご自由にお使いください。(角の丸みも透過png形式ですので、どんな背景にでも綺麗に設置できると思います)

この投稿への「+1」などもヨロシクお願いします(^ ^)/♪