html текст
All interests
  • All interests
  • Design
  • Food
  • Gadgets
  • Humor
  • News
  • Photo
  • Travel
  • Video
Click to see the next recommended page
Like it
Don't like
Add to Favorites

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://gitbox.ru/Social-feed/

Буду очень рад получить обратную связь по плагину данному плагину. В будущем предполагается поддержка других социальных сетей.
UPDATE: плагин постоянно развивается, следите за обновлениями на GitHub.
UPDATE: добавил поддержку превью контента:
image
Читать дальше
Twitter
Одноклассники
Мой Мир

материал с habrahabr.ru

3

      Add

      You can create thematic collections and keep, for instance, all recipes in one place so you will never lose them.

      No images found
      Previous Next 0 / 0
      500
      • Advertisement
      • Animals
      • Architecture
      • Art
      • Auto
      • Aviation
      • Books
      • Cartoons
      • Celebrities
      • Children
      • Culture
      • Design
      • Economics
      • Education
      • Entertainment
      • Fashion
      • Fitness
      • Food
      • Gadgets
      • Games
      • Health
      • History
      • Hobby
      • Humor
      • Interior
      • Moto
      • Movies
      • Music
      • Nature
      • News
      • Photo
      • Pictures
      • Politics
      • Psychology
      • Science
      • Society
      • Sport
      • Technology
      • Travel
      • Video
      • Weapons
      • Web
      • Work
        Submit
        Valid formats are JPG, PNG, GIF.
        Not more than 5 Мb, please.
        30
        surfingbird.ru/site/
        RSS format guidelines
        500
        • Advertisement
        • Animals
        • Architecture
        • Art
        • Auto
        • Aviation
        • Books
        • Cartoons
        • Celebrities
        • Children
        • Culture
        • Design
        • Economics
        • Education
        • Entertainment
        • Fashion
        • Fitness
        • Food
        • Gadgets
        • Games
        • Health
        • History
        • Hobby
        • Humor
        • Interior
        • Moto
        • Movies
        • Music
        • Nature
        • News
        • Photo
        • Pictures
        • Politics
        • Psychology
        • Science
        • Society
        • Sport
        • Technology
        • Travel
        • Video
        • Weapons
        • Web
        • Work

          Submit

          Thank you! Wait for moderation.

          Тебе это не нравится?

          You can block the domain, tag, user or channel, and we'll stop recommend it to you. You can always unblock them in your settings.

          • habrahabr.ru
          • домен habrahabr.ru

          Get a link

          Спасибо, твоя жалоба принята.

          Log on to Surfingbird

          Recover
          Sign up

          or

          Welcome to Surfingbird.com!

          You'll find thousands of interesting pages, photos, and videos inside.
          Join!

          • Personal
            recommendations

          • Stash
            interesting and useful stuff

          • Anywhere,
            anytime

          Do we already know you? Login or restore the password.

          Close

          Add to collection

             

            Facebook

            Ваш профиль на рассмотрении, обновите страницу через несколько секунд

            Facebook

            К сожалению, вы не попадаете под условия акции