jquery plugin for displaying Facebook Comments with Graph API
I am building a snippet to get the Facebook comments with graph API & display them in my div.
Right now, I am passing the comments count as a parameter to function. I want to make this a plug开发者_如何学编程in where I can define like count: 5.
Please provide me some inputs.
<html>
<head><title>facebook comments</title>
<script type="text/javascript">
$(document).ready(function () {
//FBComments Initialize - Pass Comments Count as Parameter
fbComments.init('6');
});
</script>
</head>
<body>
<!-- Begin Main Wrapper -->
<div class="fbCommentsBlock">
<!-- Begin Question Wrapper -->
<div class="questionPoll">
<span>Q: Which do your kids prefer?</span>
</div>
<!-- End Question Wrapper -->
<!-- Begin Comments Listing -->
<ul class="fbComments"></ul>
<!-- End Comments Listing -->
<!-- Begin See More Comments Link -->
<div class="seeMoreLinkFB">
<a class="seemore bulletLinks" href="#">see more</a>
</div>
<!-- End See More Comments Link -->
<!-- Begin Comment on Facebook Link -->
<div class="commentsLinkFB">
<a class="bulletLinks" href="" target="_blank">comment on facebook</a>
</div>
<!-- End Comment on Facebook Link -->
</div>
<!-- End Main Wrapper -->
</body>
</html>
Javascript function:
//FB Comments with Graph API
fbComments = {
init: function(count) {
var fbURL = 'https://www.facebook.com/lokeshyadav/';
var questionID = 981234987242398;
var seeMoreURL = ''+ fbURL + questionID +'';
$('.commentsLinkFB a').attr({href:seeMoreURL, target:'_blank'});
var fbCommentsURL = 'https://graph.facebook.com/'+ questionID +'/comments?limit=0';
$.ajax({
url: fbCommentsURL,
dataType: 'jsonp',
success: function (obj) {
for(var i = obj.data.length-1; i >= obj.data.length-count; i--) {
var userFullName = obj.data[i].from.name.split(' ');
var userName = userFullName[0];
if(userFullName.length > 1)
{
userName += ' ' + userFullName[userFullName.length -1]
}
var fbComments = '<li><img src="https://graph.facebook.com/'+ obj.data[i].from.id +'/picture" alt="" class="fb_profilePic"/><p class="commentText"><span class="fbUserName">'+ userName +' says:</span><span class="fbCommentText multiline">"'+ obj.data[i].message +'"</span></p></li>';
$('.fbComments').append(fbComments);
$('.fbComments').css('background','none');
}
for (var i = obj.data.length-1; i >=0; i--) {
var fbAllComments = '<li><img src="https://graph.facebook.com/'+ obj.data[i].from.id +'/picture" alt="" class="fbpic"/><p class="fbCommentText"> <span class="fbUserName">'+ obj.data[i].from.name +' says:</span><span>"'+ obj.data[i].message +'"</span></p></li>';
$('.fbCommentsMod').append(fbAllComments);
$('.fbCommentsMod').css('background','none');
}
},
error: function () {
$('.fbComments').css('background','none');
}
});
}
}
How can I convert this into a plugin where I can call the function by providing the setting parameters like below:
fbComments({
count:5,
seemorelink: no,
facebookComment: yes
});
Have a look at http://jqueryboilerplate.com - It gives you a good template to start off. Further it already provides solutions for handling default values and passing options.
加载中,请稍侯......
精彩评论