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/.
Предыдущая версия этого плагина описывалась в этой статье.
