忍者ブログのテンプレートにtweetボタンといいね！ボタンを付けてみた【番外編】

そういえば、いつかやろうと思いつつ忘れていたtwitterのツイートボタンと
facebookのいいね！ボタンを付けてみました。

すぐに忘れそうなので手順を書いておきます。

【tweetボタンの設置手順】
１．まずはtwitterの関連情報›ツイートボタンのページで
　　好きなボタンのデザイン・おすすめユーザーの設定をしましょう。
２．プレビューのイメージで問題がなければ「このコードをコピーし、
　　あなたのWEBサイトのHTMLの好きな場所に張り付けてください。」って書いてあるところの
　　HTMLコードをコピーして、テンプレートの表示させたい場所に貼りましょう。
３．おしまい！

……なんですが、実際にはこんな感じにちょっと編集しています。
ちっちゃいボタンが縦に並ぶのがなんか嫌だったので。
本音を言えば、拍手ボタンの隣に並べたかったんだけど、拍手ボタンは自動なので
テンプレートじゃどうにもできないっぽいので諦めました。

<div style="padding:7px;width:130px;height:21px;display:block;float:left;">
<a href="http://twitter.com/share" class="twitter-share-button" data-url="http://<!--$g_user_id--><!--$entry_link-->" data-text="<!--$entry_title-->【<!--$g_title-->】" data-count="horizontal" data-via="green_flag8823" data-lang="ja">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</div>

・とりあえず<div>タグで囲ったのは、後で設置するfacebookのいいね！ボタンと
　スタイルシートの記述に統一感を出したかったからってだけです。
　いや、だって気持ち悪いじゃない。似たようなコンテンツのくせに
　HTMLは<div>タグと<a>タグで同じようなスタイル設定するとかさ。
・paddingはちょっと上下に余白入れないと詰まった感じになっちゃったので入れた。
　こういう時、marginをできるだけ使わないようにしようとするのはIE対策をしたくないからです（ｷﾘｯ
・いいね！ボタンと並べたかったのでdisplay:blockとfloat:left;で左寄せ。

【いいね！ボタン（facebook）の設置手順】
１．facebookのホーム›Documentation›Facebook for Websitesのページで
上から三つ目の「Social Plugins」のところにある<iframe>タグのソースをコピー。
２．１のHTMLソース中のリンク先URL「http://example.com」を変更。
３．テンプレートの表示させたい場所に貼る。
４．おしまい！

……なんですが、以下略な感じで実際に貼ってるのはこんなソースです。

<div style="padding:7px;width:500px;height:21px;display:block;float:left;">
<iframe src="http://www.facebook.com/plugins/like.php?href=http://<!--$g_user_id--><!--$entry_link-->&layout=button_count&show_faces=true&width=50&action=like&font&colorscheme=light&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:500px; height:21px;" allowTransparency="true"></iframe>
</div>

・<iframe>タグを<div>タグで囲むというのはあんまり好きではないが、
　ツイートボタンの処理と体裁を揃えたかったので譲歩しました。
・デフォルトのままだと<iframe>タグの中の文章が勝手に折り返してしまうので、
　<iframe>タグのstyle要素にwidth:500px;を追加
・リンク先はブログのURLをそのままでも良かったんだけど、せっかくなので
　テンプレートっぽく変数を使って
　http://<!--$g_user_id--><!--$entry_link-->
　こういう感じで、各記事へのリンクになるようにしてみた。

あっ、でもtwitterの方はブログトップのURLになっちゃうのですね。
こっちも記事ごとがいいなー。
あっ、そしてfacebookはいいね！押したら下に出るから、そっか。width入れたらだめなのか。
↑あまりに気持ち悪いのでもう修正しちゃいました。
上のソースも修正してあります。だって、気になって眠れないよ！

ではでは。