和田憲幸のブログ

札幌市白石区在住、個人事業のWebエンジニア 和田憲幸(45歳)のブログです。

カスタム画像のソーシャルのアレ

←コレね。Facebookのいいね!とtwitterのツイートするをカスタム画像で作りたい。

2012-06-04 20:55:33
入力時間 / 07:39

と思っていたんですけど、作るのが随分と遅くなりました。左上のやつね。
もうどんなサイトにも付いている「いいね!」「ツイートする」。どんな見た目のサイトにも画一的に実装されているコレが疎ましく感じる人もいるよね。私はそのひとりですけど。本当はブログをリニューアルする際に、フッターのツールバーにカスタムした「いいね!」「ツイートする」を付けたかったんですけど、ガチでやろうとすると結構メンドクサイ!って感じだったので放置してたんですよ。

そして1年の歳月を経て、作るに至ったというわけです。
正確に言うなら「いいね!」「ツイートする」の代替なんですけどね。ガチでやるためにはOAuthでアレコレしなきゃいけない。ハッキリ言ってメンドクサイのだ。なので、いいね!はshareとiframeでお茶を濁し、ツイートするはanywhereを使っている。「URLがツイートされた数」「いいね!が押された数」はjsonで持ってきているだけ。

特筆すべき点があるとすれば、ひとつのページ内に複数配置できるということだ(読み込みは遅くなるかもしれないが)。なのでブログ等の記事一覧ページに、各記事のhrefを指定すれば、各記事ページのLikeとtweetを引っ張ってくれる。あ、あとbitlyのAPIを使っているからトラッキングもできるしね。

ひとつのページに複数のカスタム画像ソーシャルボタンを配置した例

一応、MSIE6以降で動くようになっているはずなんだけどこのブログ上では何かとコンフリクトしてるようでMSIEでの挙動は期待できないものになっている・・・。というかこのブログ重すぎですよね。

そろそろブログを刷新する頃合いかな。

P.1183