押されたシェアボタンによってOGPを切り替えるページをつくる

前回の記事 の応用編です。

kimizuka.hatenablog.com

マークアップをしていると、「シェアボタンによってOGPを切り替えて欲しい」と頼まれる瞬間がやってくると思います。
そんな時こそ Feed Dialog（フィードダイアログ） の出番だと思われます。

DEMO

http://jsrun.it/kimmy/UNiF

illustボタンを押すとゴリラのイラストを、photoボタンを押すとゴリラの写真をOG画像に設定してシェアできます。
（タイトルも微妙に変えています）
また、シェアし終わったあとにどちらを選択したかをアラートで表示しています。

(function(win, doc, $) {
    
    "use strict";
    
    $(".btn").on("click", function(evt) {
        var $target = $(evt.delegateTarget),
            param = {
                method : "feed",
                link : "http://jsrun.it/kimmy/UNiF",
                description : "ウホホーイ。",
                caption: "ゴリラ"
            },
            type;

        if ($target.hasClass("illust")) { // イラストが押されたとき
            param.picture = "http://jsrun.it/assets/o/d/h/T/odhT8.jpeg";
            param.name = "イラスト or 写真";
            type = "イラスト";
        }
        
        if ($target.hasClass("photo")) { // フォトが押されたとき
            param.picture = "http://f.st-hatena.com/images/fotolife/k/kimizuka/20140114/20140114030618.png";
            param.name = "写真 or イラスト";
            type = "写真"
        }
        
        FB.ui(param, function(evt) {
            if (evt && evt.post_id) { // 本当にポストしたか確認
                alert(type + "をシェアしましたね！");
            }
        });
    });
    
})(this, document, jQuery);