Создаем собственную кнопку twitter для страницы Facebook

Создаем собственную кнопку twitter для страницы Facebook
18.11.2011 Алексей Малыгин

Twitter нам предлагает несколько вариантов своих кнопок:

  • с маленьким счетчиком
  • с большим счетчиком
  • без счетчика

Сделать что-то свое, к сожалению, нельзя.

С одной стороны, может это где-то и правильно, когда кнопки какой-то социальной сети на всех сайтах одинаковы. Так проще ориентироваться.

С другой стороны, эти кнопки выглядят, подчас, нелепо. Хочется поменять хотя-бы цвет, что уж говорить о размерах или шрифтах.

Но мы пойдем другим путем.

Шаг 1: Получим код кнопки Twitter

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

<a title="Заголовок" href="http://twitter.com/home/?status=Ваше сообщение">Tweet</a>

Пример: Tweet

Шаг 2: Создаем собственную кнопку Twitter, используя CSS

Суть в том, что в качестве кнопки мы используем любую свою картинку, хранящуюся на сервере.

Ну а теперь сам программный код:

CSS

#button{
width: 60px;
height: 25px;
float: left;
position: relative;
line-height: 22px;
background: url(yoursite.com/background_image.png) no-repeat top center;
}
.tweet{
font-family:"Lucida Grande","Lucida Sans Unicode", sans-serif;
font-size: 11px;
font-weight: bold;
padding: 0 0 0 18px;
}
.tweet a{ color: #333; text-decoration: none; }
.tweet a:hover{ text-decoration: underline; }

КНОПКА

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

И обязательно подписывайтесь на нашу страничку в Facebook!