【WordPress】自作ソーシャルボタンを設置する際のポイント

2013/04/02

Written by: EISUKE

Category: IT

MasterPeace21

前回、facebook,twitter,hatebuのソーシャルカウントを取得する方法を紹介しました。これは、カウントを取得するだけで、そこからシェアすることは出来ませんでした。今回は、シェア機能を付け加えてみたので、その際のポイントを紹介したいと思います。

なぜ自作にしたのか？

MasterPeace21-1

純正のソーシャルボタンって結構重たくないですか？記事一覧ページにソーシャルボタンを1つずつ設置してしまうと、読み込みに支障が出るなと思ったのですます。ただ、それだけ。

今回は、設置する際のポイントという事でデザイン、カウントの取得は割愛させていただきます。以下を参照してくれればとおもいます。

Tweet数、いいね数、はてブ数をjQueryのAjaxで取得する方法。 | MasterPeace21

下準備！

まず、シェアする時には基本的にはURLにリンクとタイトルをパラメータとして入力するのですが、その際に日本語などが含まれていると動作しない場合がありますので文字列を先にエンコードする必要があります。

ボタンを設置する前の場所に以下のコードを設置します。

<?php
 $url = get_permalink(); //リンクを$urlに格納
 $_url = urlencode($url); // 格納された$urlをエンコードして$_urlに格納
 $title = the_title('','', false);　//タイトルを$titleに格納
 $_title = urlencode($title); // 格納された$titleをエンコードして$_titleに格納
?>

ちょっと専門的な話になってしまいますが、the_title()の引数に”,”,falseを入れる事で、文字列として変数に格納してくれます。これを指定しないと実際にページ上にタイトルが出力されてしまうので注意してください。

Twitterボタン

ツイートするための、URLは以下の通りです。パラメータとしてURL(＜！URL！＞)とタイトル(＜!TITLE！＞)を渡しているのがわかりますね。

http://twitter.com/intent/tweet?url=<!url!>&text=<!title!>

これを先ほど指定した変数の記法で書くとこうなります。

http://twitter.com/intent/tweet?url=<?php echo $_url;?>&text=<?php echo $_title;?>

echoというのは変数に格納されたものを出力するという意味です。これを使って、画像をクリックした時にTweetするようにするには、下のような書き方になります。

<a href="http://twitter.com/intent/tweet?url=<?php echo $_url;?>&text=<?php echo $_title;?>" target="_blank">
<img src="画像のリンク">
</a>

Facebookボタン

先ほどの記法がわかれば、FacebookのShareボタンも簡単です。ただ、「いいね」ではなくシェアになっている点だけ注意してください。

http://www.facebook.com/sharer.php?src=bm&u=<?php echo $_url;?>&t=<?php echo $_title;?>

はてブボタン

これも同じですね。

http://b.hatena.ne.jp/add?mode=confirm&url=<?php echo $_url;?>&title=<?php echo $_title;?>

基本的にURLとしてパラメータを指定してhref属性に入れてあげるだけです。

新しいWindowで開く

今回指定してあげた、URLだと別タブで開かれてしまう点が気になってしまいます。そこで、別Windowで開くようにしてあげる事で、より純正に近い動作に近づけたいとおもいます。

そのためにはonclick属性（クリックした時の動作）にJavaScriptを追加してあげれば良いのです。

onclick="window.open('開くURL', '', 'width=新しいWindowの横幅,height=新しいWindowの縦幅'); return false;"

実際に、Facebookボタンにこれを追記してみると、こんな感じになります。

<a href="http://www.facebook.com/sharer.php?src=bm&u=<?php echo $_url;?>&t=<?php echo $_title;?>" target="_blank" onclick="window.open('http://www.facebook.com/sharer.php?src=bm&u=<?php echo $_url;?>&t=<?php echo $_title;?>', '', 'width=500,height=400'); return false">
<img src="画像のURL">
</a>

以下のように新しいWindowで開かれ良い感じになったでしょう。