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 при инициализации плагина.

    Зависимости



    Лицензия

    MIT

    Исходный код

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

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

    Похожие публикации

    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама

    Комментарии 7

      +3
      Вы это серьёзно? Вы реально думаете, что ктото в здавом уме «засветит» секретные ключи (или токены) своих аппликаций?
        0
        Я думаю, для этих целей надо создать пустое приложение. Но да, секретные ключи в JS очень смущают.
          0
          Даже пустое приложение можно использовать во вред…

          1) Всякие сканнеры соц. сетей будут просто рады пользователям этого плагина, ведь запросы к API всегда имеют ограничения… а тут — на тебе, токены на халяву.
          2) Из первого пункта можно сделать вывод, что при большом посещении вашего сайта, ваше соц. страничка выйдет из строя. К примеру, если я хорошо помню, то твитер разрешает не более 500 запросов в час. Т.е. при посещении больше 500 человек в час, запросы к API просто перестанут работать.
          3) В фейсбуке с помощью токена можно легко добыть данные владельца (/app/roles). Или просто по-мелочи пакостничать создавая пустые группы и подписывая на них владельца аппликации (/app/groups).

          Но если вдруг вы решите не создавать отдельную аппликацию для этого (а это вполне может случится, хотя бы в связи с тем, что, к примеру, фейсбук сильно усложняет процедуру создания новой аппликации), то тут куда больше простора для действий: можно банить пользователей, получить полный доступ к insights, и много всего другого, все зависит от вашего знания API и вашей фантазии.
            0
            С API тут, конечно, фейл.

            1) с этим беда;
            2) и с этим тоже беда;
            3) в коде указано «make sure to have your app read-only», так что, я думаю, такое API будет мало кому нужно.
              0
              Секретные ключи и токены в JS — это оборотная сторона медали front-end only плагина. Красота Social-feed заключается в том, что вы можете его использовать например в сайтах, которые хостятся на https://pages.github.com/, в сайтах, когда у вас вообще нет back-end части. И даже если она у вас есть, использование этого плагина все равно удобно во многих случаях.

              1) Касательно безопасности: вы можете просто создать левого пользователя, от него создать приложения и использовать токены от них. Таким образом, даже если эти данные будут скорумпированы, вас это никак не заденет. По поводу токенов на халяву — есть гораздо более простые способы получить их в количестве более одного.

              2) Вы правы. В настоящее время я веду работу с ребятами из http://tweecool.com/, для того, чтобы перевести на них взаимоотношения с Twitter. Прямо сейчас перейти на них я не могу, так как они не позволяют делать поиск по хеш-тэгам.

              3) Описал в пункте 1.
                0
                Вот создать пользователя в ВК, например, не так-то просто.
                  0
                  Касательно ВК — никаких проблем нет, там доступ к API работает без приватных ключей.

      Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

      Самое читаемое