jQuery plugin Social-feed

Social-feed

Currently, almost every site has a social block, where the latest posts from twitter , the latest photos from instagram or updates from facebook are displayed. Often, these social blocks work on the basis of iframe , which does not allow harmoniously integrating updates from social networks with the main content of the site. In case it is necessary to display updates only from facebook or only from instagram , then there are jQuery plugins with an editable appearance ( this one or this one ). If you need to display updates from several social networks at once, then Social-feed comes to the rescue.
')

Online demo of the plugin http://pavelk2.imtqy.com/social-feed/ .

Social-feed is a fully front-end plugin that displays the latest posts from social networks for a given hash tag or user. Social networks that plugin supports:

• Facebook ,
• Instagram ,
• Twitter ,
• Google +
• In contact with.

Installation

via bower.io :

bower install social-feed 

or download the latest release:
https://github.com/pavelk2/social-feed/releases .

Plug-in connection

First connect the styles:

 <!-- Social-feed css --> <link href="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 in which messages will be placed:

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

We connect the necessary javascript libraries:

 <!-- 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 and moment.js for showing time ago --> <script src="bower_components/doT/doT.min.js"></script> <script src="bower_components/moment/min/moment.min.js"></script> <!-- Social-feed js --> <script src="js/jquery.socialfeed.js"></script> 

Initialize the 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' }, // 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> 

Appearance

In case you want to edit the display of messages, then you can edit the template.html file along with the css / jquery.socialfeed.css styles .
You can also set the html template by adding the string parameter template_html when initializing the plugin.

Dependencies

• fontawesome.io - to display social networking icons,
• momentjs.com - to display the post publication time,
• olado.imtqy.com/doT - for the rendering of html templates,
• github.com/jublonet/codebird-js - to send requests to the Twitter API .

License

MIT

Source

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

The previous version of this plugin was described in this article .