[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "create", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-158433683", "adfox_url": "//ads.adfox.ru/228129/getCode?p1=bxbwd&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid21=&puid22=&puid31=&fmt=1&pr=" } } ]
{ "author_name": "Philipp Kontsarenko", "author_type": "self", "tags": ["\u043a\u0435\u0439\u0441\u044b","\u0432\u043a\u043e\u043d\u0442\u0430\u043a\u0442\u0435","facebook","\u0441\u043e\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0435_\u0441\u0435\u0442\u0438","api_vk","api_facebook","\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f_\u0434\u043b\u044f_\u0441\u043e\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0445_\u0441\u0435\u0442\u0435\u0439","\u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u044f_\u0441_\u0441\u043e\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u043c\u0438_\u0441\u0435\u0442\u044f\u043c\u0438"], "comments": 10, "likes": 22, "favorites": 8, "is_advertisement": false, "section_name": "default", "id": "6142", "is_wide": "1" }
Philipp Kontsarenko
13 562

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.

#Кейсы #ВКонтакте #Facebook #социальные_сети #API_VK #API_Facebook #приложения_для_социальных_сетей #интеграция_с_социальными_сетями

Популярные материалы
Показать еще
{ "is_needs_advanced_access": false }

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

Популярные

По порядку

0

Прямой эфир

Компания отказалась от email
в пользу общения при помощи мемов
Подписаться на push-уведомления