2012-05-06

Кнопки социальных закладок от Addthis для Blogger

addthis
Одним из самых популярных сервисов кнопок социальных закладок. Этот сервис предлагает большой выбор кнопок для того, чтобы читателя вашего блога одним кликом мышки могли поделиться интересной записью в twitter, facebook, google + и еще более 300 сервисах Дразнящаяся рожица
Кроме того, вы можете создать с помощью сервиса кнопки Follow us (следуй за нами) – твиттер, youtube, google +, facebook, RSS и др.
Панели кнопок могут быть следующих видов: горизонтальные, вертикальные, а также иметь различный размер. Новинки сервиса – вертикальная плавающая панель социальных закладок, добавление собственных кнопок и addthis аналитика.
Регистрация на addthis
..
После того, как вы нажмете кнопку “Получить AddThis”, или “Get Addthis”, перед вами появится окно регистрации. Если вам не нужна регистрация на сервисе, вы можете его закрыть. Введите ваш e-mail или войдите на сайт, используя аккаунт фейсбук, твиттер, гугл или openID.
регистрация
Addthis установка кнопок социальных закладок
Для того, чтобы установить кнопки addthis в блог не обязательна регистрация на сервисе. Последняя дает преимущества лишь в предоставлении возможности просмотра статистики привлечения посетителей при помощи addthis.




  • Blogger автоматически при помощи кнопки “blogger widget”. Для этого вначале кликните по кнопки “Get Addthis”, затем укажите пункт Blogger
    blogger

    Выберите стиль кнопок из предложенных. Для просмотра всех стилей кнопок в колонке Style нажмите на more options… Теперь после превью кликните по кнопке install_blogger_widget
    В новом окне вы сможете добавить новый элемент страницы в свой блог. Однако большие возможности открывает нам ручной способ добавления кнопок addthis, к тому же не во всякий нестандартный шаблон встроятся кнопки социальных закладок первым способом. Итак переходим к способу №2 добавления кнопок.
  • Blogger при помощи редактирования кода шаблона Выберите из колонки Get Addthis for первый пункт A Websites, также выберите подходящий стиль кнопок. Справа у вас автоматически сгенерируется код, который вы можете вставить в нужное место шаблона вашего блога blogger.
      1. Если вам нужно встроить кнопки в сайдбар (боковую панель блога), то воспользуйтесь гаджетом HTML / Javascript во вкладке Дизайн.
      2. Если вам нужно добавить кнопки в тело записи, то перейдите к редактированию шаблона HTML (Админ. панель –> Шаблон –> Изменить HTML) и найдите отрезок кода <div class='post-footer'>. Сразу после него добавьте сгенерированный код.
    Добавление плавающей панели кнопок Addthis.
    Вертикальную плавающую панель социальных закладок вы можете получить здесь во вкладке Get Code. Здесь сначала выберите размер кнопок: большой (large), средний (32x32, medium) или маленький (16x16, small). Нажмите на vies code напротив выбранного размера кнопок. Демо плавающей панели.
    размер_кнопок
    Просмотр кнопок – во вкладке View Demo.
    Скопируйте сгенерированный код:
    код_плавающей_панели
    Вы можете изменить расположение панели, изменив параметры top (отступ сверху в пикселях) и left (отступ от левого края страницы).
    Теперь вы можете добавить сбор статистики (для последующего использования данных addthis аналитик). Для этого вы должны вставить самый нижний код скрипта, но вы должны изменить отрезок кода [YOUR PROFILE ID HERE] на ваш профиль ID, который возьмете в настройках аккаунта.
    скрипт_001
    Скрипт вставьте до кода кнопок, которые вы установили только что.
    Addthis настройка кнопок
    Вы можете также самостоятельно настроить именно нужные вам кнопки addthis, а также определить их последовательность.
    <div class="addthis_toolbox addthis_default_style addthis_32x32_style">
    <a class="addthis_button_vk"></a>
    <a class="addthis_button_twitter"></a>
    <a class="addthis_button_facebook"></a>
    <a class="addthis_button_livejournal"></a>
    <a class="addthis_button_mymailru"></a>
    <a class="addthis_button_odnoklassniki_ru"></a>
    <a class="addthis_button_formspring"></a>
    <a class="addthis_button_compact"></a>
    <a class="addthis_button_google_plusone"></a>
    <a class="addthis_button_email"></a></div>
    Коды остальных сервисов вы можете посмотреть на странице. Пример вставки кода кнопки на примере первого сервиса – 100zakladok – копируйте код из колонки Code (выделено желтым) и вставляйте в блок закладок строку <a class="addthis_button_Code"></a>, где Code заменяем на соответствующий код кнопки.  Так код кнопки 100zakladok будет выглядеть следующим образом: <a class="addthis_button_100zakladok"></a>
    100zakladok
    Добавление кнопок Follow us.
    Настроить кнопки Follow us (ссылок на ваши соц. сети) вы можете по пути Get Addthis –> Follow Tools.
    follow_tools
    Дайте название виджету (Header), выберите расположение и размер кнопок (Horizontal Large menu – горизонтальное большое меню, Horizontal Small menu – горизонтальное маленькое меню, Vertical Large menu – вертикальное большое меню или Vertical Small menu – вертикальное малнькое меню), выберите нужные кнопки из списка ниже и пропишите ссылки на ваши аккаунты в соцсетях. Нажмите кнопку “Get Code”. Вставьте код в гаджет HTML / JavaScript. Пример кнопок follow us вы можете видеть в разделе Подпишись в сайдбаре (боковой колонке) моего блога.
  • 4 комментария :

    Елена комментирует...

    Полезный виджет спасибо!

    Andrey Riibakov комментирует...

    да только на этом ресурсе нет виджета follow для блоггера

    Zabugor комментирует...

    Интерфейс блоггера поменялся сейчас, не понял как вставить закладки в свой сайт :(

    Mycrib комментирует...

    Странно - в статье ни одного скрина со старым интерфейсом блоггера.
    Эта статья как раз написано по новому интерфейсу.

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

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