横幅、縦幅自由自在！オリジナルデザインのTwitterツイートボタンの作り方。

isloop

13年前

Photo by: Andrew Abogado

ソーシャルボタンの幅や縦幅は統一されるべきと腹の底から訴えたい、するぷです。

そう、ソーシャルメディアにブログやサイトの情報をシェアできるボタンって結構サイズがバラバラで、それらを並べたりすると結構汚くみえちゃうんですよねー。

特にTwitterの公式ボタンなんて最悪で、横幅がちょーでかくて、縦にそろえようと思うとジグザクになってしまうことうけあいです。

というわけで、今まで他のソーシャルボタンと同じ横幅な、Topsyを使っていたのですが、これだと、ツイートしたときに記事を書いた人のフォローをオススメしてくれる機能がないので、なんか微妙でした。

どうしたもんかと悩んでいたときに、なんとツイートボタンは自作できるということを @loop99 さんに教えてもらって、さっそく試してみたらホントにできたじゃねーの！

というわけで、その方法をシェアしたいと思います。

可愛いツイートボタンはつくれる！

Twitterの「ツイート」ボタンをオリジナルデザインに変更する | indigonote
http://indigonote.com/2011/05/17/javascript-twitter-button/

@loop99 さんに教えてもらったのがこのページ。

うおっ！ここで紹介されている、JavaScript、JQueryを使えばカンタンに実装できちゃうじゃねーの！

というわけで、ここで紹介されているJavaScriptで設置の方法を元に、オリジナルデザインのTwitterツイートボタンをつくってみました。

オリジナルデザインのTwitterツイートボタンの作り方（JavaScript編）

indigonoteさんで、公開されている「サンプル／JavaScriptを使った「ツイート」ボタン」のJavaScript関数を<head>内に埋め込みます。

同じく上のCSSを<head>内に埋め込みます。

<div class="tweetCountArrow"><a href="https://twitter.com/#!/search/realtime/<$MTEntryPermalink encode_url='1' $>" target="_blank" rel="nofollow" class="tweetButtonLink"><span id="tweetCount1"></span></a></div>
<a href="http://twitter.com/share?count=horizontal&amp;via=twitter&amp;lang=ja&amp;url=<$MTEntryPermalink$>&amp;text=<$MTEntryTitle encode_url='1' $>" target="_blank" rel="nofollow"><img src="/img/tweet.gif" alt="ツイートする" width="50" height="15" class="tweetButton" onmouseover="this.src='/img/tweet_push.gif'" onmouseout="this.src='/img/tweet.gif'" /></a>

<div class="tweetCountArrow"><a href="https://twitter.com/#!/search/realtime/<?php echo urlencode( the_permalink() )?>" target="_blank" rel="nofollow" class="tweetButtonLink"><span id="tweetCount1"></span></a></div>
<a href="http://twitter.com/share?count=horizontal&amp;via=twitter&amp;lang=ja&amp;url=<?php the_permalink(); ?>&amp;text=<?php the_title(); ?>" target="_blank" rel="nofollow"><img src="/img/tweet.gif" alt="ツイートする" width="50" height="15" class="tweetButton" onmouseover="this.src='/img/tweet_push.gif'" onmouseout="this.src='/img/tweet.gif'" /></a>

ツイートボタンを設置したい場所に、以下のHTMLを埋め込みます。(via=twitterのtwitterを自分のツイッターアカウントにしておくことをお忘れ無く。)

<script type="text/javascript">tweetCount('tweetCount1', '<$MTEntryPermalink$>')</script>

<script type="text/javascript">tweetCount('tweetCount1', '<?php the_permalink(); ?>')</script>

<script type="text/javascript">tweetCount('tweetCount1', '自分のURL')</script>

次に＜/body＞のすぐ上に、このスクリプトを設置します。

・ボタン画像

あとは、この3つの画像をダウンロードして保存し、自分のトップページ直下のimgフォルダにアップロードします。（和洋風◎用に自作したものです。ご自由にお使いください。直リンクはだめよ♡）

これで設置は完了です。上のように表示されるハズです。

横幅・縦幅自由自在！

あくまで、上の例は僕がつくったボタン画像にそったコードですが、自分のオリジナルボタンを作りたい場合は、その画像に置き換えれば大丈夫です。（もちろんコードもその画像に合わせて）

つまり、横幅・縦幅自由自在だということです。

このボタンでツイートした際は、きちんと自分のアカウントのフォローを薦めてくれます。

またこのボタンを使えば、公式のツイートボタンと同様に、記事のツイートがされた際に、自分のTwitterアカウントのフォローを薦めてくれます。

ここからのフォローは結構多いのでかなりオススメです。

あとがき

というわけで、この情報を教えてくれた、@loop99さん、このツイートボタンの作り方をどこよりも詳しくかいてくださった、indigonoteさん、ほんとうにありがとうございます。

これで気持ちよくソーシャルボタンを設置できるようになりました。ほんと感謝感激雨あられでございます。

たぶん僕と同じに思っている方は、世界に沢山いるはず。この記事が少しでも参考になればこれ幸いです。