让Facebook数据无法正常工作

时间:2014-07-28 13:46:41

标签: javascript jquery json

我有点陷入困境,为什么我的数据没有回来并通过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&amp;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 -->

0 个答案:

没有答案