FacebookのiFrameタブで各動画の共有情報をカスタマイズする方法は？

Question

私はfacebookのiframeタブを持っています。このタブにはyoutube apiが提供するjsonレスポンスから直接引き出されたいくつかのyoutubeビデオがあります。

あなたがビデオは、タブの上部に埋め込まれた後、再生することができ、サムネイルを選択します。また、埋め込まれたビデオの下に表示

は、タイトル、説明、ビューと共有ボタンです。

現時点での情報共有には、すべてのビデオでも同じですし、私はそれは、AJAX呼び出しを行うことを意味しても、各ビデオのためにそれをカスタマイズする方法を私の脳をラッキングしています。ここで

は、関連するコードです：

$(document).ready(function() { 

$('.share_button').live('click', function(e){ 
    // fade out video to stop it conflicting with dialogue box 
$('#player').fadeOut('slow'); 
    e.preventDefault(); 
    FB.ui(
    { 
     method: 'feed', 
     name: 'generic name', 
     link: 'generic link', 
     picture: 'generic image', 
     caption: 'generic caption', 
     description: 'generic description' 
    }, 
    function(response) { 
     // fade video back in once the dialogue box is closed 
     $('#player').show('slow');  
    }); 
}); 

私のタブのための完全なコードは次のとおりです。ご不明な点などがある場合

$url = 'http://gdata.youtube.com/feeds/api/videos?max-results=20&alt=jsonc&orderby=published&format=5&safeSearch=none&author=CHANNELID&v=2'; 
$ch = curl_init(); 
curl_setopt($ch, CURLOPT_URL, $url); 
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); 
curl_setopt($ch, CURLOPT_REFERER, $url); 
$body = curl_exec($ch); 
curl_close($ch); 
$data = json_decode($body, true); 

?> 
<div id="fb-root"></div> 
<script> 
window.fbAsyncInit = function() { 
    FB.init({ 
     appId : 'XXXXXXXXX', 
     status : true, // check login status 
     cookie : true, // enable cookies to allow the server to access the session 
     xfbml : true // parse XFBML 
    }); 
}; 

(function() { 
var e = document.createElement('script'); 
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js'; 
e.async = true; 
document.getElementById('fb-root').appendChild(e); 
}()); 
</script> 


<div id="placeholder" style="font-family:Helvetica; max-width:500px; margin:0 0 20px 0;"> 
<div id="player"><iframe width="480" height="274" src="https://www.youtube.com/embed/<?php echo $data['data']['items'][1]['id']; ?>" frameborder="0" allowfullscreen wmode="Opaque"></iframe></div> 
<div id="title" style=" font-size:14px; font-weight:bold; color:#3B5998; margin:2px 0 3px 0;"><?php echo $data['data']['items'][1]['title']; ?> </div> 
<div id="views" style="color:#BBB; font-size:12px;"><?php echo $data['data']['items'][1]['viewCount'];?> views</div> 
<div id="description" style="font-size:14px;"><?php echo $data['data']['items'][1]['description'];?></div> 
<img src = "../images/share_button.png" class="share_button" id="1" style="cursor:pointer;"> 
<div id="hr" style="padding:5px 0 10px 0; float:left; border-bottom: 1px solid #96CC90; width:480px; margin:0 0 15px 0;"></div> 
</div> 

<?php 
$i = 0; 

foreach($data['data']['items'] as $item) { 
$id = $item['id']; 
$thumb = $item['thumbnail']['sqDefault']; 
?> 
<div class="video" id="<?php echo $i; ?>" style="font-family:Helvetica; float:left; max-width:150px; min-height:130px; margin:0 0px 20px 10px; cursor:pointer;"> 
    <div class="thumb" style="position:relative; left:0; top:0;"> 
     <img src="<?php echo $item['thumbnail']['sqDefault'];?>" title="<?php echo $description;?>" style="position:relative; top:0; left:0px;"/> 
     <img src="../images/play-thumb.png" style="position:absolute; top:30px; left:45px;"/> 
    </div> 
    <div class="title" style="font-size:14px; font-weight:bold; color:#3B5998; margin:2px 0 3px 0;"><?php echo $item['title']; ?></div> 
    <div class="views" style="font-size:12px; cursor:text;"><?php echo $item['viewCount'];?> views</div> 
</div> 

<?php 
$i++; 
} 
?> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 

$('.share_button').live('click', function(e){ 
    $('#player').fadeOut('slow'); 
    e.preventDefault(); 
    FB.ui(
    { 
     method: 'feed', 
     name: 'Generic Name', 
     link: 'Generic Link', 
     picture: 'Generic Picture', 
     caption: 'Generic Caption', 
     description: 'Generic Description' 
    }, 
    function(response) { 
      $('#player').show('slow');  
     }); 
}); 

$('.video').click(function() { 
    var id = $(this).attr('id'); 
    showVideo(id); 
}); 

function showVideo(id) 
{ 
    $('#placeholder').fadeOut('slow'); 

    $.ajax({ 
     type: 'GET', 
     url: '//www.domain.com/facebook/2011/video-player/youtube.php', 
     data: 'id='+ id, 
     beforeSend: function() { 
      $('#placeholder').html('<img src="../images/youtube-loader.gif" style="min-height:274px;"/>'); 
     }, 
     complete: function(){ 
      //something 
     }, 
     success: function(data) { 
      $('#placeholder').html(data); 
      $('#placeholder').fadeIn('slow'); 
     } 
    }); 
} 
}); 
</script> 

youtube.php

if (isset($_GET['id'])) 
{ 
    $arrayId = $_GET['id']; 

    $url = 'http://gdata.youtube.com/feeds/api/videos?max-results=20&alt=jsonc&orderby=published&format=5&safeSearch=none&author=CHANNELID&v=2'; 
    $ch = curl_init(); 
    curl_setopt($ch, CURLOPT_URL, $url); 
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); 
    curl_setopt($ch, CURLOPT_REFERER, $url); 
    $body = curl_exec($ch); 
    curl_close($ch); 
    $data = json_decode($body, true); 

    $video = $data['data']['items'][$arrayId]['id']; 
    $title = $data['data']['items'][$arrayId]['title']; 
    $views = $data['data']['items'][$arrayId]['viewCount']; 

    $description = $data['data']['items'][$arrayId]['description']; 
    $description = str_replace('uk.opticalexpress.com', '', $description); 
    $description = str_replace('-', '', $description); 
    $description = trim($description); 

    $embed = 'https://www.youtube.com/embed/'.$video; 

    $message = "<div id='player'><iframe style='z-index:9999;'width='480' height='274' src='". $embed ."' frameborder='0' allowfullscreen wmode='Opaque'></iframe></div>\n"; 
    $message .= "<div id='title' style='font-size:14px; font-weight:bold; color:#3B5998; margin:2px 0 3px 0;'>". $title ."</div>\n"; 
    $message .= "<div id='views' style='color:#BBB; font-size:12px;'>". $views ." views</div>\n"; 
    $message .= "<div id='description' style='font-size:14px;'>". $description ."</div>\n"; 
    $message .= "<img src = '../images/share_button.png' class='share_button' id='". $arrayId."' style='cursor:pointer;'>"; 
    $message .= "<div id='hr' style='padding:5px 0 10px 0; float:left; border-bottom: 1px solid #96CC90; width:480px; margin:0 0 15px 0;'></div>\n"; 

    echo $message; 

} 

?> 

ちょうど私を聞かせて知っていると私はそれをよりよく説明しようとします。

Answer 1

あなたはファンページ上のタブへのリンクを共有している場合はFacebook上で説明として表示されるテキストをカスタマイズする方法はありません。彼らはデフォルトでページの説明を使用し、PAGE_NAME | TAB_TITLEをタイトルとして使用します。

しかし、回避策があります：あなたは単にあなたがオープングラフタグを制御し、共有されている映像に応じて、それらを表示することができ、サーバー上のURLを共有
。ユーザーがこのような共有リンクをクリックすると、Facebookページのタブにリダイレクトすることができます。

また、あなたはアプリケーションのiFrameのに渡されたのを取得したURLパラメータ「App_Dataに」を使用することができ、共有ビデオへのディープリンクのいくつかの方法が必要な場合。