Flickrのクレジット表記を作るブックマークレット(新デザイン対応済み)

Flickrの写真は綺麗なのが多くて好きだけど、クレジット表記を作るのがちょっとめんどくさい。何かないかなーと思って探すとブックマークレットを作っている人がいるじゃないですか。早速使おうと思ったら皆デザインリニューアル前のFlickr向け…ぐぬ、今のFlickrじゃ動かないぞこれ。

Photo: Flickr by Amanda Cabral

…というわけで、ないから作った。

実行するとクレジット表記用のHTMLがプロンプトで表示されます。こんな感じ。

作成されるクレジット表記

この表記を作ります。↓

Photo: Flickr by Amanda Cabral

使い方

下記リンクをブックマークバーにドラッグ&ドロップ。
[iframe style=’width:300px;height:40px;min-height:40px;’ src=’https://zafiel.wingall.com/bookmarklet/flickr_bookmarklet.html’][/iframe]
Flickrの写真ページ(例えばここ)でブックマークレットを実行すると、HTMLを作ってプロンプトで表示します。

ブックマークレットの中身

コードは下記の通り。必要であればカスタマイズして使ってください。

javascript:(function(){
    var a,title,
        divs = document.getElementsByTagName('div'),
        len = divs.length;
    for(var i=0;i<len;i++){
        if(divs[i].className == 'attribution-info'){
            a = divs[i].getElementsByTagName('a')[0];
            break;
        }
    }
 
    var spans = document.getElementsByTagName('span'),
        s_len = spans.length;
    for(var i=0;i<s_len;i++){
        if(spans[i].className.match(/photo-title/)){
            title = spans[i].childNodes[0].nodeValue.replace(/ /g, '').replace(/\t/g, '').replace(/\n/g, '');
            break;
        }
    }
 
    var url = document.location +'';
    var author  = a.childNodes[0].nodeValue;
    var author_link = a.href;
    var html    = '<small>Photo: <a href="' +url +'" target="_blank">' +title +'</a> by <a href="' +author_link +'" target="_blank">' +author +'</a></small>';
    window.prompt('Credit', html);
})();

iPhoneでブログを書く方はこちらへどうぞ。
FlickrのクレジットHTMLを作ってするぷろに投げるブックマークレット | Zafiel