Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/pavelk2/social-feed
JavaScript plugin that shows a user feed from the most popular social networks
https://github.com/pavelk2/social-feed
Last synced: 13 days ago
JSON representation
JavaScript plugin that shows a user feed from the most popular social networks
- Host: GitHub
- URL: https://github.com/pavelk2/social-feed
- Owner: pavelk2
- License: mit
- Created: 2013-03-11T12:37:53.000Z (over 11 years ago)
- Default Branch: gh-pages
- Last Pushed: 2018-05-09T17:53:26.000Z (over 6 years ago)
- Last Synced: 2024-10-27T19:53:10.391Z (20 days ago)
- Language: JavaScript
- Homepage: http://pavelk2.github.io/social-feed-example/
- Size: 934 KB
- Stars: 961
- Watchers: 79
- Forks: 303
- Open Issues: 155
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Social-feed
The jQuery plugin which shows user feeds from the most popular social networks.
## Demo
http://pavelk2.github.io/social-feed-example/
Social networks supported:
- [x] Facebook
- [x] Instagram
- [x] Twitter
- [x] Google+
- [x] VK
- [x] Pinterest
- [x] RSS
- [ ] Blogspot
## Installation
via http://bower.io:
```
bower install social-feed
```
or download the latest release:
https://github.com/pavelk2/social-feed/releases
## Getting started
Load dependency CSS:
```html
```
Create a container for your feed:
```html
```
Load dependency javascript
```html
```
Initialize the social-feed plugin:
```html
$(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 (optional if using access token)
access_token: 'YOUR_INSTAGRAM_ACCESS_TOKEN' //String: Instagram access token
},
// GENERAL SETTINGS
length:400 //Integer: For posts with text longer than this length, show an ellipsis.
});
});
```
When you run the plugin, make sure that you have your **webserver running**
To alter the default post markup, edit ````template.html```` or pass a template string into the ````template_html```` parameter.
##All Settings
Social-feed.js supports many social networks. If you don't need or want to pull data from them all, remove the ones you don't need.
````javascript
$('.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
tweet_mode: 'compatibility' //String: change to "extended" to show the whole tweet
},
// 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 (option if using access token)
access_token: 'YOUR_INSTAGRAM_ACCESS_TOKEN' //String: Instagram access token
},
// PINTEREST
pinterest:{
accounts: ['@teslamotors/model-s','@me'], //Array: Specify a list of accounts from which to pull posts
//@me to pull your pins
//@user/board to pull pins from a user board
limit: 2, //Integer: max number of posts to load
access_token: 'YOUR_PINTEREST_ACCESS_TOKEN' //String: Pinterest client id
},
// RSS
rss:{
urls: ['http://teslapodcast.libsyn.com/rss'], //Array: Specifiy a list of rss feed from which to pull posts
limit: 2 //Integer: max number of posts to load for each url
}
// 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: "bower_components/social-feed/template.html", //String: Filename used to get the post template.
template_html: //String: HTML used for each post. This overrides the 'template' filename option
' \
{{=it.author_name}}
{{=it.text}} \
read more \
\
',
date_format: "ll", //String: Display format of the date attribute (see http://momentjs.com/docs/#/displaying/format/)
date_locale: "en", //String: The locale of the date (see: http://momentjs.com/docs/#/i18n/changing-locale/)
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!");
}
});
````
## Dependencies
* http://fontawesome.io/ - for displaying icons of social networks. You can remove this dependency by editing replacing .fa icons with images in the template.
* http://momentjs.com/ - for displaying time ago
* http://olado.github.io/doT/ - for rendering templates
* https://github.com/jublonet/codebird-js - for sending requests to Twitter
### Ordering / sorting
Please note, when using a custom template, that the ordering mechanism depends on the `dt-create` attribute.
## License
[MIT](http://mit-license.org/)
## Issues
Found a bug or want a feature to be implemented?
Please report it here https://github.com/pavelk2/social-feed/issues
Currently we work on server side: (https://github.com/pavelk2/social-feed-server)
## Let us know
If you use this plugin, please write us 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 us to stay focused on the important issues. *It is not mandatory, but we really appreciate it!*
Do you want to become a part of the Social-feed? Write us and become an active contributor.
[](https://gitter.im/pavelk2/social-feed?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)