Задаём URL нужной страницы для кнопок “Поделиться” в социальных сетях в коде от сервиса AddThis

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

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

Функцию публикации в социальных сетях не текущей страницы, а другой, я нашла только на сервисе AddThis (addthis.com).


Сервис AddThis универсален. О нём можно почитать в предыдущих статьях моего сайта: AddThis – кнопки социальных сетей для продвижения сайта и Кнопки “Стань другом” или “Следуй за мной” от сервиса AddThis.com

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

Сервис AddThis предоставляет нам следующие образцы скриптов:
Кнопка поделиться1. Для случая, если выбрана одна кнопка “SHARE” (ПОДЕЛИТЬСЯ):

<a href="http://www.addthis.com/bookmark.php"
        class="addthis_button"
       addthis:url="http://Адрес другой страницы"
       addthis:title="Название страницы"
       addthis:description="Описание страницы"></a>

2. Если выбран блок кнопок, задается URL, название и описание для всех сервисных элементов внутри AddThis:

<div class="addthis_toolbox addthis_default_style "
        addthis:url="http://Адрес другой страницы"
        addthis:title="Название страницы"
        addthis:description="Описание страницы"> 
<a href="http://www.addthis.com/bookmark.php?v=250&pubid={ID_ВАШЕГО_ПРОФИЛЯ}" class="addthis_button_compact">Share</a> 
  <span class="addthis_separator">|</span>
  <a class="addthis_button_preferred_1"></a>
  <a class="addthis_button_preferred_2"></a>
  <a class="addthis_button_preferred_3"></a>
  <a class="addthis_button_preferred_4"></a>
  </div>

3. Пример для блока кнопок: задается URL, название и описание только для элемента Facebook в сервисе AddThis:

<div class="addthis_toolbox addthis_default_style "> 
<a href="http://www.addthis.com/bookmark.php?v=250&pubid={ID_ВАШЕГО_ПРОФИЛЯ}" _cke_saved_href="http://www.addthis.com/bookmark.php?v=250&pubid={ID_ВАШЕГО_ПРОФИЛЯ}" class="addthis_button_compact">Share</a>
<span class="addthis_separator">|</span>
  <a class="addthis_button_facebook"
        addthis:url="http://example.com"
        addthis:title="An Example Title"
        addthis:description="An Example Description"></a>
  <a class="addthis_button_tweet"></a>
  <a class="addthis_button_preferred_3"></a>
  <a class="addthis_button_preferred_4"></a>
</div>

Ниже приведён пример кода, который был размещён на поддомене сайта и направлял в социальные сети главную страницу основного домена сайта audit4u.ru :

<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style addthis_32x32_style">
<a class="addthis_button_google_plusone_share"
        addthis:url="http://audit4u.ru"
        addthis:title="Повышаем продажи с Вашего сайта"
        addthis:description="Бесплатная консультация по юзабилити сайта или интернет-магазина с целью улучшения показателей для продвижения сайта и повышения конверсии"></a>
<a class="addthis_button_facebook" addthis:url="http://audit4u.ru"></a>
<a class="addthis_button_twitter" addthis:url="http://audit4u.ru"
       addthis:title="Бесплатная консультация по юзабилити сайта или интернет-магазина"></a>
<a class="addthis_button_vk"
        addthis:url="http://audit4u.ru"
        addthis:title="Повышаем продажи с Вашего сайта"
        addthis:description="Бесплатная консультация по юзабилити сайта или интернет-магазина с целью улучшения показателей для продвижения сайта и повышения конверсии"></a>
<a class="addthis_button_livejournal" addthis:url="http://audit4u.ru"
       addthis:title="Бесплатная консультация по юзабилити сайта или интернет-магазина"></a>
<a class="addthis_button_compact" addthis:url="http://audit4u.ru"
       addthis:title="Повышаем продажи с Вашего сайта"
       addthis:description="Бесплатная консультация по юзабилити сайта или интернет-магазина с целью улучшения показателей для продвижения сайта и повышения конверсии"></a>
</div>
<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ID_ВАШЕГО_ПРОФИЛЯ"></script>
<!-- AddThis Button END -->

Проверив каждую кнопку блока от сервиса AddThis, я обратила внимание, что некоторые социальные сети берут title и description не те, которые указываем в коде от AddThis, а которые находятся в коде указанной Вами URL-страницы или вообще не используют описание description. Поэтому проверяйте каждую кнопку, которую Вы выбираете для блока кнопок от AddThis и не задавайте лишние параметры.

Как Вы можете наблюдать, в последнем примере не задан description для социальных сетей Twitter и LiveJournal, а для Facebook нет необходимости задавать даже title.

Хочу дать Вам ещё небольшой совет. Когда будете устанавливать на Вашем сайте блок кнопок Addthis, для ускорения загрузки этих кнопок, кроме основного кода, добавьте в теги:

<head></head>

следующий код:

<script type="text/javascript">
 var addthis_config = {"data_track_clickback":true};
 </script><script type="text/javascript"
 src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=[ID_ВАШЕГО_ПРОФИЛЯ]"></script>

В этом случае блок кнопок будет загружен один раз и загрузка других страниц, на которых расположены кнопки от сервиса AddThis, не будет тормозиться.



Буду благодарна, если поделитесь с друзьями информацией:

Подпишись и получай новые статьи на почту:

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

  1. 1. Если текст надо брать не с тайтл, дескрипшн, а с первого Н1 заголовка в статье – как это сделать?
    2. Как сделать чтобы брались не все картинки по очереди, а ставилась одна единственная. например со специальным квадратным логотипом кот. лежит у меня на сайте для этих целей (публикации в соцсетях)

    Спасибо!

    • Alex, для тех соцсетей, которые позволяют задавать свои titl и description можете задавать любые тексты в этих параметрах. В частности я тоже самое сделала для сайта audit4u.ru, пример кода приведён в данной статье. Вот кусочек этого кода:

      <a сlass="addthis_button_google_plusone_share"
      addthis:url="http://audit4u.ru"
              addthis:title="Повышаем продажи с Вашего сайта"
              addthis:description="Бесплатная консультация по юзабилити сайта или интернет-магазина с целью улучшения показателей для продвижения сайта и повышения конверсии"></a>

      Здесь в коде, расположенных на поддомене кнопок соцсетей, я указываю url главной страницы основного сайта, а titl и description те, которые я хотела бы видеть в выдаче для соцсетей. Здесь можно задавать url любой страницы любого сайта с любыми titl и description, которые хотите видеть в публикации в соцсетях после нажатия на данные кнопки. Но не все социальные сети дают возможность изменять titl и description, поэтому здесь нужно проверять каждую социальную сеть, где то можно задавать свои тексты в этих тегах, а какие-то соцсети считывают эти теги с указанной в url страницы. Но хороший плюс, это то, что используя код сервиса AddThis, можно задавать url любой страницы любого сайта, что не допустимо на данный момент в других сервисах.

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

Оставить комментарий

Ваш email не будет опубликован. Обязательные поля отмечены *

Вы можете использовать это HTMLтеги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>