でもあるのが当たり前な毎日になって無い方が不思議なくらいに、日本でのFacebookは普及しました。
でもなんでいつも青色バックのいいね！なんだろう？と思った事はありませんか。
いいね！じゃなくて、カワイイ！とか日本人向けなんじゃないのとか、tdiaryのプラグインでもあるへー！ボタンとかでもいいんじゃないのかな、と思って調べてみました
それをChromeのExtentionで実装出来ないだろうか？調査とその結果にいたるまでの内容です、というかまだ終わってません。orz
やりたい事としてはFacebook Like Buttonを実装するサイト側じゃなくて、そのButtonを見ている側がそれを自分のブラウザーだけでカスタマイズ出来ないかなーと思ったのです。greasemonkeyとかで出来そうな気もするんだけど。
まずChrome のextentionの作り方についてはこのページが参考になりました。
>> Tutorial: Getting Started (Hello, World!)
よくある echo 'hello'とかじゃなくて、とても実践的なチュートリアルです。
上記を一通りやってみてから、Facebookのいいね！ボタンについて調べてみます。
>> Facebook Like Box
例えばblog.popowa.comに対していいね！ボタンを付ける場合、コードとしては
になります。
（上記のソース内でJSが動いてしまっているけど）その後実際にウェブ経由で見た際にどのように展開されているかというと
divの中にspanを入れて、その中にiframeをappendして表示させているようです。
iframe内にあるsrcのURLをブラウザーで叩くとになって以下のようになっていました。
いいね！
そもそもあるページからiframe内に読み込まれるデータを変更出来るんだろうか？これは調べてみたら出来るようですが、iframeのid/nameは、reloadする度に変わる事が判明。
ここはid/nameが固定じゃないと var likeText = {iframeのid}.document.getElementByClassName('liketext').value; で出来ない。
何度かreloadして分かった事は、最初の文字が小文字英語の"f"である事ぐらいで、その後はランダムであまり規則性がなさそう。
そして検索しているうちにこんなページを発見
>> Facebookの「いいね！」ボタンのガイドライン
用途
「いいね！」ボタンの大きさは必要に応じて調節していただいて構いませんが、その他の変更は一切認められません(デザイン変更など)。
という事なので、出来ない模様。この用途を良く読むと[F]がないといけない、と書いてあるのにはすこし驚きを感じました。結構適当にいいね！を[F]なしで使っている広告代理店とか、見る気がします。まぁ、それはいつかFacebookが本腰を入れたら直るかと思いますが。
さて個人のブラウザー単位でいいね！を違う文字に変えられるか、という話に戻ると、 まだ出来てなくてjQueryのAPIを現在調べ居ている所。
動的にjQueryをappendした時、確かそれ専用にreload的に使える関数があった気がするんだけど、まだ見つけれてない。
こんな感じで書いてみたんだけど、jQueryが読み込まれてないようで、$って何？とエラーが出る。
manifest.json
{
"name": "Customize FB Like!",
"version": "1.0",
"description": "This extension can allow you customize Facebook 'like' to 'Cute'",
"content_scripts": [
{
"matches": ["http://*/*"],
"js": ["myscript.js"]
}
],
"permissions": [
]
}
myscript.js
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js';
document.getElementsByTagName('head')[0].appendChild(script);
$(document).ready(function(){
$('iframe').contents().find('span[@class="liketext"]').html('Cute');
});
もうちょっと調べないとです(´・ω・`)。つづく！
FacebookのLike ButtonのiframeのsrcのHTML詳細
Like
