nvbn Apr 13 2012 at 15:10

Интеграция web приложений с соц сетями или «проставляем лайки»

3 min

16K

Что требовалось: добавить кнопки facebook'а и twitter'а на большинство
разделов приложения.
Что было: одностраничное приложение без статичных адресов.

Итак, нам нужно будет сделать 3 действия:

добавить поддержку «хэшбэнг» адресов;
сделать статичные страницы для facebook'овского «робота»;
собственно, расставить кнопки.

#! адреса

Нам нужно привязать адрес страницы и желательно заголовок к разделам приложения.
Я для этого использую jquery.address и свои
костыли с регулярными выражениями. Тут всё просто и сильно зависит от
приложения, поэтому детально рассказывать смысла нет.

Статичные страницы

Так как все кнопки социальных сетей не любят адреса с «хешем», нам
придётся сделать специальные страницы без «#!». При заходе робот
facebook'а будет забирать с них информацию, а человек — перенаправляться на страницу с «#!».

Для этого нам понадобится шаблон вида:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN"
"http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:og="http://ogp.me/ns#"
      xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
    <title></title>
    <meta property="og:title" content="" />
    <meta property="og:description" content="" />
    <meta property="og:image" content="" />
    <meta property="og:type" content="" />
    <meta property="og:site_name" content="" />
    <meta property="fb:app_id" content="" />
    <meta property="fb:admins" content="" />
    <link rel="image_src" href="" />
</head>
<body onload="document.location = 'http://' +
document.location.host + '/#!' + document.location.pathname">
    <img src='' />
</body>
</html>

Все поля обязательны к заполнению.
В fb:app_id — id приложения в facebook.
В fb:admins — id пользователей/админов приложения через запятую.
В og:image, image_src и img записываем абсолютный адрес изображения,
включая домен.
После нескольких тестов стало понятно, что изображение для
предпросмотра должно быть продублировано. Иначе возможна ситуация,
когда запостится без превьюшки.
Содержимое остальных полей понятно из их названий.

Расставляем кнопки

В этой части вылезут первые проблемы: на страницу нельзя добавлять
несколько кнопок facebook'а. Но это очень легко решается на js:

function addLike(holder, url) {
    try {
        $(holder).html('<fb:like href="'+ url + '" ></fb:like>');
        FB.XFBML.parse();
    } catch(err) {}
}

В try/catch обёрнуто, так как ie начинает ругаться на кроссдоменные
запросы. С try/catch — игнорирует.
Код кнопки можно поставить любой, главное — дёрнуть потом FB.XFBML.parse().

Twitter недалеко ушёл от facebook'а. В нём динамическое добавление
кнопок не работает. Это тоже легко решается:

function addTwitter(holder, url, title) {
    try {
        $(holder).html('<a href="https://twitter.com/share"
class="twitter-share-button" data-url="' + url + '" data-text="' +
title + '">Tweet</a>');
        $.getScript("http://platform.twitter.com/widgets.js");
    } catch(err) {}
}

try/catch используется по аналогичной с facebook'ком причине.

Теперь осталось натравить на эти функции адрес без «#!» и всё заработает.

Tags:

Hubs:

JavaScript