Читатели часто спрашивают, как добавить кнопку Твиттера в сайдбар или в текст? Ведь кнопка Твиттер на сайт – отличный способ привлечь фолловеров. Ранее уже подробно рассказывал, как разместить кнопку RSS, по аналогии ставятся картинки социальных сетей (Вконтакте, Faceebook, Одноклассники), оформляется подписка на Google Reader и на Яндекс ленту. Сегодня разберем правильную установку иконки Twitter на блог. Поняв принцип один раз, вебмастер легко сможет менять дизайн и выводить любые картинки в сайдбаре, статье, шапке, футере.

Добавить кнопку подписки Twitter на блог (сайт)

Шаг 1. Подобрать креативные, красочные и красивые изображения. Например, можно выбрать из моей коллекции иконок для Твиттера. В интернете довольно много оригинальных и эффектных изображений, обращайте внимания на те, которые подходят под тематику блога.

Шаг 2. Залить понравившуюся иконку на хостинг через админку сайта или через программу FileZilla, скопировать путь к изображению.

Шаг 3. Для размещения в сайдбаре блога WordPress нужно идти во вкладку Дизайн/Виджеты и добавить в текстовый виджет следующий html-код:

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

Шаг 4. Редактируем скопированный код.

• для этого заменяем адрес http://twitter.com/netburu на путь к своему аккаунту (заходим в Twitter-аккаунт и копируем в адресной строке браузера ссылку). Кстати можете сразу подписаться на новости блога в Тви.
• target=”_blank” – не трогаем, этот код позволяет открыть ссылку в новой вкладке.
• rel=”nofollow” – тоже ничего не меняем, данная строка закрывает от индексации поисковиками поставленную исходящую ссылку.
• img alt – альтернативное название Твиттер картинки, если необходимо заменяем, также можно включать ключевые слова.
• title – название значка, при необходимости редактируем.
• src – адрес изображения http://netbu.ru/wp-content/uploads/2011/11/twitter.jpg, заменяем ссылкой на выбранную и сохраненную картинку в шаге 2.
• border – параметр толщины линий рамки выраженной в пикселях, сейчас по умолчанию стоит значение равное нулю.
• width, height – соответственно ширина и высота кнопки Twitter для сайта взятое в пикселях. Следует под дизайн блога подогнать размеры, корректируя числовые значения, помните о сохранении пропорций. Подробнее о верстке читайте в статье про основы CSS.

Шаг 5. Дополнительный шаг. Делаем выравнивание, для этого заключаем код в теги:

• для выравнивания слева <left> код </left>
• справа <right> код </right >
• по центру <center> код </ center >

Шаг 6. Добавление кнопок Facebook, Vk и других социальный сетей. Метод установки такой же. Стоит только в соответствующих строках html-кода установить другой адрес ссылки и иконки Вконтакте, заменить текст и все готово! А это мой код кнопки Вконтакте для сайта:

Вот такие красивые кнопки подписки на Твиттер и RSS на моем блоге:

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

Читайте далее Как набрать много фолловеров в Twitter.

С уважением, Дмитрий Байдук