Question

I have a project for a client that will be using a YouTube comment stream as a type of “chat.” I am making an authenticated call to YouTube using the GData APIs with the Zend Framework. I am looking for a way to run the script that will pull the comment stream with a refresh button so that the users don’t have to refresh the page to see their comment, or any new comments that appear. I believe this can be accomplished with JQuery, but after a bt of searching I haven’t really found a good explanation as to how. Here are a few brief snippits of my code to give you some idea of what I am looking at:

$yt = new Zend_Gdata_YouTube($httpClient, $applicationId, $clientId, $developerKey);
$_SESSION['yt'] = serialize($yt);

/***************** Adds a comment if applicable *****************/

if(isset($_POST['btn_submit']))
{
$videoEntry = $yt->getVideoEntry('QQoFLrZ5C3M');

$newComment = $yt->newCommentEntry();
$newComment->content = $yt->newContent()->setText($_POST['comment']);

// post the comment to the comments feed URL for the video
$commentFeedPostUrl = $videoEntry->getVideoCommentFeedUrl();
$updatedVideoEntry = $yt->insertEntry($newComment, $commentFeedPostUrl,
'Zend_Gdata_YouTube_CommentEntry');
}

                        /****************************************************************/


<div id="coments">

$commentFeed = $yt->getVideoCommentFeed('QQoFLrZ5C3M');

echo '<div id="refresh"><a href="#" style="margin-right: 15px; border: 0;"><img src="../common/img/refresh.png" alt="refresh" border="0" /></a></div>';

foreach ($commentFeed as $commentEntry) {
echo '<div class="comment">';
echo  '<a href="http://youtube.com/user/' . utf8_decode(utf8_encode($commentEntry->author[0]->name->text)) . '" target="_blank" class="youtube_user">' . utf8_decode(utf8_encode($commentEntry->author[0]->name->text)) . '</a><br />';

echo  '<span style="font-size: 14px;">' . utf8_decode(utf8_encode($commentEntry->content->text)) . '</span><br />';

// Format time
$timeAgoObject = new convertToAgo;
$ts = strtotime($commentEntry->updated->text);
$timestamp = ($timeAgoObject -> makeAgo($ts)); // Then convert to ago time

echo  '<div class="yt_timestamp">' . $timestamp  . '</div>';
echo '</div>';
}
?>
</div>

Note that the youtube class is not always new (hence the serialization into a session variable) I just stripped out the if statement for easy reading.

Answer 1

I created an example for you to use. It utilizes the Youtube JSON API somewhat detailed here: http://code.google.com/apis/youtube/2.0/reference.html#Comments_Feeds

Insead of XML I am using JSON.

To get the ‘data’ of your video with JSON, use http://gdata.youtube.com/feeds/api/videos/YOURVIDEOID/comments

Example:
http://jsfiddle.net/A32H2/2/

//"The Dark Knight Rises trailer, sweded" comments
//http://www.youtube.com/watch?v=KrmEyPkgDf8

    <div id="comments"></div>

    $.ajax({
        url: "http://gdata.youtube.com/feeds/api/videos/KrmEyPkgDf8/comments?v=2&alt=json&max-results=50",  
        //gets the max first 50 results.  To get the 'next' 50, use &start-index=50
        dataType: "jsonp",
        success: function(data){
            $.each(data.feed.entry, function(key, val) {

                comment = $("<div class='comment'></div>");

                author = $("<a target='_blank' class='youtube_user'></a>");
                author.attr("href", "http://youtube.com/user/" + val.author[0].name.$t);
                author.html(val.author[0].name.$t);

                content = $("<div style='font-size: 14px;' class='content'></div>");
                content.html(val.content.$t);

                comment.append(author).append(content);
                $('#comments').append(comment);
            });
        }
    });

Also I would recommend changing the title of your question to something more descriptive, such as “Get Youtube comments with jQuery”