8 мая 2013 г.

Плавающие и горизонтальные социальные кнопки от AddThis

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

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

Что может предложить полезного для Blogger сервис AddThis:

 Кнопки социальных сетей "Поделиться", горизонтальные и плавающие вертикальные. Это повышение трафика, позволяя посетителям блога делиться статьями, в многочисленные социальные сети.
 Социальные кнопки "Следовать" горизонтальные, вертикальные. Позволяет читателям присоединиться к вам в социальных сетях, то есть подружиться.
 Добро пожаловать бар. Тулбар со словами приветствия гостей, читателей блога. Настраиваемые приветствия для посетителей из Twitter, Facebook и других сайтов.
Виджет "тенденции содержания" на боковую панель блога. Позволяет вам отслеживать самые популярные сообщения, то есть, какими статьями чаще всего делились.

Как установить горизонтальные социальные кнопки AddThis в blogger

Как всегда, забегаем на сайт AddThis. Первое, что вам  нужно сделать, это - создать (зарегистрировать) аккаунт. В верхнем правом углу страницы, нажмите на "Create Account".

Страница сервиса AddThis
Затем, на странице регистрации, Вы можете авторизоваться через Twitter, Facebook, Google или OpenID. Если Вы не хотите предоставлять доступ AddThis к вашим профилям соцсетей, то заполните простую форму. В которой нужно будет ввести обычные в таком случае данные:
1.Email – почтовый адрес.
2.Password – пароль.
3.Retype Password – здесь нужно повторить пароль.
Email me a monthly newsletter – здесь можно поставить флажок, что бы приходила ежемесячная статистика на Email.
Заполните форму регистрации
На следующей странице нажмите на синею кнопку  "Get the Code" (скриншот этой страницы не нужен). Затем, Вы попадаете на страницу выбора платформы блога и дизайна социальных кнопок.

Выбор платформы блога и дизайна социальных кнопок
Сначала, мы с вами рассмотрим автоматическую установку горизонтальных социальных кнопок в Blogger.

Отметьте платформу blogger. Выберите дизайн соцкнопок, которые будут украшать ваш блог. Далее, нужно нажать кнопку  "Install Blogger Widget" и вас перекинет на страницу установки скрипта кнопок в блог, при помощи виджета blogger .

Автоустановка скрипта кнопок в blogger
Здесь нужно выбрать нужный блог и нажать "Добавить виджет". Установленный гаджет перетащите под сообщения блога.

Перетащите гаджет под сообщения
Готово. Кнопки  AddThis будут отображаться под вашими сообщениями, но они будут видны и на главной странице. Если Вы этого не хотите, следуйте простой инструкции. Зайдите шаблон - изменить HTML, нажать Форматировать шаблон - Ctrl+F. В появившееся окошко вставляем  AddThis - нажимаем Enter.

Новый редактор шаблона blogger

В найденном коде виджета, нужно добавить две строчки:

<b:if cond='data:blog.pageType == "item"'>
 виджет/код
</b:if>

Подробней о показе виджетов или кода на определённых страницах, читайте тут. Должно получится вот так.

<b:widget id='HTML2' locked='false' title='AddThis' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'>
<data:title/>
</h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
</b:if>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

Теперь кнопки соцсетей будут отображаться на внутренних страницах блога. Сохраните шаблон. Перейдите дизайн -  редактировать гаджет AddThis и удалите название виджета. Сохраните гаджет. Готово. При установке кнопок в ручную, непосредственно в сам шаблон,при выборе платформы блога, отмечаем "A Website". Выбираем вид кнопок и затем копируете код. Как установить кнопки в ручную, можно почитать здесь.

Как установить вертикальные плавающие кнопки социальных сетей от сервиса AddThis в Blogger

На странице вашего аккаунта, при выборе платформы блога, отмечаем "A Website". Если мы выберем наш родной blogger, то вертикальные кнопки будут нам не доступны. Далее отметьте понравившиеся соцкнопки, которые будут сверкать у вас в блоге.

При выборе платформы блога, отмечаем "A Website"
Следующий шаг, копируем код ваших кнопок. Затем заходим в панель инструментов blogger - выбираем блог куда Вы хотите установить виджет социальных кнопок - дизайн - добавить гаджет HTML/JavaScript и в его поле вставляете полученный код. Название гаджету не давать.

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

 style="left:50px;top:50px;

Где left - расположение кнопок (по умолчанию слева), чтобы расположить кнопки справа, заменить на right. 50px; - расстояние кнопок от края блога. top:50px; - расстояние от верхнего края блога. Меняйте значения, добивайтесь нужного вам расположения кнопок социальных сетей. Удачи.

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

С уважением, Сергей.


Ух ты кнопочки! Понравилась статья? Поделитесь с друзьями:

0 коммент. :

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

 
Яндекс.Метрика