Урок 80 Как поставить кнопку на сайт или блог (RSS, Twitter и другие)

Часто на почту приходят письма, где читатели спрашивают, как поставить кнопку на сайт? Нет, речь не идет о кнопке от В контакте или фейсбук (кстати про кнопку “Мне нравится” от facebook будет урок очень скоро). Сегодня я расскажу о кнопках RSS, Twitter и другие, которые обычно в сайдбаре, вот они на моем блоге:

Оказывается, многие не знают, как их поставить правильно, либо у некоторых возникает с этим сложности. В этом ничего плохого нет, в свое время я очень долго искал возможность вывода этих кнопок или просто изображений в сайдбаре. То есть, если Вы сможете понять то, как поставить кнопку на сайт или блог, Вы сможете с такой же легкостью выводить изображения, изображения-ссылки в боковой колонке, шапке и т.п.

Как поставить кнопку на сайт или блог

1. Первое то, что нам нужно, это узнать ширину сайдбара в пикселях (чтобы знать, каких размеров делать кнопки и в каком количестве). Для этого пользуемся замечательным дополнением для FireFox Firebug’ом, наводим мышкой на сайдбар:
   И в правом нижнем углу можем увидеть ширину в пикселях:
   1 стрелка, как раз показывает на ширину. Напомню, width – это ширина.
   2 стрелка показывает на расположение данного элемента (в данном случае сайдбара), то есть, если Вы хотите изменить ширину сайдбара, то нужно открыть файл style.css, найти там 90-ую строку (см. стрелка №2 на рис. выше) и поменять значение width на другое. Например, если Вы, вместо 200 поставите 500, то ширина Вашего сайдбара будет равняться 500 px (пикселей).
2. Далее нам нужно вставить кнопку в нужное место. Покажу на примере кнопки подписки RSS. Для начала Вы должны сделать RSS на подписку на Вашем блоге (Как сделать RSS на блоге?).
3. Затем открываем файл sidebar.php.
4. И в нужном месте, например, если у Вас есть поиск на сайте, то перед ним или после него, добавляем следующий код:

   <a href="http://feeds.feedburner.com/reclamparu" target="_blank" rel="nofollow"><img alt="RSS-подписка блога WPnew.ru" title="RSS-подписка блога WPnew.ru" src="https://reclampa.ru/images/feed_48.png" border="0" width="48" height="48" /></a>

5. И редактируем поставленный код (см. выше) для своего блога. Для этого, нам нужно, естественно, ссылку на RSS канал, то есть  http://feeds.feedburner.com/reclamparu изменить на свой (как его узнать, рассказывал тут).
   target=”_blank” – оставляем, этот кусок кода позволяет открыть ссылку-изображение в новом окне.
   rel=”nofollow” – тоже оставляем, так как нам необходимо закрывать от индексации ненужные ссылки.
   В img alt (альтернативное название изображения) меняем фразу RSS-подписка блога WPnew.ru на свое. Можно использовать ключевые слова блога.
   В title (название картинки) также меняем RSS-подписка блога WPnew.ru на свое.
   src – выводит изображение, для этого меняем адрес изображения https://reclampa.ru/images/feed_48.png на свой. То есть, заранее закидываете необходимое изображение через ФТП и указываете полный путь до картинки RSS-подписки, включая расширение (png, jpg, jpeg, gif и др.). Кстати в интернете полно красивых RSS кнопок, поэтому подберите, что-нибудь оригинальное, можно по тематике своего блога. К примеру, очень большое количество RSS кнопок Вы можете посмотреть тут.
   border – толщина рамки в пикселях, если она Вам не нужна, оставьте значение равное нулю.
   width, height – ширина и высота картинки соответственно (в пикселях). Не забывайте соблюдать пропорции, для удобства лучше сразу картинку подогнать с одинаковой шириной и высотой с помощью какого-нибудь графического редактора или уже найти, например, в Яндекс Картинках, изображение с одинаковыми пропорциями, чтобы потом уже регулировать на блоге.
6. Если Вы вместо

   <a href="http://feeds.feedburner.com/reclamparu" target="_blank" rel="nofollow"><img alt="RSS-подписка блога WPnew.ru" title="RSS-подписка блога WPnew.ru" src="https://reclampa.ru/images/feed_48.png" border="0" width="48" height="48" /></a>

   вставите просто

   <img alt="RSS-подписка блога WPnew.ru" title="RSS-подписка блога WPnew.ru" src="https://reclampa.ru/images/feed_48.png" border="0" width="48" height="48" />

   то будет выводиться просто изображение, без ссылки. Это полезно, когда блоггеры хотят вывести в сайдбар свое фото и т.п.

7. Может кто-то задаст вопрос: “А как поставить кнопку на сайт от Twitter? Или от Facebook? Аналогично! Просто в следующей строке добавляете точно такой же код, просто снова нужно будет поменять адрес картинки, текст и главное ссылку, куда ведет картинка. То есть, вместо RSS, для Twitter, к примеру, у меня код выглядит следующим образом:

   <a href="http://twitter.com/reclampa" target="_blank" rel="nofollow"><img alt="Я на Twitter | Подписаться на меня" title="Я на Twitter | Подписаться на меня" src="https://reclampa.ru/images/twitter_48.png" border="0" width="48" height="48" /></a>

Кстати, помните, многие опытные интернет-пользователи предпочитают подписываться через Google Reader (хотя я к таковым не отношусь, я читаю ленту через любимую Opera), поэтому обязательно добавьте возможность подписки на Ваш блог, через Google. Вот пример данной кнопки на моем блоге:

<a href="http://www.google.com/reader/view/feed/http://feeds.feedburner.com/reclamparu" target="_blank" rel="nofollow"><img alt="Добавить в Google Reader" title="Добавить в Google Reader" src="https://reclampa.ru/images/google_48.png" border="0" width="48" height="48" /></a>

После href не забудьте заменить окончание ссылки с reclamparu на свой! Таким же способом я добавил кнопку подписки на меня на facebook.

Вот что получилось у меня на FanBar.ru:

Вот, на всякий случай, кусок кода, как я вставлял все это в WordPress, в сайдбар:

Также эти кнопки Вы можете выровнить по центру, для этого просто перед первой кнопкой поставьте следующий код:

<div align="center">

а после последней кнопки

</div>

Это будет выглядеть вот так:

Надеюсь, Вы поняли урок о том, как поставить кнопку на сайт. Ставьте кнопки по свою желанию и вкусу. Удачи Вам!