Донецкий техникум промышленной автоматики

Як поставити кнопку на сайт або блог (RSS, Twitter, Facebook та інші)

Часто на пошту приходять листи, де читачі запитують, як поставити кнопку на сайт? Ні, мова не йде про кнопці від В контакті або фейсбук (до речі про кнопку "Мені подобається" від 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 = "https://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 - виводить зображення, для цього міняємо адресу зображення https://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 =" https://wpnew.ru/images/feed_48.png "border =" 0 "width =" 48 "height =" 48 "/> </a>

    [Yandex]

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

    <Img alt = "RSS-підписка блогу WPnew.ru" title = "RSS-підписка блогу WPnew.ru" src = "https://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 =" https://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 =" https://wpnew.ru/images/google_48.png "border =" 0 "width =" 48 "height =" 48 "/> </a>

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

Ось що вийшло у мене на FanBar.ru:

Ось, про всяк випадок, шматок коду, як я вставляв все це в WordPress, в сайдбар:

[Yandex]

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

<Div align = "center">

а після останньої кнопки

</ Div>

Це буде виглядати ось так:

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

Підпишіться на безкоштовні уроки

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

Як зробити RSS на блозі?
Або від Facebook?
Ви не хочете пропускати нові безкоштовні уроки по створенню, розкрутці та монетизації блогу?