Social-feed — социальный плагин jQuery


    Потребность

    При разработке веб-приложений очень часто возникает необходимость отображения постов пользователя или сообщества из социальных сетей. У социальных сетей есть свои виджеты, которые подключаются через iframe, со своим внешним видом и стилем. Что если нам нужно отображать посты одновременно из нескольких социальных сетей с возможнстью изменения дизайна отображения? Если это пара twitter и facebook, то существует несколько плагинов, выполняющих эту задачу. Принимая во внимание, что популярность социальной сети Вконтакте на территории СНГ очень высока, то есть необходимость плагина поддерживающего и эту сеть.

    Social-feed

    jQuery плагин Social-feed позволяет отображать одновременно посты из социальных сетей facebook, twitter и vk. Отображение происходит со сквозной сортировкой по дате.

    Online демо работы плагина


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

    Сперва подключаем стили и javascript:
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script src="js/function.js"></script>
    

    Если требуется кэширование постов в cookies, необходимо подлючить следующее:
        <script src="js/json2.js"></script>
        <script src="js/jquery.cookie.js"></script>
    

    Далее создаем контейнер для постов:
       <div class="social-feed-container"></div>
    

    Инициализируем плагин social-feed:
       $('.social-feed-container').socialfeed({
                fb_username:'barack.obama',
                fb_limit:2,
                vk_username:1,
                vk_limit:2,
                vk_source:'all',
                tw_limit:2,
                tw_username:'jack',
                length:130,
                cookies:true,
                show_media:true
            });
    

    • fb_username, tw_username, vk_username — имена пользователей в соответствующих соц сетях (для vkid пользователя);
    • fb_limit, tw_limit, vk_limit — ограничение по количеству отображаемых постов из соответствующих соц сетей;
    • length — ограничение длины поста. При превышении этого значения поста будет обрезаться;
    • cookies — кэширование постов в cookies (в текущей версии поддерживается только для twitter при количестве твитов менее 10).

    Детали

    Стили для этого плагина взяты из twitter bootstrap, действие их распространяется только на содержание контейнера для постов.
    У twitter есть ограничение в 150 запросов в час, которое в этом плагине решается кэшированием результатов в cookies (установите для этого cookies:true).
    Для того, чтобы через opengraph получить доступ к даже публичной timeline пользователя facebook, необходимо получить access-token. Для этого регистрируем facebook приложение и в файле php/settings.php указываем app_id и app_secret.
    В плагине отображаются посты только из тех социальных сетей, к которым при инициализации указаны соответствующие имена пользователей (для vkid), например, если необходимо показывать только посты из facebook и vk — указываем username только для них.
    Изменить внешний вид отображаемых постов можно в шаблоне php/template.php

    Исходный код

    Github: https://github.com/pavelk2/social-feed
    Demo: http://pavelk2.github.io/social-feed/

    Буду очень рад получить обратную связь по плагину данному плагину. В будущем предполагается поддержка других социальных сетей.

    UPDATE: плагин постоянно развивается, следите за обновлениями на GitHub.
    UPDATE: добавил поддержку превью контента:

    image
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 39

      +1
      Классный плагин. Какие соцсети будете добавлять в ближайшем будущем?
        +1
        Спасибо, что оценили! В будущем в первую очередь предстоит работа над элегантностью кода. По социальным сетям предполагаю добавить google+, возможно instagram, и далее в зависимости от пожеланий будущих пользователей.
          +1
          Foursquare, хорошо было бы!

          А есть ли возможность по хештегу выводить сообщения?
            0
            В данный момент возможности выводить сообщения по хештегу нет и полагаю, так как они распространены только в twitter, то это довольно специфический (так как акцент сделан на возможность подключения нескольких соц сетей) функционал, который может быть позже.
              0
              «Только в twitter» это весьма не мало. Кроме того хештеги это своего рода kill-feature. Опять же емнип хештеги в некотором виде поддерживаются во вконтакте, и будет вводиться фейсбуком в обновлении.
                0
                Я с вами согласен, идея в том, что если требуется подключить только twitter, то для этого существуют плагины, работающие по хештег. Поэтому для плагина social-feed, это не первая задача в очереди, но она там есть.
                  +1
                  Хорошо, я понял. Спасибо за вашу работу!
                +1
                Я заметил, что в последнее время очень многие начали использоваться хештеги и в google+
              0
              Присоединяюсь к просьбе добавить google+
                0
                Не знаю было ли предложения в комментарях… Но не думали добавить еще youtube и rss? Правда это не совсем соцсеты, а рсс вообще не соцсети, но все же…
                Так же было неплохо, если имелась возможность удалять дубликаты, которые повторяются с разных источников.
                В ближайшее время буду использовать Ваш плагин на практике. Спасибо за работу. Ждем новых версий.
              +2
              Это прекрасно! Сколько раз я раздумывал о написании этого плагина)) Продолжайте в том же духе!
                0
                Спасибо большое за поддержку!
                +1
                А нельзя ли обойтись совсем без php и при этом без фб? Не пинайте сильно, я пока еще только учу js.
                  0
                  Хорошее замечание. В начале так и предполагалось, что не будет никакого php, но сначала все испортил facebook, а потом я еще решил вынести шаблон представления поста в отдельный файл. В ближайшее время постараюсь сделать шаблон обычным html. Что касается получения токена в facebook, то этот функционал я предполагаю еще дублировать на python и ruby. Добавляйте social-feed на github в избранное и следите за обновлениями :)
                    0
                    Я думаю автор вопроса имел ввиду, что была бы крутая возможность сделать такой виджет полностью клиентским, без серверной части вообще
                      0
                      Это я понял. Если не использовать facebook, то плагин станет клиентским как только я переделаю template.php в html. А для того, чтобы работал еще и facebook, то придется или передавать логин-пароль в открытом виде в $.ajax, или придумать что-то новенькое.
                      0
                      Ну, вообще, фейсбуковский app access token можно получить заранее и прописать руками в JS. Теоретически, он не меняется, если не делать резет секрета приложения

                      https://developers.facebook.com/docs/opengraph/howtos/publishing-with-app-token/

                      Так что, можно обойтись и без серверной части.
                    0
                    Не плохо было бы сделать возможность ввода нескольких пользователей каждой соц. сети.
                      0
                      Хорошее замечание. Это моя задача на ближайшее время.
                      0
                      в течении нескольких месяцев twitter отвалится. Через api можно будет делать запросы только по токенам с авторизацией. Т.е. или вы юзаете стандартный плагин на iframe или делаете всё на сервере и отдаёте юзерам результат запроса к твиттеру или светите на клиенте свой secret key.
                        0
                        значит я сделаю такую же систему, которая сейчас работает для facebook.
                          0
                          facebook для доступа достаточно только public key, новому api твиттера нужен будет и секретный ключ на основании которого он получит токен с которым будет делать запросы к сайту. Как из js получить фид я после прочтения документации не понял, похоже что этого никак не сделать. Сами новые виджеты принимают уже почти что готовый html, что как бы немного подтверждает отсутствие возможности запроса к сервису через js.
                          У нас на серваке для решения проблем с твиттером был запущен отдельный сервис который через twitter4j делал авторизованные запросы и кешировал твиты, т.к. лимит вырабатывался за минут 10-15 (офис большой, все за nat). Из-за нового api я вообще перестал обращаться к твиттеру через js и твиты получал только через этот сервис. старое api должны отрубить в ближайшие месяцы.
                          Вообще удивляет жлобстово твиттера, ведь из-за этих лимитов не работали даже их стандартные виджеты!
                            0
                            Согласен, вообще странно, что публичные посты можно смотреть только через авторизацию. В текущей версии посты с twitter кэшируются в cookies, но пока это работает только до 10 постов.
                        0
                        Идея замечательная, но откуда он отображает посты? Только с личной стены? А если нужно отображать, например, из конкретной группы, владельцем которой ты являешься?
                          0
                          если вы говорите о ВК, то в vk_username вы можете написать id группы и он будет показывать посты из группы. Я поменял Медведева на Хабру — посмотрите в этом примере http://gitbox.ru/Social-feed/

                           $('.social-feed-container').socialfeed({
                                          fb_username:'barack.obama',
                                          fb_limit:2,
                                          vk_username:'-20629724',
                                          vk_limit:2,
                                          tw_limit:2,
                                          tw_username:'jack',
                                          length:130,
                                          cookies:true
                                      });
                          
                            +1
                            Ага, отлично тогда. Но это не все :-)

                            Сообщения с любой стены — это хорошо. А что насчет ответов к этим сообщениям и обсуждений в группах (которые не на стене, а именно обсуждения)?
                              0
                              Но-но-но! Не все подарки в один праздник ) Пока ответы на сообщения не планируется выводить. Думаю что примерно через 1-2 месяца смогу перейти к этим задачам.
                                0
                                Ну, главное, чтобы вы это планировали реализовать :-)

                                А то как-то сами сообщения без ответов — это несколько тоскливо. Я, честно говоря, не знаю, как у вас это реализовано, но API позволяет забирать спокойно все сообщения со стены вместе с ответами. Да даже если плагин просто парсит ленту — тоже хорошо. Ну а дальше их можно спокойно скрывать по умолчанию и раскрывать по нажатию на какую-нибудь кнопу.

                                Я для жумлы делал нечто подобное, но с API — не доделал, отвлекся на другие дела. А сейчас вот и не знаю, стоит ли — ваш плагин же есть :-)
                                  0
                                  Направлений и возможностей для улучшений плагина — масса. Если учитывать, что я занимаюсь его развитием сугубо для себя, в свободное время, то требуется очень аккуратно расставлять приоритеты. Если все добавить, то агрегатор соцсетей получится )
                          0
                          А не лучше ли для кэширования использовать объекты или локальное хранилище?
                            0
                            думаю, что лучше, но в этом случае это хранилище нужно настраивать, а что касается объектов, то вы имеете в виде javascript объекты? Но если я все верно понимаю- их же нужно где-то хранить. Я на скорую руку их стал хранить в cookie.
                          0
                          Решил проверить как работает… В фейсбуке у меня постов нет, а вот в вк и твиттере лимит поставил по 20 постов. При первой загрузке отобразились только посты из вк, после обновления страницы — только твиттер. С третей попытки сервер выдал 400 ошибку:
                          Bad Request

                          Your browser sent a request that this server could not understand.
                          Size of a request header field exceeds server limit.
                          Cookie
                          /n
                            +1
                            К сожалению это правда. В статье и на гитхабе указано, что кэширование данных из твиттер работает только с объемами до 10 твитов. Сейчас активно работаю над улучшением библиотеки. Из последних обновлений — целиком убрана серверная сторона. Для facebook-авторизации необходимо напрямую вводить токен. Шаблон отображения сообщений теперь — обычный html, который заполняется благодаря библиотеке doT.js. Улучшено отображение времени, реализовав этот блок через moment.js. Конечно до сих пор есть недочеты, над которыми я, и ребята, которые так же стали помогать проекту, активно работают.
                              +1
                              можете не устанавливать cookie:true, тогда кэширование происходить не будет и плагин будет корректно работать.
                            0
                            Отличная работа! Очень мощный и важный инструмент для многих, скажите, пожалуйста, а как близко в ваших планах внедрение отображения постов по хештегу?
                              0
                              Спасибо, что цените. По поводу отображения постов по хеш-тэгу — это сделать можно довольно быстро (реализовывал в другом проекте на основе social-feed). Пока такой задачи не стояло. Если вам требуется — можете добавить issue в https://github.com/pavelk2/social-feed и я реализую это в ближайшее время.
                                0
                                а «другой проект» у вас не в открытом доступе? я бы с радостью его изучил. Если нет такой возможности, тогда я добавлю issue к текущему проекту, спасибо за столь быстрый ответ.

                          Only users with full accounts can post comments. Log in, please.