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

Например, фейсбуковскую кнопочку Like, расположенную на странице вашего сайта, нажмет больше людей, чем кнопку “Facebook Share”, расположенную на той же странице – потому что для “лайка” требуется лишь один клик, а для share – несколько кликов, да еще и написать что-то надо. А если на странице нет ни Like, ни Share, и для того, чтобы поделиться с друзьями найденной у вас информацией, человеку придется копировать ссылку, идти на Facebook, и там ее вручную вставлять, то это сделает еще меньше людей. Соответственно, вы недополучите трафик, т.к. не потрудились облегчить людям возможность поделиться с друзьями информацией о вас.

В марте Твиттер анонсировал, а в апреле запустил свою новую платформу Twitter Anywhere, которая позволяет встраивать часть функционала Твиттера в любой сайт. У нас на возможности, которые предоставляет эта платформа, обратили гораздо меньше внимания, чем на OpenGraph API, включающий, помимо всего прочего, и кнопку Like, представленный тогда же Facebook. А зря, поскольку для того, чтобы на базовом уровне интегрировать свой сайт с Твиттером, вам нужно будет всего 15 минут, и не потребуется никаких навыков программирования.

Итак, какой же функционал Твиттера можно внедрить на свой сайт всего за 15 минут?

Облегчаем пользователям возможность поделиться найденным у вас контентом с друзьями, а также побуждаем его давать нам feedback

Кнопочку Retweet можно часто видеть на сайтах и блогах, однако, в зависимости от того, каким образом она установлена, для того, чтобы отправить с ее помощью сообщение, пользователю нужно совершить дополнительный клик, а иногда и вообще перейти на сайт Твиттера. Чем больше действий требуется от пользователя, тем меньшее количество пользователей их совершат. Это аксиома, поэтому предоставьте ему возможность легко поделиться вашим контентом со своими друзьями. Поставьте сразу после вашего контента твитбокс, который позволяет твитить прямо с вашего сайта.

Чтобы использовать этот и другой функционал Twitter Anywhere на вашем сайте, пользователю нужно будет всего один раз авторизовать соединение своего аккаунта в Твиттере с вашим сайтом, и в будущем ему повторять эту процедуру не придется.

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

Во-вторых, хорошо продумайте текст, который вы предзаполните в твитбоксе. Если вы предлагаете задать человеку вопрос, то предзаполните в твитбокс username вашего Твиттера с предшествующим символом @ – например, @welf. Таким образом вы увидите в своем Твиттере вопрос человека, и сможете на него оперативно ответить. Если вы хотите, чтобы человек поделился найденной на странице информацией со своими друзьями, то не забудьте включить в текст, который вы предлагаете человеку твитнуть по умолчанию, короткую ссылку на нее. Не лишним будет и включить в текст хэштег, по которому вы сможете отслеживать сообщения, касающиеся вас.

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

Привлекаем посетителей нашего сайта фолловить нас в Твиттере, не отпуская их при этом с сайта

Каждая компания хочет иметь возможность регулярно коммуницировать со своими существующими или потенциальными клиентами. При этом в социальных медиа люди, как правило не ищут целенаправленно информацию – для этого они пользуются поисковиками. В соцмедиа люди поддерживают связь с теми, кого они уже знают, или же знакомятся, но, как правило, по прямой или косвенной рекомендации своих друзей (я вижу, что мой френд регулярно общается с таким-то человеком, мне интересно о чем он пишет, поэтому я френжу его – то, что мой френд с ним общается, является, в данном случае, косвенной рекомендацией этого человека).

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

Если вы попробовали твитнуть из твитбокса (т.е. авторизовали соединение с ideablog своего аккаунта в Твиттере), и при этом вы уже фолловите меня в Твиттере, то вы увидите, что на кнопочке, которую вы видите ниже, написано, что вы меня фолловите (т.е. эта кнопочка “умная”, и отличает тех, кто фолловит вас, от тех, кто еще не фолловит). Если же вы не фолловите меня в Твиттере (кстати, почему?), то нажмите на нее, и вы зафолловите меня, никуда не переходя при этом с ideablog:

Разместите такую кнопочку на своем сайте, расскажите людям, какой смысл им вас фолловить (только ради бога – не пишите “Вы сможете быть в курсе наших новостей”, дайте им действительно веские причины зафолловить вас), и вы сможете быстро сформировать свое сообщество в Твиттере из посетителей своего сайта. Никуда при этом не отпуская своих посетителей.

Формируем и визуализируем социальные связи между посетителями нашего сайта для укрепления наших сообществ

Почему люди не очень доверяют отзывам о товарах, которые присутствуют на сайтах типа Яндекс.Маркета или в интернет-магазинах? Прежде всего потому, что они не знают, кем они написаны – может быть, хорошие отзывы написаны сотрудниками магазина или производителя, а плохие – конкурентами. Может быть, аккаунт, с которого оставлен отзыв, был зарегистрирован только для этого… Когда же ты видишь, что это живой человек, и видишь, что он активно общается в Твиттере со своими друзьями (т.е. он не одноразовый бот), или же вы вообще фолловите друг друга в Твиттере, то доверие к написанному им возрастает многократно.

Twitter Anywhere дает возможность подгрузить информацию о любом твиттерянине, показать ее у себя на сайте другим людям (даже тем, кто вообще не зарегистрирован в Твиттере), а также позволяет твиттерянам фолловить друг друга, не покидая при этом вашего сайта. На каждый ник в Твиттере автоматически ставится ссылка, наведение на которую позволяет просмотреть информацию об обладателе этого ника, увидеть его последний твит, а также зафолловить его.

То, как это работает, вы можете посмотреть на примерах. Вот, например, я в Твиттере - @welf. Вот аккаунт Президента России Дмитрия Медведева - @KremlinRussia, а вот аккаунт смешного чувака, который называет себя Перзидентом Роисси, и регулярно постит смешные твиты, пародируя происходящие у нас в стране события - @KermlinRussia. Если вы уже давали разрешение на соединение своего Тви с ideablog, и фолловите меня в Твиттере, то во всплывающем окошечке (оно называется hovercard) вы увидите, что я уже у вас во френдах. Если же вы все еще не зафолловили меня в Твиттере, то можете нажать в hovercard на кнопку Follow, и вы сможете зафолловить меня, не покидая этого блога.

В заключение

То, что описано в данной статье – это, конечно, самая базовая интеграция с Твиттером. Возможности интеграции c социальными медиа и, в частности, с Твиттером, на самом деле гораздо шире, и то, как именно следует интегрировать свой сайт с соцмедиа, сильно зависит от того, какие задачи решаются с помощью такой интеграции, а также от специфики компании и ее сайта. Кроме того, для более глубокой интеграции вам понадобятся программисты. Тем не менее, подобную базовую интеграцию может сделать каждый всего за 15 минут, и это может дать вашему сайту ту самую интерактивность, которой так не хватает многим компаниям.

Подробное руководство по интеграции сайта с Twitter Anywhere

Здесь я подробно опишу все, что нужно сделать для того, чтобы произвести такую интеграцию сайта с Твиттером, однако увидеть это руководство смогут лишь те, кто авторизовался на ideablog с помощью своего аккаунта на Facebook или в Твиттере. Для того, чтобы интегрировать свой сайт с Twitter Anywhere, вам нужно лишь уметь копипастить, а также иметь доступ к редактированию страниц вашего сайта.

Шаг 1. Создание приложения

Итак, сначала нам нужно создать приложение для Твиттера. Не пугайтесь, это лишь выглядит, как что-то страшное, а на самом деле в этом нет ничего сложного. Переходите по этой ссылке, и начинайте заполнять поля:

В поле Application Name пишите название своего сайта или компании. Именно то, что вы там напишете, будет отображаться в подписи под твитами – через что был опубликован твит. У меня в этом поле стоит ideablog, и, соответственно, под твитом пишется, что твит отправлен via ideablog.

Вы можете написать и чуть менее скромно – например, “Интернет-магазин Eldorado.ru”. В принципе, вы даже можете написать оптимизаторскую чепуху типа “Лучший интернет-магазин Рунета с самыми низкими ценами на ноутбуки Магазин.ру”, однако столь длина такого названия будет смотреться некрасиво, а пафос – нелепо и смешно. Так что я бы посоветовал вам проявить в этом вопросе разумную умеренность.

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

В поле Application Website пишете адрес своего сайта (не забудьте начать с http://). Именно на этот адрес будет залинковано название вашего приложения (Application Name) в подписи под твитами, отправленными с твитбоксов на вашем сайте. Предвосхищая вопросы, сразу скажу: я не знаю, индексируются ли эти ссылки поисковиками. Если кто-то знает, отпишитесь плз в комментариях к этой статье.

В поле Organization пишете название вашей компании. У меня там стоит ideablog – как и в названии приложения.

В поле Application Type отмечаете радиобаттон под названием Browser, т.к. у вас не десктопное приложение, а браузерное.

В поле Callback URL опять укажите адрес вашего сайта (и опять же с http://). Если вы делаете приложение для нескольких доменов, то вы можете добавить и их, перейдя по ссылке под названием "authorize additional domains".

В поле Default Access Type обязательно отметьте радиобаттон под названием “Read & Write” (по умолчанию стоит другой вариант - “Read-only”).

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

Жмите Save application, и вас перебросит на страницу деталей вашего приложения. В Твиттере нет понятия премодерации приложения, поэтому сразу после нажатия кнопки Save application ваше приложение становится активным. Список всех ваших приложений вы всегда сможете найти по этой ссылке. Не закрывайте пока страницу с деталями вашего приложения, потому что дальше нам потребуется API key оттуда.

Шаг 2. Прописываем в хедере страницы скрипты вызова нужного нам функционала Twitter Anywhere

Теперь вам нужно будет скопипастить в хедер каждой страницы, которую вы хотите интегрировать с Twitter Anywhere, скрипты того функционала, который вам нужен на этих страницах. В WordPress хедер всех страниц определяется файлом header.php той темы, которая на нем установлена, поэтому мне пришлось прописать скрипты всего в одном файле.

Итак, между тегами <head> и </head> нужно прежде всего прописать вызов платформы Twitter Anywhere:

<script src="http://platform.twitter.com/anywhere.js?id=API_key_Из_Вашего_Приложения&v=1" type="text/javascript"></script>

Примечание: API key вы можете найти на странице деталей вашего приложения.

Ниже (но все так же между тегами <head> и </head>) вам нужно прописать вызов тех функций, которые вы хотите внедрить на свои страницы.

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

<script type="text/javascript">
 
  twttr.anywhere(function (T) {
    T.linkifyUsers();
    infer: true
  });
 
</script>

Примечание: Если текст, в котором содержится ник твиттерянина, уже залинкован вами, то автоматически новая ссылка на него не поставится. Пример: это страница @welf на Facebook. Если же вы хотите, чтобы и в таком случае автоматически залинковывались ники твиттерян, то удалите из скрипта строчку со словами infer: true.

Чтобы при наведении мышки на автоматически залинкованные ники твиттерян появлялись hovercards(пример: @welf), вам нужно вставить в хедер следующий скрипт:

<script type="text/javascript">
 
    twttr.anywhere(function (T) {
      T.hovercards({ expanded: true });
    })
 
</script>

Примечание: Я у себя на блоге сделал так, чтобы при наведении на ник, появлялись полные hovercards. Если вы хотите, чтобы показывались hovercards в сокращенном виде, то удалите из вышеприведенного кода { expanded: true } (вместе с фигурными скобками).

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

<span id="follow-welf"></span>
  <script type="text/javascript">
 
    twttr.anywhere(function (T) {
      T("follow-welf").followButton('anywhere');
    });
 
  </script>

Примечание: Вместо welf не забудьте написать ваш username в Твиттере (без символа @ перед ним).

Шаг 3. Размещаем на наших страницах твиттербокс и “умную кнопочку” “Follow”

У нас уже автоматически залинковываются на страницах нашего сайта ники твиттерян, а также появляются hovercards при наведении на них мышки. Теперь настало время для вставки в наши страницы твитбокса, чтобы ваши посетители могли твитить прямо с вашего сайта, а также “умной кнопочки” “Follow”, которая позволит увеличивать количество фолловеров нашего аккаунта в Тви за счет посетителей нашего сайта без необходимости уводить трафик на Твиттер.

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

<div id="tbox"></div>
<script type="text/javascript">
 
  twttr.anywhere(function (T) {
 
    T("#tbox").tweetBox({
      label: "Заголовок вашего твитбокса",
      height: 60,
      width: 450,
      defaultContent: "Текст в твитбоксе по умолчанию"
    });
 
  });
 
</script>

Примечание: Надеюсь, вы догадались, что вместо “Заголовок вашего твитбокса” нужно вставить ваш призыв к посетителям сайта высказать их мнение по поводу контента на вашей странице, поделиться вашим контентом с друзьями и т.д. А вместо “Текст в твитбоксе по умолчанию” – тот текст, который вы хотите, чтобы твитили те, кому будет лень написать что-то своё.

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

<div id="follow-welf"></div>

Примечание: Вы же помните, что вместо welf нужно написать ваш username в Твиттере без символа @ перед ним – так, как вы сделали это в скрипте в хедере вашего сайта?

Вот, в общем-то, и все. Ничего сложного, правда?