jQuery плагин Social-feed

Social-feed

В настоящее время практически на каждом сайте есть социальный блок, где отображаются последние посты из twitter, последние фото из instagram или обновления из facebook. Зачастую эти социальные блоки работают на основе iframe, что не позволяет гармонично интегрировать обновления из социальных сетей с основным контентом сайта. В случае, если необходимо отображать обновления только из facebook или только из instagram, то существуют jQuery плагины с редактируемым внешним видом (этот, или этот). Если вам необходимо отображать обновления сразу из нескольких социальных сетей, то на помощь приходит Social-feed.

Онлайн демо работы плагина http://pavelk2.github.io/social-feed/.

Social-feed это полностью front-end плагин, который отображает последние сообщения из социальных сетей по заданному хеш-тэгу или пользователю. Социальные сети, которые поддерживает плагин:

• Facebook,
• Instagram,
• Twitter,
• Google+,
• Вконтакте.

Установка

через bower.io:

bower install social-feed

или скачать последний релиз:
https://github.com/pavelk2/social-feed/releases.

Подключение плагина

Сперва подключаем стили:

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

Создаем контейнер, в котором будут размещаться сообщения:

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

Инициализируем плагин:

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

Внешний вид

В случае, если вы хотите отредактировать отображение сообщений, то вы можете отредактировать template.html файл вместе со стилями css/jquery.socialfeed.css.
Так же вы можете задать html-шаблон, добавив строковый параметр template_html при инициализации плагина.

Зависимости

• fontawesome.io — для отображения иконок социальных сетей,
• momentjs.com — для отображения времени публикации поста,
• olado.github.io/doT — для рендринга html-темплейтов,
• github.com/jublonet/codebird-js — для отправки запросов в Twitter API.

Лицензия

MIT

Исходный код

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

Предыдущая версия этого плагина описывалась в этой статье.