Установить красивую кнопку Твиттера на сайт

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

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

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

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

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

<a href=”http://twitter.com/#!/netburu” target=”_blank” rel=”nofollow”> <img alt=”Новости в твиттере !” title=”Новости в твиттере !” src=”http://netbu.ru/wp-content/uploads/2011/11/twitter.jpg” border=”0″ width=”121″ height=”121″ /></a>

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

Шаг 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-кода установить другой адрес ссылки и иконки Вконтакте, заменить текст и все готово! А это мой код кнопки Вконтакте для сайта:

<a href=”http://vk.com/id58534010″ target=”_blank” rel=”nofollow”> <img src=”http://netbu.ru/wp-content/plugins/socialbuttons/images/vk_mini.png” alt=”Присоединиться ВКонтакте” title=” Присоединиться ВКонтакте” border=”0″ width=”50″ height=”50″ /></a>

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

Кнопки подписки на Твиттер и RSS

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

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

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

Поделиться ссылкой с друзьями

Подпишись на обновление блога! Получай новые статьи на почту:
black-mask-170 black-mask-170 black-mask-170 black-mask-170 black-mask-170 black-mask-170

Отзывов (3)

  1. Костя пишет:

    Очень интересная статейка!Все понял,ну вот только как залить картинку на хостинг не доганяю!У меня хостинг от блоггер!Как туда заливать на хостинг не могу понять…помоги пожалуйста!вставь мозги…можно так пошагово…спасибо на перед! :grin:

    • Иконку Твиттера не обязательно заливать на хостинг, важно чтобы адрес изображения не поменялся и был всегда доступен. Можно воспользоваться сторонними ресурсами (фотобанками). Например, http://www.radikal.ru/ или http://picasa.google.com/. После загрузки копируем ссылку картинки и далее по шагам размещаем кнопку.

  2. Спасибо, Дмитрий, вроде все понятно, если будут вопросы – вернусь

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

Ваш email не будет опубликован. Обязательные поля отмечены *