Марафон v2.0

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

kak_postavit_knopku_na_sait

Часто на почту приходят письма, где читатели спрашивают, как поставить кнопку на сайт? Нет, речь не идет о кнопке от В контакте или фейсбук (кстати про кнопку “Мне нравится” от 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/wpnewru" target="_blank" rel="nofollow"><img alt="RSS-подписка блога WPnew.ru" title="RSS-подписка блога WPnew.ru" src="http://wpnew.ru/images/feed_48.png" border="0" width="48" height="48" /></a>
  5. И редактируем поставленный код (см. выше) для своего блога. Для этого, нам нужно, естественно, ссылку на RSS канал, то есть  http://feeds.feedburner.com/wpnewru изменить на свой (как его узнать, рассказывал тут).
    target="_blank" – оставляем, этот кусок кода позволяет открыть ссылку-изображение в новом окне.
    rel="nofollow" – тоже оставляем, так как нам необходимо закрывать от индексации ненужные ссылки.
    В img alt (альтернативное название изображения) меняем фразу RSS-подписка блога WPnew.ru на свое. Можно использовать ключевые слова блога.
    В title (название картинки) также меняем RSS-подписка блога WPnew.ru на свое.
    src – выводит изображение, для этого меняем адрес изображения http://wpnew.ru/images/feed_48.png на свой. То есть, заранее закидываете необходимое изображение через ФТП и указываете полный путь до картинки RSS-подписки, включая расширение (png, jpg, jpeg, gif и др.). Кстати в интернете полно красивых RSS кнопок, поэтому подберите, что-нибудь оригинальное, можно по тематике своего блога. К примеру, очень большое количество RSS кнопок Вы можете посмотреть тут.
    border – толщина рамки в пикселях, если она Вам не нужна, оставьте значение равное нулю.
    width, height – ширина и высота картинки соответственно (в пикселях). Не забывайте соблюдать пропорции, для удобства лучше сразу картинку подогнать с одинаковой шириной и высотой с помощью какого-нибудь графического редактора или уже найти, например, в Яндекс Картинках, изображение с одинаковыми пропорциями, чтобы потом уже регулировать на блоге.
  6. Если Вы вместо
    <a href="http://feeds.feedburner.com/wpnewru" target="_blank" rel="nofollow"><img alt="RSS-подписка блога WPnew.ru" title="RSS-подписка блога WPnew.ru" src="http://wpnew.ru/images/feed_48.png" border="0" width="48" height="48" /></a>
    [yandex]

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

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

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

  7. Может кто-то задаст вопрос: “А как поставить кнопку на сайт от Twitter? Или от Facebook? Аналогично! Просто в следующей строке добавляете точно такой же код, просто снова нужно будет поменять адрес картинки, текст и главное ссылку, куда ведет картинка. То есть, вместо RSS, для Twitter, к примеру, у меня код выглядит следующим образом:
    <a href="http://twitter.com/wpnew" target="_blank" rel="nofollow"><img alt="Я на Twitter | Подписаться на меня" title="Я на Twitter | Подписаться на меня" src="http://wpnew.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/wpnewru" target="_blank" rel="nofollow"><img alt="Добавить в Google Reader" title="Добавить в Google Reader" src="http://wpnew.ru/images/google_48.png" border="0" width="48" height="48" /></a>

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

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

Поставить кнопку

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

кнопка wordpress

[yandex]

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

<div align="center">

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

</div>

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

Выравнивание кнопки на сайте

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

Новый марафон 2.0 от WPnew
С уважением, Пётр Александров.
Подпишитесь на бесплатные уроки

Понравился урок? Вы не хотите пропускать новые бесплатные уроки по созданию, раскрутке и монетизации блога? Тогда подпишитесь на RSS или на электронный ящик в форме выше и получайте новые уроки мгновенно! Также можете следить за мной в Twitter.

Добавить комментарий

Такой e-mail уже зарегистрирован. Воспользуйтесь формой входа или введите другой.

Вы ввели некорректные логин или пароль

Извините, для комментирования необходимо войти.

57 комментариев

по хронологии
по рейтингу сначала новые по хронологии
Ирина http://www.orangmood.ru/

Спасибо за очередной подробный урок. Давно хотела поставить себе в блог симпатичную кнопочку RSS...

Но у меня ничего не выходит с адресом картинки. На жесткий диск в "мои рисунки" я ее скопировала. А что делать дальше? Для меня "залить через ФТП" - пустой звук 🙁

Автор
Пётр Александров

нужнео закинуть не в "мои рисунки" , а на сервер сайта, например, в ту же папку, где лежат файлы wp-content. wp-config и другие. тогда адрес к изображению будет: ваш_сайт.ру/картинка.jpg.

Багадур http://intup.ru

петр я хочу как у вас на сайте фидбернер подписку оформить (красиво) но не знаю как весь интернет обыскал не нашел помогите пожалуста! зарание спасибо!

com http://www.nalbatron.com/

А Я ищу найти интересную подписку и чтоб часть статьи приходила на электронную почту.

Ирина http://www.orangmood.ru/

Не имею ни малейшего представления, где даже искать подобные папки... Если сложно объяснить, то хотя бы "ткните носом" в какой-нибудь источник. А путей проще нет? Когда-то давно читала, что можно разместить нужную картинку в веб-альбоме Picasa и использовать присвоенный адрес...

Автор
Пётр Александров

Проще я не знаю... Если Вы это не знаете, где эти папки, я не знаю, как Вы создавали блог... Посмотрите этот урок, может поможет: http://wpnew.ru/sozdanie-bloga/razdel-5-perenos/perenos-bloga-wordpress.html

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

Ирина http://www.orangmood.ru/

Меня просто "перевезли" с бесплатной платформы, а я уже по готовому меняла шаблон и добавлла отдельные плагины. За ссылочку спасибо )

tom0rrow http://padh.ru

Полезная тема... Но я бы поменял картинки на "Я" и "G".

Автор
Пётр Александров

Угу, многие об этом говорят мне 🙂 Поменяю.

Вячеслав http://develop4you.ru/

http://vk4you.ru/

Вот даже примерчик покажу)

Автор
Пётр Александров

Еще бы для фейсбука, что-нибудь подобное, совсем супер было бы 🙂

Автор
Пётр Александров

СПАсибо оГРОМНОЕ! Как давно я искал что-то подобное, сегодня же поменяю! 🙂

Сергей http://biz-nano.ru/

Благодарствую за статью давно мучился с добавлением красивых кнопок подписок и твитов в сайдбаре

com http://www.nalbatron.com/

Освою твитер тогда после этого эта кпопка думаю должна повится на моем блоге.

Александр http://dragon-msk.ru

Мне кажется этот урок нужно было раньше написать, а то пришлось на других блогах читать как это все делать))

Автор
Пётр Александров

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

ContextProFi http://context-profi.com

Лучше поздно, чем никогда, но по моему скромному мнению, данный БЛОГ, является наиболее актуальным и интересным для желающих освоить WP

Автор
Пётр Александров

Спасибо!

Все это хорошо.Но кнопки можно поставить и через виджеты (текст).

paulshef http://insexpert.ru

попробую сделать и на своем сайте

Екатерина http://www.successbird.com

Доброе утро, Петр. У меня на теме WordPress была уже автоматически кнопка RSS как отдельная страница в правом верхнем углу, рядом с контакты, обо мне и т.п. Я ее удалила по глупости. Как мне ее теперь восстановить на то же место? В ваших уроках она на сайдбаре, но это не совсем что мне нужно. Спасибо за помощь!!!

Автор
Пётр Александров

Скачайте заново тему, откройте нужный файл и откройте сразу 2 файла: оригинал и Ваш - измененный. И поиграйте в игру найди отличия :). То есть найдите слово RSS и перекопируйте из оригинала в Ваш.

Дмитрий

Пётр помогите пожалуйста!!!

Я нажимаю на жучка, выбираю картинку, но строки 90 там и в помине нет!

Что мне делать???

Заранее спасибо!

seonior http://www.seonior.ru

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

Евгений

подскажите, как поставить кнопку twitter в яндекс бар?

Максим http://dvygun.ru/

А почему все писать в sidebar.php? Можно в виджетах добавить текст HTML.

И потом при смене шаблона ничего менять не надо.

Константин http://blogkonst.com.ua

Большое спасибо за полезную информацию! Все доходчиво написано. RSS кнопочка стала как надо!

Я вот создаю кнопку RSS но она не кликабельна ! Что делать ?

Елена http://7age.ru/

Благодарю за разъяснение, на моём блоге вообще не было кнопки RSS а теперь очень симпатично вышло.

Елена http://7age.ru/

Конечно пришлось повозиться, то адрес до картинки неправильный прописала, то просто вместо ленты пустая страничка открывалась.

Елена http://adoles.ru

Все понятно, только объясните мне где на WP в админке вставить кнопку (у меня есть целый адресс и она будет работать) Открываю Внешний вид- редактор, выбираю боковую панель и вижу стандартное сообщение и вверху "выберите тему для редактирования" и 5 вариантов. Вот круто, а что дальше? Варианты такие: Dewdrop, WordPressClassic, WordPresDefault, Leia, Modern Green Theme И в каждом есть боковая панель. Что делать-то?

Автор
Пётр Александров

Смотря какая тема у вас выбрана, туда и ставить.

Артур http://komputer-life.ru/

Вставляю в Sidebar, все по инструкции. Ошибок нет, а отображается ошибка: Parse error: syntax error, unexpected '<' in /home/a/arthurio/public_html/wp-content/themes/twentyeleven/sidebar.php on line 9.

Что делать?

Артур http://komputer-life.ru/

пока поставил кнопку в виде виджета

Исабаев Алем

Мда! я тоже экспериментировал с добавлением таких кнопок! но я сделал по другому! сначала сделал большую\белую картинку! добавил картинки соц. сетей, ну а дальше заключил в тег и указал координаты с ссылкой на социалку!Правда получилась большая конструкция! так что ваш вариант больше мне нравится.! можете со мной пообщаться по icq 627-031-597 (приятно будет мне со всеми вами пообщаться)

Артур http://komputer-life.ru

Через sidebar у меня не получилось. Сумел сделать через footer.php.

Влад http://pro-wordpress.ru/

Хорошая статья, всё от и до ))

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

Ирина http://lechatmagnifique.ru/

Надо занятся, а то у меня в сайдбаре уж очень некрасивая подписка. Просто квадратик.

Артур http://komputer-life.ru/

А можно, пожалуйста, код для яндекс.ленты?

Ильдар http://prit4i.ru/

Привет!

Супер! Все понятно, и доходчиво, и получилось сразу 🙂 Огромное спасибо.

Денис http://life-in-taxi.blogspot.com/

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

Ростислав http://vipvisa.com.ua/

как сделать чтобы кнопка отрабатывала три режима: в фокусе, нажата и просто стоит

Серый http://bestsportblog.ru

Привет всем. Сделал кнопки по этой статье.

На локальном сервере все отлично работает. На реальном же вместо кнопок квадраты и внутри них название, правда работают. Подскажите как исправить, чтобы изображение на кнопках появилось?

Автор
Пётр Александров

Залить файлы картинок на хостинг и прописать новые пути до них.

Ирина http://grimvizag.ru

спасибо большое за столь подробное объяснение )) пол дня искала информацию о том как красивые кнопки с картинками делать, но только у вас все так здорово и понятно расписано 🙂

Серый http://bestsportblog.ru

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

Руслан http://seominds.info/

Давно хотел сделать себе кнопочки, но всегда информации и знаний не хватало. Но благодаря этому уроку все получилось!

Спасибо!!

Ольга http://vnutren-garmonia.ru/

О! Спасибо большое за код, как поставить по центру! Записала себе. А то на многих блогах есть информация, как установить, а вот как привести к нормальному виду - нет...

Константин

Петр, а как поставить фон под кнопки? Допустим как у вас в виде конверта. Нигде не могу найти.

Спасибо Петр отличный урок.

Я хачу таким образом оформить меню сайта.

Только возникла проблема как опустить кнопку чуть ниже?

У меня первая кнопка практически прилипла к шапке, а каждая последующая к предыдущей.

Арарат

Здравствуйте, подскажите пожалуйста как сделать подписку на обновление как у Вас на сайте в правом в верхнем углу с такой же картинкой и кнопками

Серегй http://sergey-vnezapnii.ru/

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

Автор
Пётр Александров

Видеоурок так и называется: как сделать rss подписку на почту

Татьяна http://englishstory.ru

Спасибо большое! Кнопка RSS классная получилась) Только у меня через sidebar.php не получилось добавить. Вставила через виджет.

Алина http://effektivniedieti.ru/

Подскажите пожалуйста, как сделать чтобы перед кнопкой Подписаться в окошке было написано "Укажите свой e-mail", как у вас на этой странице в правом верхнем углу. Заранее благодарю.

Татьяна

Здравствуйте, Петр!

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

Автор
Пётр Александров http://wpnew.ru

Попробуйте нажать в браузере CTRL+F5 (обновление страницы со сбросом кэша), должно помочь.

Наверх Рейтинг@Mail.ru