Как настроить обмен информацией для каждого отдельного видео на вкладке Facebook iFrame? - PullRequest
Новая
       2

Как настроить обмен информацией для каждого отдельного видео на вкладке Facebook iFrame?

0 голосов
/ 19 декабря 2011

У меня есть вкладка iframe на Facebook, на которой есть несколько видео на YouTube, которые извлекаются непосредственно из ответа json, предоставленного API 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;

}

?>

Если что-то неясно, просто дайте мне знать, и я постараюсь объяснить это лучше.

1 Ответ

0 голосов
/ 20 декабря 2011

Если вы делитесь ссылкой на вкладку на странице поклонника, нет способа настроить текст, который отображается в виде описания на Facebook. Они используют описание страницы по умолчанию и PAGE_NAME | TAB_TITLE в качестве заголовка.

Но есть обходной путь:
Вы просто обмениваетесь URL-адресом на своем сервере, где вы можете управлять тегами Open Graph и отображать их в зависимости от видео, которым вы поделились. Если пользователь теперь щелкает по такой общей ссылке, вы можете просто перенаправить его на вкладку на своей странице Facebook.

Если вам также нужен какой-то способ глубокой ссылки на видео, доступное для общего доступа, вы можете использовать параметр URL "app_data", который передается в iFrame вашего приложения.

...