我有点陷入困境,为什么我的数据没有回来并通过JSON传递给HTML,一定会错过一些东西并想知道是否有人可以帮我修复facebook部分,无法测试twitter还需要设置在具有OAuth .NET的环境中,但如果我可以让facebook工作起来是一个良好的开端:代码是:
请原谅,如果它是混乱的,我不是最好的JS,也是我第一次做基于插件的事情。
JSFIDDLE就在这里:http://jsfiddle.net/52sL4/5/
social.js
(function ($) {
'use strict';
$.fn.officeFacebook = function () {
var options = (arguments[0] instanceof Object) ? arguments[0] : {},
callback = (typeof arguments[0] === 'function') ? arguments[0] : arguments[1];
// Default settings
var settings = $.extend({
'username': null,
'count': 10,
'template': '{{message}} {{url}}',
'apiPath': 'https://graph.facebook.com/v2.0/'
}, options);
/**
* Templating a feed using '{{ }}' braces
* @param {Object} data feed details are passed
* @return {String} Templated string
*/
var templating = function (data) {
var temp = settings.template;
var temp_variables = ['date', 'tweet', 'avatar', 'url', 'retweeted', 'screen_name', 'user_name'];
for (var i = 0, len = temp_variables.length; i < len; i++) {
temp = temp.replace(new RegExp('{{' + temp_variables[i] + '}}', 'gi'), data[temp_variables[i]]);
}
return temp;
};
// Fetch tweets
$.getJSON(settings.apiPath '/' + settings.username + '/feed/', function (fed) {
that.find('span').fadeOut('fast', function () {
that.html('<ul></ul>');
for (var i = 0; i < settings.count; i++) {
var feed = false;
if(fed[i]) {
feed = fed[i];
} else if(fed.statuses !== undefined && fed.statuses[i]) {
feed = fed.statuses[i];
} else {
break;
}
var temp_data = {
message = fed["message"],
url = fed["link"]
};
that.find('ul').append('<li>' + templating(temp_data) + '</li>');
}
if (typeof callback === 'function') { callback(); }
});
});
}
$.fn.officeTweet = function () {
var options = (arguments[0] instanceof Object) ? arguments[0] : {},
callback = (typeof arguments[0] === 'function') ? arguments[0] : arguments[1];
// Default settings
var settings = $.extend({
'username': null,
'list': null,
'hashtag': null,
'count': 10,
'hideReplies': false,
'dateFormat': '%b/%d/%Y',
'template': '{{date}} - {{tweet}}',
'apiPath' : 'api/twitter.aspx'
}, options);
if (settings.list && !settings.username) {
$.error('If you want to fetch tweets from a list, you must define the username of the list owner.');
}
/**
* Applies @reply, #hash and http links
* @param {String} tweet A single tweet
* @return {String} Fixed tweet
*
* Thanks to @Wachem enhanced linking.
*/
var linking = function (tweet) {
var twit = tweet.replace(/(https?:\/\/([-\w\.]+)+(:\d+)?(\/([\w\/_\.]*(\?\S+)?)?)?)/ig,'<a href="$1" target="_blank" title="Visit this link">$1</a>')
.replace(/#([a-zA-Z0-9_]+)/g,'<a href="http://twitter.com/search?q=%23$1&src=hash" target="_blank" title="Search for #$1">#$1</a>')
.replace(/@([a-zA-Z0-9_]+)/g,'<a href="http://twitter.com/$1" target="_blank" title="$1 on Twitter">@$1</a>');
return twit;
};
/**
* Formating a date
* @param {String} twt_date Twitter date
* @return {String} Formatted date
*/
var dating = function (twt_date) {
// fix for IE
var time = twt_date.split(' ');
twt_date = new Date(Date.parse(time[1] + ' ' + time[2] + ', ' + time[5] + ' ' + time[3] + ' UTC'));
var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
var _date = {
'%d': twt_date.getDate(),
'%m': twt_date.getMonth()+1,
'%b': months[twt_date.getMonth()].substr(0, 3),
'%B': months[twt_date.getMonth()],
'%y': String(twt_date.getFullYear()).slice(-2),
'%Y': twt_date.getFullYear()
};
var date = settings.dateFormat;
var format = settings.dateFormat.match(/%[dmbByY]/g);
for (var i = 0, len = format.length; i < len; i++) {
date = date.replace(format[i], _date[format[i]]);
}
return date;
};
/**
* Templating a tweet using '{{ }}' braces
* @param {Object} data Tweet details are passed
* @return {String} Templated string
*/
var templating = function (data) {
var temp = settings.template;
var temp_variables = ['date', 'tweet', 'avatar', 'url', 'retweeted', 'screen_name', 'user_name'];
for (var i = 0, len = temp_variables.length; i < len; i++) {
temp = temp.replace(new RegExp('{{' + temp_variables[i] + '}}', 'gi'), data[temp_variables[i]]);
}
return temp;
};
// Set loading
this.html('<span>Loading...</span>');
var that = this;
// Fetch tweets
$.getJSON(settings.apiPath, { username: settings.username, list: settings.list, hashtag: settings.hashtag, count: settings.count, exclude_replies: settings.hideReplies }, function (twt) {
that.find('span').fadeOut('fast', function () {
that.html('<ul></ul>');
for (var i = 0; i < settings.count; i++) {
var tweet = false;
if(twt[i]) {
tweet = twt[i];
} else if(twt.statuses !== undefined && twt.statuses[i]) {
tweet = twt.statuses[i];
} else {
break;
}
var temp_data = {
user_name: tweet.user.name,
date: dating(tweet.created_at),
tweet: (tweet.retweeted) ? linking('RT @'+ tweet.user.screen_name +': '+ tweet.retweeted_status.text) : linking(tweet.text),
avatar: '<img src="'+ tweet.user.profile_image_url +'" />',
url: 'http://twitter.com/' + tweet.user.screen_name + '/status/' + tweet.id_str,
retweeted: tweet.retweeted,
screen_name: linking('@'+ tweet.user.screen_name)
};
that.find('ul').append('<li>' + templating(temp_data) + '</li>');
}
if (typeof callback === 'function') { callback(); }
});
});
};
})(jQuery);
HTML
<script src="socialOffice.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
// grab the twitter data and apply to widget
$('#tweetFeed').officeTweet({
username: 'google',
template: '{{tweet}}<p><a href="{{url}}" class="social-read-more">Read more</a></p>',
apiPath: 'path/api/twitter.aspx' // Must set the Consumer and oAuth Keys
count: 5,
hideReplies: true
});
$('#facebookFeed').officeFacebook({
username: 'google',
template: '{{message}}<p><a href="{{url}}" class="social-read-more">Read more</a></p>',
count: 5
});
});
</script>
<!-- START: NEW TWITTER WIDGET -->
<span class="entry-wrapper" data-id="34">
<span class="sf-thirdparty">
<div id="tweetFeed"></div>
</span>
</span>
<!-- END: NEW TWITTER WIDGET -->
<!-- START: NEW FACEBOOK WIDGET -->
<span class="entry-wrapper" data-id="33">
<span class="sf-thirdparty">
<div id="facebookFeed"></div>
</span>
</span>
<!-- END: NEW FACEBOOK WIDGET -->