Заставляем скрипт addthis показывать нужные кнопки

На неделе я писал, что на нашем сайте появились кнопки, при помощи которых посетители смогут поделиться ссылкой на просматриваемую страницу в социальных сетях. Позже я подумал, что кнопки разного размера и цвета ― это не очень красивое зрелище, и решил заменить их на что-то более подходящее по оформлению. Мне попался сайт AddThis, на котором можно получить универсальный скрипт, при помощи которого пользователи смогут выбрать нужную социальную сеть из большого списка. Действительно удобный скрипт, но есть одно "но": показывает он по умолчанию кнопки фейсбука, твиттера и отправки по электронной почте. В списке сервисов-то есть множество популярных в странах СНГ социальных сетей, но их-то еще нужно найти в списке, а список еще нудно открыть, кликнув по кнопке с плюсиком. Большинство посетителей просто подумают, что нужных им социалок нет, и никакими ссылками делиться не станут.

Как же исправить это и заставить скрипт показывать кнопки популярных социальных сетей прямо на странице, а не в списке? А очень просто!

Итак, на сайте addthis.com есть страничка со справочной информацией, на которой имеется следующий код:

<div class="addthis_toolbox addthis_default_style">
   <a class="addthis_button_facebook"></a>
   <a class="addthis_button_twitter"></a>
   <a class="addthis_button_email"></a>
</div>

При вставке этого кода на страницу будут отображаться кнопки фейсбука, твиттера и отправки по электронной почте. А теперь сравните с кодом, который предлагается к вставке по умолчанию:

<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
   <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>
   <a class="addthis_button_compact"></a>
   <a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4e7a0a6f7527fbb1"></script>
<!-- AddThis Button END -->

То есть, получается, что для того, чтобы показывать нужные нам кнопки, нужно в названии класса ссылки вместо «preferred_1(2,3,4...)» прописать название сервиса, кнопку которого мы хотели бы вывести на страницу.

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

Одноклассники.ru ― odnoklassniki_ru
ВКонтакте ― vk
МойМир@mail.ru ― mymailru
МоёМесто.ru ― moemesto
БобрДобр ― bobrdobr

А еще есть малоизвестный сервис MyHayastan.am, но мы подумали, что он может быть полезен для посетителей армянской версии сайта, поэтому добавили и его:

MyHayastan ― myhayastan

А еще есть возможность вставить кнопку Google +1 при помощи следующего кода:

<a class="addthis_button_google_plusone"></a>

Кстати, эту кнопку оптимально вставлять последней (т.е. после addthis_counter addthis_bubble_style), поскольку справа от себя она почему-то оставляет отступ.


24.09.2011, 12:24
  addThis, facebook, twitter, мне нравится, социальные сети.
Просмотров: 1706.
11