« 帰宅難民になったときの備えについて考えてみた | トップページ | これは快適!AVIREX EAGLEシリーズレッグバッグ「AVX348(ベージュ)」買いました »

2011年3月24日 (木)

ココログ記事下にFacebookの「いいね!」ボタンとTwitterの「ツイートする」ボタンを設置する

Facebook Twitter ロゴ

このブログの記事下にも「いいね!」ボタンと「ツイートする」ボタンを設置してみました。まだ少しおさまりが悪いとか、一部ブラウザで表示が崩れるとかの不具合は残っていますが、一応無事に動いているようです。
不出来ではありますが、まずはできたところまででご紹介します。


基本方針
設置に向けた考え方は下記のとおりです。

(1)facebook、Twitterそれぞれからボタン生成用スクリプトを取得
(2)facebookボタンはスクリプト内にURLを埋め込む必要があるので、「今見ているページ」のURLを埋め込めるようにスクリプトを修正
(3)それぞれのスクリプトをdivでくくって記事下に配置(外部JavaScriptで)
(4)記事が複数表示されるページ(インデクスページやカテゴリーページなど)にはボタンが表示されないように細工

以下、それぞれのポイントをざっくりご紹介します。


1.スクリプトの取得
スクリプトの取得は簡単です。
それぞれ下記から取得しました。

Like Button - Facebook開発者
Twitter / ツイートボタン


2.facebook用スクリプトの改造
facebookの「いいね!」ボタンのスクリプトには、取得時に設定したURLが埋め込まれています。しかし、URLにブログのトップページなどを指定したままだと、どの記事で「いいね!」を押してもトップページ用のカウントになってしまうので、記事のURLに変更しないといけません。

これは下記のようにすると変更できます。
今見ているURLをエスケープして、URL部分に埋め込んでいます。

<iframe src="http://www.facebook.com/plugins/like.php?href=' + encodeURIComponent(document.URL) + '&amp;layout=button_count&amp;show_faces=true&amp;width=450&action=like&amp;font&amp;colorscheme=light&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:21px;" allowTransparency="true"></iframe>


3.記事下に配置
それぞれのスクリプトをdivでくくって、マージンやら配置やらを調整しながら記事下に設置します。ただ、すべての記事を書くときにいちいちすべてを記載するのは面倒なので、この部分は外部JavaScript化してしまいました。
これまでもAdsense等の表示は外部スクリプトにしていたので、そのスクリプトに各ボタンの出力部分を追記した感じになります。

スクリプトはむちゃくちゃ汚いのであまり公開したくないのですが、各ボタンの表示部分だけ抜き出すと下記のような感じになっています。
なお僕の使っているテンプレートは外部CSSが編集できないため、しかたなくスタイルはすべてインラインで記述してしまっています。

document.write('<div style="display:table-cell; float:right; vertical-align:bottom; margin:0 0 1px 0;"><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="gadget_watch" data-lang="ja">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></div><div style="display:table-cell; float:right; vertical-align:bottom; margin:1px 0 0 0;"><iframe src="http://www.facebook.com/plugins/like.php?href=' + encodeURIComponent(document.URL) + '&amp;layout=box_count&amp;show_faces=false&amp;width=100&amp;action=like&amp;font&amp;colorscheme=light&amp;height=65" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:65px;" allowTransparency="true"></iframe></div><div style="clear:all;"></div>');


4.トップページなどでの表示の防止
2.でも書いているとおり、「いいね!」ボタンについては今見ているURLに対してカウントする形になっています。そのため、トップページやカテゴリーページなど、記事が複数並ぶページにはボタンを表示したくありません。
ココログの場合、トップページやカテゴリーページなどは「URLが/(スラッシュ)で終わる」もしくは「/index.htmlになっている」のどちらかのようなので、現在のURLがどちらかに該当する場合は3.の部分を出力しないようにしました。

if( !( document.URL.match(/\/$/) || document.URL.match(/index.html$/) ) ) { (ここに上記のコード) }

これで、記事単体が表示されたときのみ上記ボタンが表示されるようになりました。
このブログは検索などから各記事に直接来訪されることが多いので、この程度の対応でも問題なしですね。


現状の課題と今後
実はIE6/IE7では表示が崩れると思います。これはdivを並べるときに、これらのブラウザで対応していないプロパティを使っているためです。ここについては早々に直したいですね…。それにまだまだスクリプトが汚いですし、位置もしっくりきてないので、しばらくはTry&Errorで格闘してみるつもりです。
まずは、こんな感じで設置ができますよ、というサンプルとしてお使いいただければと思います。


関連サイト
Like Button - Facebook開発者
Facebookオフィシャルの「いいね!」ボタン生成ツールです。

Twitter / ツイートボタン
Twitterオフィシャルの「ツイートする」ボタン生成ツールです。

|

« 帰宅難民になったときの備えについて考えてみた | トップページ | これは快適!AVIREX EAGLEシリーズレッグバッグ「AVX348(ベージュ)」買いました »

プログラム(Perl・HTML・JavaScript)」カテゴリの記事

コメント

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/153129/51204185

この記事へのトラックバック一覧です: ココログ記事下にFacebookの「いいね!」ボタンとTwitterの「ツイートする」ボタンを設置する:

« 帰宅難民になったときの備えについて考えてみた | トップページ | これは快適!AVIREX EAGLEシリーズレッグバッグ「AVX348(ベージュ)」買いました »