Урок 57 Сервис AddThis: ставим социальные кнопки на свой блог

Сегодня мы будем добавлять на свой блог “красивые кнопки”, при нажатии на которых одним кликом можно будет отправить статьи в твиттер, вконтакт и др. социальные сервисы. Эта кнопка будет привлекать к Вам новых других посетителей, так что я рекомендую ставить их всем!

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

Регистрация в сервисе AddThis

1. Заходите на addthis.com.
2. Нажимаете на кнопку Join Now (правый верхний угол):
   
3. Заполняете данные в регистрации (в принципе, как обычно):
   
4. Нажимаете на Register, в принципе вот и все, Вы зарегистрированы

Установка социальных кнопок в статьях

1. Сервис предоставляет большой выбор кнопок на вкус и цвет. Я покажу Вам на примере одного типа кнопок, который я буду ставить себе на блог. Заходите в пункт Explore –> Gallery:
   
2. Я выбрал кнопки размером 32×32 (третья слева):
   
3. Нажимаете по этой картинке, в следующем окно копируете HTML код, который предлагает сервис:
   Вставляете скопированный код в single.php (где находится файл single.php?), после вывода статьи. Например я вставил этот код у себя на блоге в это место (желательно в конце статьи, перед выводом комментариев, комментарии обычно выводятся следующим кодом

   <?php comments_template(); ?>

   , просто в моем случае перед комментариями выводится текст о подписке.
   
4. Следующий код, который дает нам сервис:
   Копируете этот код и вставляете в footer.php перед закрывающим тегом </body>, заменив слово “YOUR-ACCOUNT-ID” на имя, на которое Вы зарегистрировали, в моем случае это WPnew:
   Теперь зайдя на любую статью своего блога, Вы можете увидеть примерно следующие кнопки:
   В принципе кнопки уже работают. Осталось выбрать какие кнопки поставить, о чем я поговорю ниже.

Выбор кнопок социальных сервисов и их вставка

1. Переходите по адресу http://www.addthis.com/services/list.
2. Там Вы сможете выбрать кнопку какого сервиса желаете вставить на свой блог. Это делается следующим образом: например Вы хотите вставить кнопку от Вконтакте. Для этого в списке (адрес я дал выше) ищите интересующий социальный сервис, я его нашел, он выглядит так:
   И со второго столбца копируете “короткую ссылку” (показано стрелкой на картинке выше).
3. Теперь открываем single.php и там же, где находятся наши кнопки (куда мы вставляли код выше), копируем и вставляем такой же код, как и другие, но слово facebook (например) изменяем на vk (на ту самую короткую ссылку, о которой говорилось выше):
   
4. Таким образом добавляем все нужные кнопки социальных сервисов. Я добавил несколько штук, Вы их можете видеть в конце этой статьи, приведу код этих кнопок, может кому-то пригодится:

   <div class="addthis_toolbox addthis_32x32_style addthis_default_style">
          <a class="addthis_button_facebook"></a>
   	<a class="addthis_button_vk"></a>
           <a class="addthis_button_twitter"></a>
   	<a class="addthis_button_livejournal"></a>
   	<a class="addthis_button_google"></a>
   	<a class="addthis_button_googlebuzz"></a>
   	<a class="addthis_button_friendfeed"></a>
   	<a class="addthis_button_blogger"></a>
           <a class="addthis_button_compact"></a>
   </div>

Напомню, чтобы эти кнопки поставить по середине, просто необходимо перед кодом кнопок прописать <div style=”text-align:center”>, а после кода просто добавить </div> (об и других полезных вещах функциях форматирования можете почитать тут).

На сегодня, думаю, все. Будут вопросы – задавайте в комментариях. До встречи на следующих уроках!

___________________________

Следующий урок: Урок 58 Ставим кнопку «Оставить отзыв».

___________________________
Постовой. Лавка подарков Бабблз с каждым днем удивляет все больше и больше. Оригинальные подарки с доставкой по Москве теперь доступны каждому!