Pull to refresh

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

JavaScript
Что требовалось: добавить кнопки 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:jsfacebooktwitter
Hubs: JavaScript
Rating +2
Views 16k Add to bookmarks 76
Comments
Comments 2

Popular right now

Javascript разработчик
from 130,000 to 180,000 ₽ArtezioНижний Новгород
Frontend Developer JS + React
from 50,000 ₽Top-executiveRemote job
Javascript разработчик
from 160,000 to 220,000 ₽ArtezioМосква
JavaScript Software Engineer
from 3,000 to 5,500 $XPOWERОдессаRemote job
Javascript разработчик
from 2,800 to 3,300 $ArtezioВитебск

Top of the last 24 hours