はじめに

今回は、WordPressにTwitterやFacebookのソーシャルボタンをオリジナルの画像で設置する方法について書いていきます。。もうないかもしれませんが、何度か同じことで同じように調べたことがあったので、書き残しておきます。

Contents

Twitterの場合

まずは、Twitterのソーシャルボタン設置コードの基本形を。

<a href="http://twitter.com/share?count=horizontal&amp;original_referer=ページのアドレス&amp;text=ページのタイトル&amp;url=ページのアドレス&amp;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>

「ページのアドレス」「ページのタイトル」「自分のTwitterアカウント」「オリジナルボタンのパス」「サイズ」は任意に変える必要があります。

そして、これをWordPressに入れる場合は、次のように変えればOKです。

<a href="http://twitter.com/share?count=horizontal&amp;original_referer=<?php the_permalink(); ?>&amp;text=<?php the_title(); ?>&amp;url=<?php the_permalink(); ?>&amp;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>

ちょっと分かりづらいですが、「ページのアドレス→<?php the_permalink(); ?>」「ページのタイトル→<?php the_title(); ?>」という風に変えています。WordPressの関数を用いて、動的に、そのページに合ったアドレスやタイトルを出力してくれます。これを、ページの設置したい場所に貼り付けるだけで設置完了。

さらに、CSSを用いてhover時に画像を変えたい場合は次のようにします。

<a href="http://twitter.com/share?count=horizontal&amp;original_referer=<?php the_permalink(); ?>&amp;text=<?php the_title(); ?>&amp;url=<?php the_permalink(); ?>&amp;via=自分のTwitterアカウント" onclick="window.open(this.href, ‘tweetwindow’, ‘width=550, height=450,personalbar=0,toolbar=0,scrollbars=1,resizable=1′); return false;">Twitter</a>

imgタグをなくして「Twitter」としました。ここは任意です。
これで、スタイルで

background: url(オリジナルボタンのパス) no-repeat;
height: 0;
overflow: hidden;
display: block;
padding-top: オリジナルボタンの高さ;

あたりの指定をして、同じ要素のhover時のbackgroundを変えてあげればおそらく大丈夫です。

Facebookの場合

同じく基本形から。

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

これも先ほどと同じように「ページのアドレス→<?php the_permalink(); ?>」とすればWordPress用に変わります。
以下、コピペ用。

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

hoverで画像変更用↓

<a href="http://www.facebook.com/share.php?u=<?php the_permalink(); ?>" onclick="window.open(this.href, ‘facebookwindow’, ‘width=550, height=450,personalbar=0,toolbar=0,scrollbars=1,resizable=1′); return false;">Facebook</a>

はてなブックマークの場合

はてなブックマーク、いわゆる「はてブ」の場合。

<a href="http://b.hatena.ne.jp/entry/ページのアドレス" class="hatena-bookmark-button" data-hatena-bookmark-layout="simple" title="このエントリーをはてなブックマークに追加"><img src="オリジナルボタンのパス" width="サイズ" height="サイズ" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>

WordPressコピペ用↓

<a href="http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>" class="hatena-bookmark-button" data-hatena-bookmark-layout="simple" title="このエントリーをはてなブックマークに追加"><img src="オリジナルボタンのパス" width="サイズ" height="サイズ" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>

hoverで画像変更用↓

<a href="http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>" class="hatena-bookmark-button" data-hatena-bookmark-layout="simple" title="このエントリーをはてなブックマークに追加">はてなブックマーク</a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>

Google+の場合

最後にGoogle+ これは、WordPress関数を使う必要がないですね。

<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>

hoverで画像変更用↓

<a href="javascript:(function(){window.open('https://plusone.google.com/_/+1/confirm?hl=ja&url='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title),'_blank');})();">Google+</a>

これ以外のSNSはまた都度調べます。とりあえず、ここにあるのはコピペで設置できるということで、目的達成。

参考サイト