Fly higher! Sky is the limit!

webの現場で働く人のブログ

facebookのOGPキャッシュをボタン1つで消せるBookmarkletを作製しました。

ページ公開直後のコンテンツに対してシェアボタンを押してもOGP情報をうまく取得できずシェアされない場合がありますよねー。 これは公開前のURLにfacebookのクローラがアクセスしてしまうことによって、facebook側にキャッシュが残ってしまいそちらを参照してしまうのが原因だそう。 (つまり、空ページをfacebook側がキャッシュしてしまっている。)

今まではページが公開されるとfacebook側が提供しているデバッグページにてキャッシュをクリアしていたけど少し煩わしさを感じていた。 いちいちfacebookにログインしなきゃいけないし、対象のURLをコピーして貼り付けなきゃだし、ボタンを押さなきゃいけないわけで...

『なんとかこの作業について簡略化・自動化できないか』と調べたところAPIの「https://graph.facebook.com/?scrape=true&id=URL」にPOSTメソッドでアクセスすると、再クロールしてくれるという記事を発見!

公開ページそのものにこのスクリプトないしプログラムを組み込めば、完全に自動化できるけど閲覧する度にPOSTするのもパフォーマンス的にいかがなものか? と思いBookmarkletでポチッとボタンを押すだけでキャッシュを消すことができるものを作製することにした。

自分は普段使いのブラウザがChromeなのでこちらのBookmarkletで問題ないのだが、現場から「Firefoxで動かねぇーよ!」という声が上がってきた。実際に確認してみるとなぜか、FirefoxだとBookmarklet内でAjaxを使ってPOSTできない..(誰かエロい人教えてください。)

2016/9/8修正
実は圧縮でミスってることがわかりました。
YUI Compressorを使用していたのですが、圧縮に問題が...
他の圧縮ツールを使用したところ、問題なくできたのでこちらを使用ください。
こちらは、Firefox/Chromeでも使用できます。

Bookmarkletソース(Firefox/Chrome用)

javascript:(function(){!function(c,b,a){a=c.createElement("script");a.src="//j.mp/1bPoAXq";a.onload=function(){b(jQuery.noConflict(1))};c.body.appendChild(a)}(document,function(a){a.ajax({url:"https://graph.facebook.com/?scrape=true&id="+location.href,method:"post"}).done(function(){alert("OGPキャッシュを消しましたー。")})})})();

これで、facebook側が提供しているデバッグページを使わずに済むので煩わしさが無くなりそう。

ちなみにIEsafariでは試してないです。

参考

web-tan.forum.impressrd.jp

developers.facebook.com

superuser.com