Skip to content

A jQuery plugin that shows a user feed from the most popular social networks

License

Notifications You must be signed in to change notification settings

rasmuseeg/social-feed

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Social-feed

The jQuery plugin which shows user feeds from the most popular social networks.

Demo

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

Social networks supported:

  • Facebook
  • Instagram
  • Twitter
  • Google+
  • VK
  • Blogspot

Installation

via http://bower.io:

bower install social-feed

or download the latest release:

https://github.com/pavelk2/social-feed/releases

Getting started

Connect 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.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

Create a container for your feed:

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

Connect js:

<!-- 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>

Initialize the social-feed plugin:

<script>
    $(document).ready(function(){
        $('.social-feed-container').socialfeed({
                    // FACEBOOK
                    facebook:{
                        accounts: ['@teslamotors','!teslamotors'],
                        limit: 2,
                        access_token: 'YOUR_FACEBOOK_ACCESS_TOKEN' // APP_ID|APP_SECRET
                    },
                    // TWITTER
                    twitter:{
                        accounts: ['@spacex'],
                        limit: 2,
                        consumer_key: 'YOUR_CONSUMER_KEY', // make sure to have your app read-only
                        consumer_secret: 'YOUR_CONSUMER_SECRET_KEY', // make sure to have your app read-only
                     },
                    // VK
                    vk:{
                        accounts: ['@125936523','#teslamotors'], 
                        limit: 2,
                        source: 'all'
                    },
                    // GOOGLEPLUS
                    google:{
                         accounts: ['#teslamotors'],
                         limit: 2,
                         access_token: 'YOUR_GOOGLE_PLUS_ACCESS_TOKEN'
                     },
                    // INSTAGRAM
                    instagram:{
                        accounts: ['@teslamotors','#teslamotors'],
                        limit:2,
                        client_id: 'YOUR_INSTAGRAM_CLIENT_ID'
                    },
                    // BLOGSPOT
                    /*blogspot:{
                        accounts:['@iman-khaghanifar']
                    },*/
                    // GENERAL SETTINGS
                    length:400,
                    show_media:true,
                    // Moderation function - if returns false, template will have class hidden
                    moderation: function(content){
                        return  (content.text) ? content.text.indexOf('fuck') == -1 : true;
                    },
                    //update_period: 5000,
                    // When all the posts are collected and displayed - this function is evoked
                    callback: function(){
                        console.log('all posts are collected');
                    }
                });
        });
</script>

When you run the plugin, make sure that you have your webserver running

If you want to change the layout of the feed, you can do it in the template.html file.

Also you can simply create template as a string and pass it as template_html parameter. If you don't need to show the feed from all the supported social networks, put the credentials only for those you need.

Dependencies

License

MIT

Issues

Found a bug or want a feature to be implemented? Please report it here https://github.com/pavelk2/social-feed/issues

Currently working on the server side: (https://github.com/pavelk2/social-feed-server)

Let me know

If you use this plugin, please write me a short message with a link to the project where you embed the plugin, and some features you want to have implemented here. It helps me to stay focused on the important issues. It is not mandatory, but I really appreciate it!

Do you want to become a part of the Social-feed? Write me and become an active contributor.

Check out my other projects: http://kucherbaev.com

About

A jQuery plugin that shows a user feed from the most popular social networks

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 69.4%
  • CSS 17.1%
  • HTML 13.5%