SNSボタンをオリジナル画像で設置する方法

HTML

TwitterやFacebookへのボタンは公式サイトでボタンを作れますが、そのボタンはそれぞれオリジナルのボタンで設置することもできます。

ボタンの仕組みが変わると動かなくなるかもしれませんが、以下の方法で設置できます。今回紹介しているのはTwitter・Facebookシェア・mixiチェック・Google+です。

Twitter

コードは以下になります。

<a href="http://twitter.com/share?count=horizontal&original_referer=ページのアドレス&text=ツイートさせたいテキスト&url=ページのアドレス&via=Twitterアカウント" onclick="window.open(this.href, 'tweetwindow', 'width=550, height=450,personalbar=0,toolbar=0,scrollbars=1,resizable=1′); return false;"><img src="オリジナルボタンのパス" width="サイズ" height="サイズ" /></a>

ツイートさせたくないもの(アカウントとか)があったら、消したい項目の&~を消せば大丈夫です。

Facebookシェア

コードは以下です。

<a href="http://www.facebook.com/share.php?u=ページのアドレス" onclick="window.open(this.href, 'window', 'width=550, height=450,personalbar=0,toolbar=0,scrollbars=1,resizable=1'); return false;"><img src="オリジナルボタンのパス" width="サイズ" height="サイズ" /></a>

ページのアドレスを入れるだけなのでシンプルです。

mixiチェック

コードはこちら

<a href="javascript:void(0);" onclick="window.open('http://mixi.jp/share.pl?u=ページのアドレス&k=mixiチェックキー','share',['width=632','height=456','location=yes','resizable=yes','toolbar=no','menubar=no','scrollbars=no','status=no'].join(','));"><img src="オリジナルボタンのパス" width="サイズ" height="サイズ" /></a>

こちらはアドレスの他にmixiのチェックキーが必要です。mixiで登録が必要ですので少し手間がかかります。

Google+

コードはこちら

<a href="javascript:(function(){window.open('https://plusone.google.com/_/+1/confirm?hl=ja&url='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title),'_blank');})();"><img src="オリジナルボタンのパス" width="サイズ" height="サイズ" /></a>

【追記】上記のコードでは動かなくなったようなのです。下記をお試し下さい。Google+ shareに変わったのでしょうか。

<a href="https://plus.google.com/share?url=ページのURL" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;"><img src="オリジナルボタンのパス" width="サイズ" height="サイズ" /></a>

Google+のボタンはこのような感じです。

他のSNSボタンのオリジナル画像はつける機会がないので調べてませんが、見つけたら追記したいと思います。