Slyweb
На разработку сайта! Скидки 50%!

jQuery. Интеграция с социальными сетями

В статье я расскажу о популярных платинах jQuery, предназначенных для взаимодействия с API социальных сетей - Facebook, Twitter, укажу плагины для создания стиля и эффектов, используемых в социальных сетях, которые могут пригодиться на ваших сайтах. Помимо плагинов также Вы найдёте исходный код некоторых разработчиков, с помощью которого Вы сможете получать информацию с twitter для использования на своём сайте.

Оглавление статьи "jQuery. Интеграция с социальными сетями."

1. Стилизация вашего сайта под facebook

Если быть откровенным то интегрировать итструменты для работы с facebook очень сложно, из-за необходимости регистрации и использования специального ключа, который выдаётся разработчику на сайте facebook.com, хотя разработчики facebook серьёзно потрудились над API, но приняли слишком суровые меры предосторожности, для сравнения - на twitter можно использовать любые сообщения любых пользователей без обязательного прохождения аутентификации, поэтому количество плагинов на jQuery для twitter существенно возрасло, в то время как для facebook их почти нет. Исходя из этого в этой главе я расскажу лишь о плагинах jQuery, с помощью которых можно создать имммитацию некоторых приложений facebook.

1.1. Плагин Facebox

jQuery плагин Facebox позволяет создавать диалоговые окна в стиле facebook, при этом допускается создавать диалоговые окна с помещением в них простого текста некоторых элементов, изображений, ajax страниц. Можно сказать, что плагин Facebox является модифицированной копией lightbox.

Для применения плагина Facebox необходимо подключить jquery не ниже 1.2.1, css файл facebox.css, и facebox.js:

  • Код
  • Чистый код
  1.<script src="jquery.js" type="text/javascript"></script>
  2.<link href="/facebox/facebox.css" media="screen" rel="stylesheet" type="text/css"/>
  3.<script src="/facebox/facebox.js" type="text/javascript"></script>
  4.

        
Листинг 1.

Пример 1. Нажми это пример!

Если вам нужно создать диалоговое окно для простого текста, то укажите ссылку с атрибутом rel равным facebox:

  • Код
  • Чистый код
  1.<a href="#info" rel="facebox">text</a>
  2.
  3.// После нажатия сообщение будет содержать текст расположенный в с div
  4.<div id="info" style="display:none;">
  5. text
  6.</div>
  7.

        
Листинг 2.

Если вам нужно создать диалоговое окно для изображения, то укажите ссылку с атрибутом rel равным facebox, но в атрибут href запишите адрес изображения:

  • Код
  • Чистый код
  1.<a href="images/stairs.jpg" rel="facebox">text</a>
  2.

        
Листинг 3.

Пример 2. Нажми это пример!

Плагин Facebox поддерживает диалоговые окно для удалённых страниц, содержимое которых оплучается с помощью ajax, для того чтобы получить содержимое удаленной страницы укажите ссылку с атрибутом rel "facebox", а в атрибут href запишите адрес удаленной страницы:

  • Код
  • Чистый код
  1.<a href="remote.html" rel="facebox">text</a>
  2.

        
Листинг 4.

Пример 3. Нажми это пример!

Содержимое удалённой страницы «remote.html»:

  • Код
  • Чистый код
  1.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2."http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3.<html>
  4.<head>
  5.<meta http-equiv="Content-Type" content="text/html" charset="utf-8">
  6.</head>
  7.<body>
  8.<h3>Заголовок подсказки</h3>
  9.<p>Возненавидеть жизнь можно только вследствие апатии и лени.</p>
10.<p>Прекращение деятельности всегда приводит за собой вялость, а за вялостью идет дряхлость.</p>
11.</body>
12.</html>
13.

        
Листинг 5.

Для всех трёх вышеуказанных случаев необходимо привязать метод facebox() к jQuery событию ready:

  • Код
  • Чистый код
  1.jQuery(document).ready(function($) {
  2. $('a[rel*=facebox]').facebox()
  3.})
  4.

        
Листинг 6.
Загрузить Facebox архивом

1.2. Форма регистрации как у facebook

На зарубежном сайте случайно обнаружил форму регистрации, являющуюся копией формы регистрации с сайта facebook, небось есть какая форма, но мне понравился php код и jQuery, на таких примерах я когда начинал изучать jQuery, и по своему опыту могу сказать, что изучение кода опытных разработчиков не заменит ни какая книга и ни одно руководство, поэтому приведу рабочий пример формы, поля формы проверяются php скрипом, предварительно отправленные методом ajax в формате json.

Регистрация
Зарегистрируйтесь, пожалуйста
  отправка…
 

Для того чтобы Вам было быстрее разубираться с этой формой я укажу какую информацию и где нужно искать:

  • Основной файл submit.php - он отвечает за проверку полей форму, правильность email и т.д;
  • Далее файл script.js, файл отвечает за отправку данных методом ajax, все функции данного файл рассмотрены в листинге № 1;
  • functions.php - функции вывода данных в форме, дней, месяцев, дат.
  • файл css - demo.css - настройка стиля формы
  • registered.html – страница, на которую перенаправляется пользователь, после успешной регистрации

Скорее всего вам захочется изменить файл submit.php, так как из него нужно будет всего лишь добавить запрос в базу данных с сохранением персональных данных о пользователе, но сначала мы рассмотрим сам js код, чтобы Вам стало ясно, как работает форма:

  • Код
  • Чистый код
  1.$(document).ready(function(){
  2.
  3. $('#regForm').submit(function(e) {
  4.
  5. register();
  6. e.preventDefault();
  7.
  8. });
  9.
10.});
11.
12.
13.function register()
14.{
15. hideshow('loading',1);
16. error(0);
17.
18. $.ajax({
19. type: "POST",
20. url: "facebookreg/submit.php",
21. data: $('#regForm').serialize(),
22. dataType: "json",
23. success: function(msg){
24.
25. if(parseInt(msg.status)==1)
26. {
27. window.location=msg.txt;
28. }
29. else if(parseInt(msg.status)==0)
30. {
31. error(1,msg.txt);
32. }
33.
34. hideshow('loading',0);
35. }
36. });
37.
38.}
39.
40.
41.function hideshow(el,act)
42.{
43. if(act) $('#'+el).css('visibility','visible');
44. else $('#'+el).css('visibility','hidden');
45.}
46.
47.function error(act,txt)
48.{
49. hideshow('error',act);
50. if(txt) $('#error').html(txt);
51.}
52.

        
Листинг 7.

Всего можно насчитать четыре основных функции скрипта - document.ready, register(), hideshow(), error(). В первой функции мы запрещаем отправку формы обычным для браузера способом - перезагрузка страницы на адрес указанный в атрибуте action, для этого используем метод preventDefault(). Функция register() отсылает запрос на сервер для проверки данных собранных из формы методом .serialize(). Формат данных json. С помощью функций hideshow(), error() регулируется отображение изображения ajax-loader.gif.

Когда я смотрел первоначальный код разработчиков, то всё было понятно за исключением отсутствия возможности отправлять данные в базу, а затем сверять их в этом файле, тем не менее я не стал вносить существенные изменения, только указал в комментариях как можно сохранять данные в базу mysql.

  • Код
  • Чистый код
  1....
  2.// код добавляющий пользователя в базу данных
  3.
  4./*
  5.
  6.$birthday = htmlentities($_POST['day'].'-'.$_POST['month'].'-'.$_POST['year'],ENT_NOQUOTES, 'utf-8');
  7.$fname = htmlentities($_POST['fname'],ENT_NOQUOTES, 'utf-8');
  8.$lname = htmlentities($_POST['lname'],ENT_NOQUOTES, 'utf-8');
  9.$sec = htmlentities($_POST['sex-select'],ENT_NOQUOTES, 'utf-8');
10.$pass = md5($_POST['pass']);
11.
12.
13.$query = "INSERT INTO users (name,email,birthday,sex,fname,lname,pass) VALUES ('$avtor','$mail','$birthday','".$sex."','$fname','$lname','".$pass."')";
14.$result = mysql_query ($query) or die ("Ошибка при выполнении запроса: ".mysql_error ());
15.
16.*/
17....
18.

        
Листинг 8.

Скачать форму регистрации архивом:

Загрузить facebookreg архивом

1.3. Facebook Elastic

В общем, тут и так всё понятно, элемент textarea увеличивается при добавлении текста:

Для использования Elastic подключите следующие файлы, затем укажите jQuery код:

  • Код
  • Чистый код
  1....
  2. <script src="dependencies/jquery.js" type="text/javascript" charset="utf-8"></script>
  3. <script src="jquery.elastic.source.js" type="text/javascript" charset="utf-8"></script>
  4. <script type="text/javascript">
  5. // <![CDATA[
  6. $(document).ready(function(){
  7. $('textarea').elastic();
  8. });
  9. // ]]>
10. </script>
11.

        
Листинг 9.

Скачать Elastic архивом:

Загрузить elastic архивом

1.3. Gmail/Facebook чат

Достаточно сложным и продуманным плагином, основанным на подобии чатов от Gmail и Facebook является чат созданный разработчиком Anant Garg, плагин предоставляет возможность бесплатного применения чата на вашем сайте, если вы его используете для частных целей, в ином случае Вы должны купить лицензию! В целом возможности чата следующие:

  • чат написан на jQuery, php, mysql
  • чат располагается в нижней части окна браузера
  • чат перемещается вместе с перемещением скроллинга окна
  • для неактивных окон новое сообщение отображается на названии вкладки окна буразера (элемент title) по итпу "X says", то есть "X сказал"
  • окно чата поддерживает возможность свёртывания
  • простата в использовании
  • Кроссбраузерность:
    • Firefox 2+
    • Internet Explorer 6+
    • Safari 2+
    • Opera 9+
  • простата в использовании

Примечание. Если вы попытаетесь открыть два окна в одном браузере чтобы проверить работоспособность чата, скорее всего чат будет работать неверно, для проверки откройте страницу samplea.php в другом браузере и напечатайте что-нибудь в окне чата, и тогда вдруг появятся диалог сообщений между Александром и Админом.

Для того чтобы использовать чат необходима база sql.

  • Код
  • Чистый код
  1.CREATE TABLE IF NOT EXISTS `chat` (
  2. `id` int(10) unsigned NOT NULL AUTO_INCREMENT,
  3. `from` varchar(255) NOT NULL DEFAULT '',
  4. `to` varchar(255) NOT NULL DEFAULT '',
  5. `message` text NOT NULL,
  6. `sent` datetime NOT NULL DEFAULT '0000-00-00 00:00:00',
  7. `recd` int(10) unsigned NOT NULL DEFAULT '0',
  8. PRIMARY KEY (`id`)
  9.) ENGINE=InnoDB DEFAULT CHARSET=utf8 AUTO_INCREMENT=0 ;
10.

        
Листинг 10.

После этого откройте файл chat.php и укажите настройки для подключения чата к базе данных (имя сервера, название базы, пароль пользователя, имя пользователя):

  • Код
  • Чистый код
  1.define ('DBPATH','localhost');
  2.define ('DBUSER','db');
  3.define ('DBPASS','pass');
  4.define ('DBNAME','name');
  5.

        
Листинг 11.

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

  • Код
  • Чистый код
  1.session_start();
  2.$_SESSION['username'] = "Админ";
  3.

        

то на samplea.php:

  • Код
  • Чистый код
  1.session_start();
  2.$_SESSION['username'] = "Александр";
  3.

        

После того как Вы подключите базу данных и создадите соответствующую таблицу sql - "chat", а также укажите сесссию и имя пользователя этой сессии подключите файлы javascript:

  • Код
  • Чистый код
  1.<script type="text/javascript" src="js/jquery.js"></script>
  2.<script type="text/javascript" src="js/chat.js"></script>
  3.

        
Листинг 12.

Чтобы открыть чат необходимо запустить функцию javascript:chatWith('USERNAME'). На данной странице, как и на корреспондирующей странице samplea.php, чат запускается нажатием по ссылке, код которой приведён ниже:

  • Код
  • Чистый код
  1.<a href="javascript:void(0)" onclick="javascript:chatWith('Александр')">Открыть чат с Александром...</a>
  2.

        
Листинг 13.

Дополнительные настройки чата - скорость обновления окна чата, максимально допустимое количество записей в чате и т.д. вы можете настроить в файле chat.js.

P.S. Единственный недостаток чата - откройте firebug и посмотрите количество запросов на данной странице.

Скачать google/facebook chat архивом, однако не забудьте о том, что примеры нужно открывать в разных браузерах:

Загрузить google/facebook chat архивом

2. Интеграция вашего сайта с Twitter

2.1. Twitter Ticker

Вот и настала очередь twitter`а, по моему мнению, хорошим поиском последних сообщений от вас и ваших друзей на твиттере является плагин jQuery "Twitter Ticker". Пример записей с блога Президента РФ Вы можете видеть ниже:

Twitter icon

Президент РФ

Loading..

Сразу предупреждаю, что данный Палагин поддерживает лишь возможность изменения пользователя, чьи сообщения будут отображаться, данный параметр регулируется в файле script.js, в переменной «var tweetUsers», на данной странице мы забираем данные с единственного аккаунта, принадлежащего пользователю "blog_medvedev":

  • Код
  • Чистый код
  1.var tweetUsers = ['blog_medvedev'];

        
Листинг 14.

Однако, вы можете забирать данные и с других аккаунтов, то есть допускается указывать массив twitter аккаунтов:

  • Код
  • Чистый код
  1.var tweetUsers = ['tutorialzine','TechCrunch','smashingmag','mashable'];

        
Листинг 15.

Никаких дополнительных возможностей плагин "Twitter Ticker" не представляет, для тех, кто не хочет разбираться с настройками данного плагина, может использовать API инструменты разработчиков twitter. На рисунке № 1, указан раздел в котором Вам, в вашем профиле нужно нажать ссылку, указанную на рисунке № 2, после чего вы попадёте в раздел Плагинов от twitter, всего их пять, - смотрите рисунок № 3.

В профиле можно настраивать и выбирать интересующие Вас плагины от twitter Ссылка ведущая к плагинам от twitter Все плагины twitter
рис. 1, рис. 2, рис. 3

Например если вы выбрали первый в списке плагин, предназначенный для работы с вашими сообщениями, то Вы можете настроить его удобным для Вас способом, - заменить количество отображаемых сообщений, цветовую схему, размеры и т.д.,подробнее об на рисунках № 4 и № 5.

В профиле можно настраивать и выбирать интересующие Вас плагины от twitter Ссылка ведущая к плагинам от twitter
рис. 4, рис. 5
Загрузить Twitter Ticker архивом

2.2. Плагин Tweet

Если возвращаться к jQuery плагинам с помощью которых можно получать данные от twitter, то хотелось бы отметить плагин "Tweet", полное его описание Вы сможете найти в одной их моих статей - jQuery - самое нужное!

3. jQuery. "ВКонтакте" и "Одноклассники".

3.1. Одни недостатки

Наверно нужно было начать с API ВКонтакте для сайтов, так как ресурс всё-таки русскоязычный, однако facebook и twitter более популярные социальные сети и поэтому были рассмотрены в первую очередь. В добавок к этому, плагинов для "ВКонтакте" написанных на jQuery нет. Создавать приложения для "Вконтакте" не сложно так существует документация по всем методам по адресу "Взаимодействие приложения с API ВКонтакте". Однако хочу разочаровать пользователей "ВКонтакте", из-за закрытого характера данной социальной сети создавать какой либо плагин на jQuery не имеет смысла, так как для даже для простого вывода данных о пользователях, о друзьях, о сообщениях необходимо проходить постоянную авторизацию и получать разрешение на доступ к персональным данным. API "Одноклассники" слабо развит по сравнению с API "ВКонтакте", какие либо возможности использования этой социальной сети совместно с jQuery отсутствуют.

Для использования API соцаильных сетей "ВКонтакте" и "Facebook" требуются создание собственного приложения, которому будет присвоен id и секретный ключ, однако для обеих требуется аутентификация, что сильно затрудняет написание плагинов на jQuery, поскольку мало кто захочет на постронем сайте вводить пароль, который не знамо куда уйдёт. Одним из способов использования API указанных социальных сетей может быть вход на сайт с одновременным входом на "Facebook" или "Вконтакте", после чего Вы получаете id сессии, пароль и дополнительные данные необходимые для работы с персональными данными указанных сетей, однако объяснение данной возможности не входит в рамки данной статьи.

Заключение

От читателей хотелось бы узнать существует ли способ доступа к социальной сети «ВКонтакте», а именно к сообщениям, фотографиям, заметкам пользователей без авторизации.


Александр Ермаков