Лого vc.ru

Cайт как приложение для соцсетей: Как настроить интеграцию с «ВКонтакте» и Facebook

Cайт как приложение для соцсетей: Как настроить интеграцию с «ВКонтакте» и Facebook

Александр Успенский, основатель маркетплейса для продажи подержанной одежды moddo.com.ua, рассказал в рубрике Growth Hacks о том, как настроить интеграцию с социальными сетями «ВКонтакте» и Facebook, и какие возможности она дает. 

Поделиться

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

Я подумал: почему бы не применить все эти функции для стороннего сайта. Начал изучать и понял, что это действительно возможно. Ведь приложения для «ВКонтакте» и Facebook — это такие же веб-приложения, как и любой сайт. Конечно, возникают некоторые нюансы, о которых я расскажу ниже.

И «ВКонтакте», и Facebook позволяют взаимодействовать со своей сетью как внешним сайтам, так и приложениям. Обращаю ваше внимание на то, что способы подключения и взаимодействия внешних сайтов и приложений отличаются, и надо это четко понимать.

Например, мы изначально подключили свой сайт к «ВКонтакте» и Facebook как внешний сайт, при этом хотели использовать отправку уведомлений пользователям. У нас ничего не вышло, так как основная функциональность API соцсетей доступна лишь для приложений. С Facebook переход от внешнего сайта к приложению был проще — практически ничего менять не пришлось. А вот с «ВКонтакте» пришлось попотеть. Поэтому советую сразу создавать именно приложение, если хотите использовать все возможности API соцсетей.

Итак, что необходимо сделать, чтобы использовать сайт как приложение в соцсетях.

1. Создаем приложения в соцсетях

Для «ВКонтакте» нужно выбрать iframe-приложение:

Для Facebook необходимо выбирать Facebook Canvas-приложение:

Заполняем всю необходимую информацию в профилях приложений, вставляем логотипы и ссылки. Это та информация, которая будет отображаться пользователю при регистрации и внутри соцсетей. 

2. Настраиваем SSL

Как «ВКонтакте», так и Facebook работают по HTTPS-протоколу по умолчанию. Поэтому и приложения обязаны работать по этому протоколу. Мы сделали наш сайт таким образом, чтобы пользователь мог обращаться как по HTTP, так и по HTTPS. 

Пользователь нормально работает как внутри соцсетей, так и как обычный веб-сайт. Если хотите, можете оставить только HTTPS. С настройкой SSL у нас возникли некоторые сложности, но все они решились. Тут все зависит от вашего хостера и купленого сертификата. Главное, после того, как вы все таки запустите сайт по HTTPS, убедиться, что весь сайт отлично работает и нет ссылок, которые используют незащищенный протокол. Иначе эти ссылки будут блокироваться внутри соцсетей.

3. Регистрация пользователей 

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

Таким же способом пользователь подключается к приложению. С «ВКонтакте» ситуация немного сложнее — невозможно установить приложение вне соцсети. Единственный возможный выход из ситуации мы нашли в перенаправлении пользователя на наше приложение внутри «ВКонтакте», когда он нажимает на кнопку входа. Причем, чтобы у пользователя не было шока, что его куда-то перекидывают, мы ему показываем вот такое окно:

Далее необходимо использовать Javascript SDK для того, чтобы пользователь установил (подключил) ваше приложение. Тогда «ВКонтакте» даст доступ к его данным и позволит использовать все методы взаимодействия. 

4. Настройка работы сайта, как приложения внутри соцсети

Итак, пользователь установил наше приложение. Теперь мы должны убедиться, что наш сайт работает нормально внутри Facebook и «ВКонтакте». Во-первых, при входе через «ВКонтакте» пользователь сразу попадает в ваше приложение внутри соцсети. Во-вторых, пользователь может сам туда зайти через кнопки в своей соцсети. И в-третьих, что было самым главным для нас – пользователь попадает в приложение при клике на уведомление. Об этом немного позже. 

Если с Facebook никаких проблем не возникло и сайт функционировал без глюков, то для «ВКонтакте» нам пришлось немного поработать с Javascript SDK. Единственное, что надо было сделать — это отрегулировать высоту iframe и проскролить окно в начало страницы при каждой перезагрузке. Также при отображении сайта внутри соцсети мы даем возможность пользователю перейти на сайт в обычном режиме.

В принципе — ничего сложного. Теперь у вас есть сайт и приложения для соцсетей Facebook и «ВКонтакте».

Зачем все это нужно

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

У нас на сайте есть три способа регистрации: email, «ВКонтакте» и Facebook. И в зависимости от способа регистрации пользователь получает уведомления, соответственно, на почту или в соцсети. Зачем заставлять пользователя Facebook вводить email, который он не использует, если можно коммуницировать с ним прямо в Facebook? 

Не буду заострять внимание на том, как именно отправлять уведомления. Эти вещи хорошо описаны в документациях работы с API соцсетей. 

Что же мы получили внедрив такие уведомления: 

  1. Увеличили прочтение сообщений и просмотр заказов на сайте с 60% до 95%. Просто за счет того, что многие пользователи, пришедшие из соцсети, совершенно не пользуются email и кроме как в соцсети с ними нельзя было связаться. 
  2. Увеличили посещаемость сайта на 4%. Цифра не очень большая, но я уверен, ее можно увеличивать, работая с новым каналом по принципу email-маркетинга. 

Что еще можно получить, используя сайт как приложение в соцсети: 

  1. Как я уже говорил, Вы можете отправлять уведомления когда угодно и практически без ограничений. Как и с email, необходимо соблюсти баланс между слишком назойливыми и частыми уведомлениями, и действительно необходимой и нужной пользователю информацией.
  2. Можно использовать другие возможности соцсетей. Работа со стеной, получение дополнительной информации о пользователе. Вариантов очень много. Например, мы планируем создать механизм удобной загрузки фотографий прямо из «ВКонтакте», так как многие люди уже продают свою одежду там. Таким образом продавцы смогут в несколько кликов перекинуть товары к нам, вместо того, чтобы заново загружать фотографии и цены. 

Выводы

Технически использовать сайт как приложение — задача не очень сложная. В нашем случае на подготовку ушло несколько дней. Но такая фишка дает массу возможностей и создает новый канал привлечения пользователей на сайт.


Присылайте собственные кейсы, в результате которых вам удалось заметно улучшить (или, наоборот, ухудшить) показатели проекта. Интересные эксперименты обязательно попадут на страницы рубрики Growth Hacks.
Популярные статьи
Показать еще
Комментарии отсортированы
как обычно по времени по популярности

Есть статистика отказов от уведомлений через VK?

Если по email это боее-менее понятно, то какой у вас процент отключающихся. Будем считать, что уведомляете вы не назойливо и эффективно.

0

Во Вконтакте на 100 установивших получается 14 удаливших приложение.

Что меня бесит в сайтах, которые вроде как реализовали "вход через соц. сети", так это то, что после входа, тебе нужно ввести еще 20 полей, ну или как минимум еще эл. почту. Спрашивается, какой толк от этого?

В ВК не хватает аффилирования сайта, приложения js и мобильного. В итоге списки друзей везде разные. Но для простых задач конечно подходит. Еще нет сигнала о том, что пользователь удалил приложение. Приходится шаманить сканирование, чтобы не нарушать приватность удаливших, отображением их в поиске.

0

мне почему-то казалось, что в ВК уведомления можно отсылать только играм, а не любым приложениям

0

Самый лучший пример интеграции сайта и ВКонтакте - это так называемые Вики-сайты ВКонтакте (vk.com/sankon?w=page-14495603_48514764). Их можно легко прикрепить к любому посту как в своей группе, так и в рекламном посте в чужой. В отличие от приложения - такой вариант интеграции охватывает и пользователей мобильных устройств.
Такая группа автоматически синхронизируется с сайтом. Все как в приложениях, только с бОльшими возможностями для распространения.
еще кучу примеров видел здесь на стене:http://vk.com/sankon

0

Возможность комментирования статьи доступна только в первые две недели после публикации.

Сейчас обсуждают
Yuriy Belonozhkin

Покушать в пестике вишню будет дешевле? Очень сомневаюсь. Если вы имели в виду покушать (что это за слово, нахер, у взрослых людей) нормальную еду, то альтернативы неравноценны: конечно, лучше быть здоровым и богатым чем бедным и больным.

«Азбука вкуса» и бывшая «Афиша-Еда» запустили сервис для доставки ингредиентов по рецептам журнала
0
Максим Федоров

SEO творит дела ;)

Стеллаж «Сын съедает всю еду»: IKEA превратила поисковые запросы о проблемах в семье в названия товаров
0
Владимир Ростопчин

О, не беспокойтесь. В мире, где будут править такие вот развеселые левые фашисты (оксюморон, да), как эта дама, трудностей и борьбы за жизнь будет предостаточно.

«Добро пожаловать в 2030 год»: член датского парламента о счастливой жизни без приватности и личных вещей
0
Андрей Суханов

Не только крупный бизнес двигается по "трендовым" мемам, но и мелочь за ними поспевает)
sweetbags.ru/news/vzhuh-jeto-kakaja-to-sumochnaja-magija

«Вжух»: реакция российских компаний на мем с котом и волшебной палочкой
0
Показать еще