пятница, 30 апреля 2010 г.

Кнопка для добавления поста в социальные сети и сервисы.

UPD: Найдено лучшее решение вопроса, чем в этом посте.
Читайте Социальные кнопки для Blogger.

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

Всё предельно просто: сервис называется ShareThis.
Назначение сервиса - сделать так, чтобы делиться контентом с друзьями было настолько просто, насколько это возможно. С его помощью можно добавить пост в более чем 20 популярных социальных сервисов. При хорошем раскладе эта штука может помочь увеличить вам траффик для блога или сайта.

Заходим по ссылке, нажимаем "Get the button".
Слева есть графа "Services". Нажимаем туда, выбираем, какие сервисы мы хотим видеть на 1-й странице в выпадающем меню кнопки. Я выбрал те, что популярны в России ("вконтакте" там, правда, нет).
Форму кнопки можно не выбирать, потому что с интеграцией в Blogger как всегда возникают какие-то проблемы, которые я сейчас объясню.
Единственное, что порекомендовал бы в отношении вида кнопки - заполнить поле "Button text" каким-нибудь русским словом взамен английского, чтоб нашим читателям было проще понять для чего эта штука тут будет находиться.
Затем выбираете внизу "Blogger", и щёлкаете Get ShareThis code.
Тогда вам предлагают зарегистрироваться, что вы и делаете. Собственный аккаунт даст вам впоследствии доступ к своей статистике.
Потом вам дают две части кода.
Заходим, как обычно, в Дизайн / изменить html.
Тут вам неплохо бы, как обычно, сохранить свой шаблон у себя на компьютере на всякий случай.
Затем ставим галочку на "расширить шаблоны виджета".
Первую часть того кода, который вам дают, необходимо разместить у себя перед тегом <head/> (то есть до него).

А дальше пару слов о проблеме, которая имеет место в связи с интеграцией в Blogger.
Если вы ставите тот код, что предлагается на сайте в стандартной комплектации - то читатели смогут давать ссылку только на главную страницу вашего блога. Это нехорошо тем, что читатели-то должны иметь возможность давать ссылку и делиться именно тем материалом, которым хотят.
Но таки был найден скрипт, который работает для "Блоггер" так, как нужно, исправляя ситуацию и давая возможность ссылаться точно на тот пост, под которым располагается кнопка.

Так что после тега <data:post.body/> вам надо будет вставить не предложенный ими код, а вот этот:

<p>
<script language='javascript' type='text/javascript'>
SHARETHIS.addEntry({
title: &#39;<data:post.title/>&#39;,
url: &#39;<data:post.url/>&#39;
}, {button:true} );
</script>
</p>

Если у вас стоит не блоггеровский, а другой кат (например тот, что я описывал), то тег <data:post.body/> , после которого надо вставлять код, может быть видоизменён и присутствовать два раза. В этом случае надо ставить после всего кода, который был вставлен вами ранее для ката.

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

Вполне возможно, что есть и лучший вариант того, как можно сделать отображение кнопки - чтоб можно было делать её разной, как то и предлагается на сайте. Может быть вы найдёте этот вариант, а я как-то обленился в последнее время.

UPD: Чтобы кнопка была видна только на страницах самих постов, и не была видна в блоге - необходимо окружить вышеприведённый код, этими тегами:

<b:if cond='data:blog.pageType == "item"'> тут наш код </b:if>

При написании поста я пользовался материалами support.sharethis (тут вы, может быть, найдёте дополнительные сведения по модификации кнопки) и freehonestmarketing.

4 комментария:

  1. Crafty Craftess, уже есть лучшее решение этой задачи:

    http://seorussian.blogspot.com/2010/07/socialnye-knopki-dlya-blogger.html

    ОтветитьУдалить
  2. Да, действительно. В ручную по отдельности бывает сложно добавлять. Надо будет воспользоваться вашим методом.

    ОтветитьУдалить
  3. Скачать исходники социальных иконок в psd-формате можно тута - social icons

    ОтветитьУдалить