wordpressでオリジナルのtwitter、はてブボタンを設置する方法
twitterとはてなブックマークボタンの公式ボタンが小さいので、大きいボタンにしたいと思い、オリジナルボタンの設置してみました。
せっかくできたので、オリジナルボタンにする方法を書きます。
オリジナルボタン画像の作成
まずはオリジナルのtwitter、はてなブックマークボタンを作成します。
ちなみに、twitterのロゴはpicoというフォントが使われていますので、字体を合わせたい方はフォントをダウンロードして作成してください。
twitterボタンをオリジナル画像に変更する方法
オリジナルボタンにする方法を検索したところ、こんなサイトが出てきました。
Facebook,Twitter,はてな,mixiのソーシャルボタンをオリジナルにしたいのです
このサイトによると、
<a href="http://twitter.com/share?count=horizontal&original_referer=ここにhttp://のアドレス&text=ここにタイトル&url=ここにhttp://のアドレス&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>
これで、オリジナルボタンに変更が可能とのことでした。
ページのタイトル・URLを取得する
ソースがわかりましたが、大きな問題が2つあります。
記事毎にページタイトルとURLが違うので、記事毎にページタイトルとURLを取得しなければなりません。
せっかくwordpressを使っているので、テンプレートタグで良いのがないか探したところ、ページタイトルはthe_title()で、URLはthe_permalink()で取得できるそうなので、これを使います。
the_title()とthe_permalink()を先程のソースに入れると以下のようになります。
<a href="http://twitter.com/share?count=horizontal&original_referer=<?php the_permalink() ?>&text=<?php the_tittle() ?>&url=<?php the_permalink() ?>&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>
これでバッチリ！と思って、ボタンを押してみたところ…
文字が化けてる…
ツイートする文字が「????」と化けています。
これだと、せっかくつぶやいてくれても、不気味なつぶやきになるので、修正しないと…。
どうやらURLはエンコードしなくてもいいのですが、ページタイトルは日本語なのでエンコードしないとダメみたいです。
ページタイトルをエンコードする
他の人はどうやっているのだろうと思って、オリジナルのtwitterボタンを設置しているサイトを探し、ボタンをクリックしてみましたが、どこのサイトも私と同じように、「????」となっていました。
参考にしようと思ったのですがダメでした…。
どうすればエンコードできるか調べたところ、こんな記事を見つけました。
WordPressのタグをurlエンコード
ページタイトルはurlencode( the_title( "" , "" , 0 ) )でエンコードできるとのことなので、<?php echo urlencode( the_title( "" , "" , 0 ) ) ?>をページタイトルのところに挿入します。
先程のソースにこれを挿入すると以下のようになります。
<a href="http://twitter.com/share?count=horizontal&original_referer=<?php the_permalink() ?>&text=<?php the_tittle() ?>&url=<?php the_permalink() ?>&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>
これで完成です。ページタイトルまでツイートできるようになりました。
しかし、小窓が開くようになってるのですが、なぜか小窓が開きません…。
しかも、新しいウィンドウを開かず、ページが遷移してツイート画面になってしまうので、これも修正しないといけませんね…。
ということで、 リンクタグにtarget="_blank"を追加して、新しいウィンドウを開いてツイートするようにします。
ついでに、画像の説明文が入っていないので、これも追加すると以下のようになります。
twitterのボタンをオリジナルにするソース
<a href="http://twitter.com/share?count=horizontal&original_referer=<?php the_permalink() ?>&text=<?php the_tittle() ?>&url=<?php the_permalink() ?>&via=ここに自分のTwitterアカウント" onclick="window.open(this.href, ‘tweetwindow’, ‘width=550, height=450,personalbar=0,toolbar=0,scrollbars=1,resizable=1′); return false;" target="_blank"><img src="オリジナルのボタン" width="サイズ" height="サイズ" alt="画像の説明文" /></a>
これで、ページタイトル・URLを新しいウィンドウを開いてつぶやくことができます。
※小窓を開く方法がわかる方はご一報お願いします。
次に、はてなブックマークボタンをオリジナル画像に変更する方法です。
はてなブックマークボタンをオリジナル画像に変更する
twitterで使ったページタイトルとURLをそのまま使います。
ソースははてブの「ブックマーク」ボタンをオリジナルデザインに変更するによると、以下のソースで変更できるとのことでした。
<a href="http://b.hatena.ne.jp/add?mode=confirm&url=ブックマークしたいWebページのURL&title=ブックマークしたいWebページのタイトル">
<img src="用意した画像のパス">
</a>
このままだと画像の幅・高さ・説明文がないですし、xhtmlでもないですし、ボタンをクリックするとページが遷移してブックマークページになってしまうので、新しいウィンドウでブックマークしてもらうように、これらもついでに修正します。
修正すると以下のようになります。
はてなブックマークボタンをオリジナル画像にするソース
<a href="http://b.hatena.ne.jp/add?mode=confirm&url=<?php the_permalink() ?>&title=<?php echo urlencode( the_title( "" , "" , 0 ) ) ?>" target="_blank">
<img src="用意した画像のパス" width="画像の幅" height="画像の高さ" alt="画像の説明文" />
</a>
これではてなブックマークをオリジナルボタンに変更できます。
twitter、はてなブックマークをオリジナルボタンにする際に、文字が化けてしまった方はぜひお試しを。
