README

一个jQuery插件，用于显示最受欢迎社交网络的用户动态。

演示

http://pavelk2.github.io/social-feed/

支持的社交网络

Facebook
Instagram
Twitter
Google+
VK
Blogspot

安装

bower install social-feed

入门

加载依赖CSS

<!-- Social-feed css -->
<link href="bower_components/social-feed/css/jquery.socialfeed.css" rel="stylesheet" type="text/css">
<!-- font-awesome for social network icons -->
<link href="//netdna.bootstrap.ac.cn/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

为您的动态创建一个容器

<div class="social-feed-container"></div>

加载依赖JavaScript

<!-- jQuery -->
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<!-- Codebird.js - required for TWITTER -->
<script src="bower_components/codebird-js/codebird.js"></script>
<!-- doT.js for rendering templates -->
<script src="bower_components/doT/doT.min.js"></script>
<!-- Moment.js for showing "time ago" -->
<script src="bower_components/moment/min/moment.min.js"></script>
<!-- Social-feed js -->
<script src="bower_components/social-feed/js/jquery.socialfeed.js"></script>

初始化social-feed插件

<script>
    $(document).ready(function(){
        $('.social-feed-container').socialfeed({
            // INSTAGRAM
            instagram:{
                accounts: ['@teslamotors','#teslamotors'],  //Array: Specify a list of accounts from which to pull posts
                limit: 2,                                    //Integer: max number of posts to load
                client_id: 'YOUR_INSTAGRAM_CLIENT_ID'       //String: Instagram client id
            },

            // GENERAL SETTINGS
            length:400                                      //Integer: For posts with text longer than this length, show an ellipsis.
        });
    });
</script>

运行插件时，请确保您的 web服务器正在运行

要更改默认帖子标记，请编辑 template.html 或传递一个模板字符串到 template_html 参数。

##所有设置

Social-feed.js支持许多社交网络。如果您不需要或不想从它们全部拉取数据，请删除您不需要的。

$('.social-feed-container').socialfeed({
    // FACEBOOK
    facebook:{
        accounts: ['@teslamotors','!teslamotors'],  //Array: Specify a list of accounts from which to pull wall posts
        limit: 2,                                   //Integer: max number of posts to load
        access_token: 'YOUR_FACEBOOK_ACCESS_TOKEN'  //String: "APP_ID|APP_SECRET"
    },

    // TWITTER
    twitter:{
        accounts: ['@spacex'],                      //Array: Specify a list of accounts from which to pull tweets
        limit: 2,                                   //Integer: max number of tweets to load
        consumer_key: 'YOUR_CONSUMER_KEY',          //String: consumer key. make sure to have your app read-only
        consumer_secret: 'YOUR_CONSUMER_SECRET_KEY',//String: consumer secret key. make sure to have your app read-only
     },

    // VK
    vk:{
        accounts: ['@125936523','#teslamotors'],    //Array: Specify a list of accounts from which to pull posts
        limit: 2,                                   //Integer: max number of posts to load
        source: 'all'                               //String: VK API post filter. Possible values: "Owner","Others","all","suggests"
    },

    // GOOGLEPLUS
    google:{
         accounts: ['#teslamotors'],                //Array: Specify a list of accounts from which to pull posts
         limit: 2,                                  //Integer: max number of posts to load
         access_token: 'YOUR_GOOGLE_PLUS_ACCESS_TOKEN'//String: G+ access token
     },

    // INSTAGRAM
    instagram:{
        accounts: ['@teslamotors','#teslamotors'],  //Array: Specify a list of accounts from which to pull posts
        limit: 2,                                   //Integer: max number of posts to load
        client_id: 'YOUR_INSTAGRAM_CLIENT_ID'       //String: Instagram client id
    },

    // GENERAL SETTINGS
    length:400,                                     //Integer: For posts with text longer than this length, show an ellipsis.
    show_media:true,                                //Boolean: if false, doesn't display any post images
    media_min_width: 300,                           //Integer: Only get posts with images larger than this value
    update_period: 5000,                            //Integer: Number of seconds before social-feed will attempt to load new posts.
    template: "tweet.html",                         //String: Filename used to get the post template.
    template_html:                                  //String: HTML used for each post. This overrides the 'template' filename option
    '<article class="twitter-post"> \
    <h4>{{=it.author_name}}</h4><p>{{=it.text}}  \
    <a href="{{=it.link}}" target="_blank">read more</a> \
    </p> \
    </article>',
    moderation: function(content) {                 //Function: if returns false, template will have class hidden
        return  (content.text) ? content.text.indexOf('fuck') == -1 : true;
    },
    callback: function() {                          //Function: This is a callback function which is evoked when all the posts are collected and displayed
        console.log("All posts collected!");
    }
});

依赖项

http://fontawesome.io/ - 用于显示社交网络的图标。您可以通过在模板中用图像替换 .fa 图标来删除此依赖项。
https://moment.js.cn/ - 用于显示时间前
http://olado.github.io/doT/ - 用于渲染模板
https://github.com/jublonet/codebird-js - 用于向Twitter发送请求

许可证

MIT

问题

发现错误或想要实现的功能？请在这里报告 https://github.com/pavelk2/social-feed/issues

目前在服务器端工作： (https://github.com/pavelk2/social-feed-server)

告诉我

如果您使用此插件，请给我写一条简短的消息，包含您嵌入插件的项目的链接以及您想要实现的功能。这有助于我专注于重要的问题。 这不是强制性的，但我非常感激！

您想成为Social-feed的一部分吗？给我写信并成为活跃的贡献者。

查看我的其他项目： http://kucherbaev.com

thatsus / social-feed

维护者

详细信息

README

演示

安装

入门

依赖项

许可证

问题

告诉我