無料相談・お問い合わせ
ブログを移転しました。
移転先 札幌のホームページ制作・Wordpressのハルリのブログ
Haluri Blog

wordpressでオリジナルのtwitter、はてブボタンを設置する方法

2012年 1月10日  WEBマーケティング

twitterとはてなブックマークボタンの公式ボタンが小さいので、大きいボタンにしたいと思い、オリジナルボタンの設置してみました。

せっかくできたので、オリジナルボタンにする方法を書きます。

オリジナルボタン画像の作成

まずはオリジナルのtwitter、はてなブックマークボタンを作成します。

ちなみに、twitterのロゴはpicoというフォントが使われていますので、字体を合わせたい方はフォントをダウンロードして作成してください。

picoのダウンロードはこちら

twitterボタンをオリジナル画像に変更する方法

オリジナルボタンにする方法を検索したところ、こんなサイトが出てきました。
Facebook,Twitter,はてな,mixiのソーシャルボタンをオリジナルにしたいのです

このサイトによると、

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

これで、オリジナルボタンに変更が可能とのことでした。 

ページのタイトル・URLを取得する

ソースがわかりましたが、大きな問題が2つあります。

記事毎にページタイトルとURLが違うので、記事毎にページタイトルとURLを取得しなければなりません。

せっかくwordpressを使っているので、テンプレートタグで良いのがないか探したところ、ページタイトルはthe_title()で、URLはthe_permalink()で取得できるそうなので、これを使います。

the_title()とthe_permalink()を先程のソースに入れると以下のようになります。

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

これでバッチリ!と思って、ボタンを押してみたところ…

文字が化けてる…

ツイートする文字が「????」と化けています。

これだと、せっかくつぶやいてくれても、不気味なつぶやきになるので、修正しないと…。

どうやらURLはエンコードしなくてもいいのですが、ページタイトルは日本語なのでエンコードしないとダメみたいです。

ページタイトルをエンコードする

他の人はどうやっているのだろうと思って、オリジナルのtwitterボタンを設置しているサイトを探し、ボタンをクリックしてみましたが、どこのサイトも私と同じように、「????」となっていました。

参考にしようと思ったのですがダメでした…。

どうすればエンコードできるか調べたところ、こんな記事を見つけました。
WordPressのタグをurlエンコード

ページタイトルはurlencode( the_title( "" , "" , 0 ) )でエンコードできるとのことなので、<?php echo urlencode( the_title( "" , "" , 0 ) ) ?>をページタイトルのところに挿入します。

先程のソースにこれを挿入すると以下のようになります。

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

これで完成です。ページタイトルまでツイートできるようになりました。

しかし、小窓が開くようになってるのですが、なぜか小窓が開きません…。

しかも、新しいウィンドウを開かず、ページが遷移してツイート画面になってしまうので、これも修正しないといけませんね…。

ということで、 リンクタグにtarget="_blank"を追加して、新しいウィンドウを開いてツイートするようにします。

ついでに、画像の説明文が入っていないので、これも追加すると以下のようになります。

twitterのボタンをオリジナルにするソース

<a href="http://twitter.com/share?count=horizontal&amp;original_referer=<?php the_permalink() ?>&amp;text=<?php the_tittle() ?>&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;" 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、はてなブックマークをオリジナルボタンにする際に、文字が化けてしまった方はぜひお試しを。

  • このエントリーをはてなブックマークに追加


Facebookページにご参加ください

ホームページの作成やSEO対策、Wordpress、WEBマーケティングなど、様々なタメになる情報を配信しています。Facebookページへの参加は下の『いいね!』ボタンをクリックしてください。

関連記事

人気記事

コメント

お名前

コメント本文


pagetop