главная / Ваши деньги / Заработок в интернете / Как разместить рекламный баннер в статье?

Как разместить рекламный баннер в статье?

Здравствуйте мои дорогие!

По просьбам читателей, которые прочитали мои предыдущие статьи «Заработок в интернет новичку — путь чайника» и «Как создать сайт или блог быстро и легко?», опишу процесс размещения рекламного баннера на своем сайте.
Как вы уже поняли, я имею некую склонность, к подаче, в какой то степени, излишней информации по теме, но думаю, что людям не сведущим в бизнесе на информации, и в рекламе в частности, будет полезно мое, возможно, многословное отступление.
Для начала давайте определимся: что называть сайтом, а что блогом?

«Как его не назови,- хоть и горшком, главное в печку не ставь!»,
или «АБЫРВАЛГ» в действии.

Важно понимать, что абсолютно не важно как вы называете свой сайт или свой блог — по сути это одно и тоже.
Блог это информационный ресурс в сети интернет, или его часть, — сайт, или его часть, с определенными характеристиками изложения информации.
То есть когда вы говорите «-Хочу сделать блог», то правильнее было бы сказать «-Хочу сделать сайт в виде блога».
Но в жизни, мы привыкли все сокращать, — наследие у нас такое, — поэтому мы «делаем блог». Теперь понятно причем здесь «АБЫРВАЛГ»?
Скажу кратко и правильно: Блог- это один из видов сайта или его части.
В моих статьях, для усвоения информации, эти два понятия являются практически синонимами.
Всё, на этом уяснили — и больше к этой теме возвращаться не будем!

Давайте же теперь определимся: что же такое баннер?
И зачем это чудо нам нужно на нашем сайте?

Сразу оговорюсь, что для целей этой статьи мы будем оперировать понятиями имеющими отношение к сети интернет.
А то можно начать говорить о баннерах вообще (типа билбордов вдоль дорог).
И хотя тема схожая, и назначение, и определение у баннеров в этих разных областях эдентичное, но здесь не о них, а только о сети интернет.

Итак баннер — это графическое изображение, различного формата и формы, с текстом или без, передающее информацию рекламного характера.
И раз баннер является рекламой, то служит он для привлечения клиентов, или посетителей, на ресурс который рекламирует.
Любая реклама должна приносить доход, либо рекламодателю, либо владельцу места размещения рекламы, а бывает, что реклама приносит доход обоим.
Поэтому размещение баннера на своем сайте это, кроме возможности рекламировать свой товар (или партнерский), еще и есть первый способ монетизации вашего сайта. Например при прямой продаже места на вашем сайте под баннер рекламодателя.
А еще бывают специальные информационные баннеры, которые служат для привлечения внимания посетителя к определенной, по мнению владельца ресурса — очень важной, информации.

А, вообще, какие бывают баннеры?Сколько места они занимают? Разберем:

Сегодня, в наш продвинутый медиа век встречается огромное множество разновидностей баннеров в сети.
Вы можете увидеть банеры разного размера, формы и содержания -от простых, статичных, до анимированных, видео, озвученных, или звуковых, а то и прямо таки целых баннерных фильмов.
Что называется — кто во что горазд.
Однако, для стандартизации рекламных баннеров, для удобства последующего размещения на любом ресурсе, ну и конечно для удобства «изготовления» баннеров дизайнерами, а также использования в различных рекламных компаниях и стандартизации оценки стоимости, как самого баннера, так и места на сайте под его размещение, в рекламном сообществе сети интернет было принято несколько стандартных размеров и форм баннеров. В основном, это прямоугольники таких вот размеров как на рисунке:

banner_razmer_redko_1 banner_razmer_chasto_1
<
>
Конечно, далеко не все их придерживаются.
И согласитесь, это было бы странным, ведь это путь к полной стандартизации творчества художников и дизайнеров, что полностью «иссушит» их творческий порыв, а этого допустить никак НЕЛЬЗЯ!
А ведь сеть интернет это в первую очередь именно визуальная среда, и только потом аудио или звуковая.
Однако, для удобства…, выделяют основные распространенные и часто встречающиеся в использовании размеры баннеров в интернете.

И вполне естественно, что многие сайтостроители учитывают самые распространенные и часто используемые размеры баннеров при создании своих сайтов и составлении шаблонов для сайтов, которыми мы пользуемся, покупая их, или получая бесплатно, скачивая их из сети.
Поэтому мы, в своей сайтостроительной деятельности также будем иметь ввиду и пользоваться именно такими, самыми распространенными, размерами. И даже если какой-то баннер, который вам предстоит разместить у себя на сайте, будет немного не соответствовать этим размерам (ну на пару, тройку, -до пяти, шести пикселей в любую сторону)- в этом ничего страшного нет, и ниже по тексту и вот тут я объясню почему.
Во многих современных шаблонах уже предусмотрены определенные места для размещения баннеров, а при настройке некоторых шаблонов в вашей CMS даже существуют специальные поля предназначенные для размещения рекламных баннерных ссылок, под определенный размер баннеров, что обычно указано в инструкции к использованию шаблона сайта. Но для корректного заполнения этих полей или форм все-таки необходимо знать некоторые особенности и правила составления и размещения рекламных баннеров и ссылок.
А некоторые, как правило сложные и платные шаблоны, с адаптивным дизайном, способны сами изменять размеры отображаемых картинок, в том числе баннеров, в определенных местах сайта, при формировании страницы для отображения на вашем том или ином устройстве.

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

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

Структура рекламного баннера в сети интернет состоит, как минимум, из двух частей.

Давайте рассмотрим структуру рекламного банера в сети интернет на примере простого, статичного баннера, без анимации:

Кстати, это полностью функционирующий баннер — можете по нему перейти, если нажмете — содержимое откроется в новом окне :-)

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

Обратите внимание на размер рекламной картинки этого баннера — 728*90 пикселей, а текстовое поле статьи, в которой этот баннер размещен, гораздо меньше. Об этом немного ниже.

Картинка рекламного баннера, в одном случае, может быть сохранена на вашем сайте, то есть когда картинку баннера вы сохраняете себе на сайт в медиафайлы (в случае, если для создания сайта вы используете CMS WordPress).
И существует второй вариант, когда картинка не сохраняется на ваш сайт, а остается на ресурсе вашего рекламодателя, при этом ресурс рекламодателя и непосредственно сама картинка баннера, должна быть доступна для загрузки в течение всего времени размещения баннера у вас на сайте.
В данном, рассматриваемом случае — на моем сайте, баннерная картинка подгружается в момент формирования этой страницы для вывода на ваш экран с сайта рекламодателя, тоесть не находится в медиафайлах у меня на сайте.
При этом необходимо отметить, что тема используемая на моем сайте учитывает размер отведенный под размещение баннера в статье и сама пытается «ужать» картинку баннера под имеющийся для отображения баннера размер поля на сайте.

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

Вторая часть баннера — это ссылка, на страницу или ресурс рекламируемый баннером, для перемещения посетителя при его подтверждении исполнения побуждающего действия рекламы на баннере.
О! Как я вам завернул?
Можно и проще: вторая часть — это ссылка которую мы не видим, но по которой посетитель перемещается на страницу ресурса рекламируемого баннером, при клике(нажатии) на баннер указателем мыши, а в случаях просмотра баннера с мобильного устройства — тапом (нажатием) пальцем (стилусом,ну или….у особо одаренных бывает и тапком) по экрану.

Ссылка эта имеет, приблизительно, следующий вид:

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

Именно подобные адреса и ссылки мы и будем использовать для размещения рекламного баннера у себя на сайте.

Размещение рекламного баннера на своем сайте сводится в итоге к размещению в необходимом месте статьи или другого участка сайта (хедер (header), контент (content), сайдбар (sidebar), футер (footer)) вот такой конструкции, состоящей из следующих тегов:
Код для размещения баннера
Здесь содержимое ССЫЛКА НА РЕКЛАМИРУЕМУЮ СТРАНИЦУ — меняем на рекламную ссылку; а ПУТЬ К КАРТИНКЕ БАННЕРА — Меняем на адрес размещения картинки баннера(кавычки должны остаться).

Все, размещение простого рекламного баннера закончено.

Размещение простого анимированного баннера ничем не отличается от описанного в этой статье способа.
Только картинка в этом случае будет анимированной (например в формате Gif).
А вот о размещении сложного баннера с видео и звуком поговорим немного позже, потому как способы их размещения немного отличаются от размещения обычных баннеров, и это другая и большая тема.

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

[wysija_form id=»1″]

А теперь, для прочитавших этот пост до конца, у меня имеется маленький бонус:

Бывает так, что размещенный баннер выходит границами за поле отведенное ему на сайте. Да! Это то о чем мы с вами говорили ранее. При чем, если размер баннера не совпадает с размером отведенного места более чем на 20-30 пикселей в большую сторону, что совсем неприятно, и на сайте смотрится как «робот Вернер разобравшийся по пути преследования космических пиратов в коридорах времени». «Х-А-Х-А-Х-А»,- скажете вы, но решение в таком случае должно быть кардинальным -от изменения размера картинки рекламного баннера никуда не деться, со всеми вытекающими последствиями обработки картинки, а иногда и просто отрисовки другого баннера по необходимым вам размерам.
А вот в случае отклонения размеров баннера на 5-6-10 пикселей и менее, есть одна хитрость — баннер можно «упаковать» в так называемую «коробочку» — блок с помощью тега <div> (конечно в каждом случае необходимо, учитывать не пострадает ли содержимое баннера, и будет ли баннер выглядеть также красиво как и прежде от такого «оптического сжатия»).
Делается эта операция, ну… примерно так:
Код для размещения баннера в теге div
где width= «480» нужная ширина баннера в пикселях исходя из имеющегося места (в данном случае 480 пикселей), ну а height= «85», соответственно, нужная вам высота баннера в пикселях исходя из имеющегося места (в данном случае 85 пикселей).

Давайте рассмотрим немного подробнее операцию размещения рекламного баннера, на сайте сделанном в CMS WordPress, на наглядном примере в картинках:
Размещать будем рекламный баннер партнерского сервиса по продаже инфопродуктов «Петр 1»
Вы можете открыть новое окно и прямо повторять то что я вам сейчас покажу:
Для начала переходим по ссылке на партнерский сервис «Петр 1»;
Сайт партнерки Петр1 главная
Регистрируемся
После регистрации, входим с помощью логина и пароля, который вы указали при регистрации на сайт партнерской программы.
Входим на сайт Петр1 под своим логином
Теперь мы попали на главную страницу партнерской программы.
Слева в меню нам необходимо выбрать пункт»рефералы» — жмем на него, чтобы открылось подменю, в котором нам нужно выбрать пункт «промо», — выбираем его и попадаем на страницу промоматериалов партнерской программы Петр1.

Сверху видим вашу партнерскую ссылку.
Ваша партнерская ссылка
Ниже расположены рекламные баннеры партнерской программы. Их можно скачать к себе на компьютер для последующей работы, а можно и не скачивать, поскольку сервер работает надежно, и картинки баннера доступны для загрузки все время.
Да партнерская программа сама предлагает ссылки на свои баннера с загрузкой с их сайта, то есть по второй схеме (смотри выше).
Далее выбираем баннер, который подходит вам по размерам. Я буду ставить баннер размером 606*207. Вы же можете выбрать любой другой, который вам больше понравится по размерам и стилю.
Выбираем баннер по размеру и стилю
Чтобы получить полный код баннера партнерки «Петр 1» нужно кликнуть по выбранному баннеру, при этом код баннера скопируется в буффер обмена вашего компьютера (господа постарались облегчить нам жизнь) и вам останется только вставить этот код к себе на сайт в нужное место, но для вашего удобства, наверное нужно вставить этот код сначала в какой нибудь промежуточный рабочий текстовый файл, ну например созданный вами на рабочем столе программой блокнот, а потом уже перенести его оттуда на ваш сайт.
Код баннера в блокноте с div
как видно, тут код баннера уже заключен в тег <div>, и имеет такой шаблон:
код баннера в div короткий
Все вроде в порядке, и можно пользоваться таким кодом, но я бы все-таки добавил дополнительные атрибуты в полученный код, а именно:
1. — для того чтобы при клике на баннер сайт партнера открывался в новом окне, не закрывая вашего сайта нужно прописать атрибут target= «_blank»;
2. — для размещения баннера по центру выбранного блока нужно добавить атрибут align= «center»;
3. — для тех, у кого размер блока немного меньше чем баннер, необходимо добавить атрибуты ширины width= «***» и высоты height= «***» (вместо звездочек надо проставить нужные вам размеры в пикселях);
ну, и наконец, еще однин атрибут, который очень сильно влияет на отношение к вашему сайту поисковиков —
4. — rel= «nofollow» — атрибут для поисковых машин, а вот зачем его прописывать я расскажу подписчикам в следующих статьях.
Итак наш код баннера стал уже вот таким:
код баннера в div полный вид
Теперь открываем в браузере админку своего сайта на CMS WordPress.
Находим нужную статью, в которой хотим разместить баннер.
Переходим в текстовый режим редактирования статьи.
Находим место в статье где по-вашему должен находиться баннер.
Вставляем код баннера в статью
итак вставляем код на сайт ииииии получаем:

Та-а-Да-а!
Я надеюсь у вас все вышло?
Подведем итоги:
Мы научились размещать баннер на своем сайте, а также зарегистрировались в партнерской программе по продаже инфопродуктов «Петр1»
(даю наводку — срочно написать рекламную статью по партнерке «Петр1»)

А у меня на сегодня все. Всем «пока-пока», если понравилось, то не жалейте минутки — ставьте лайки, пишите комментарии, подписывайтесь на новости сайта и на канал в YouTube.

[wysija_form id=»1″]

Читаем далее:
2. Делаем свой сайт — Как создать сайт быстро и легко часть вторая:
-определяемся с темой сайта;
что такое локальный сервер и зачем он нужен;
-непосредственно делаем сайт на wordpress.
3. Выбираем хостинг для сайта на wordpress
4. Переносим сайт на хостинг
5. Регистрируемся в поисковых системах

Проверьте также

Рекламный билборд - призматрон

Как разместить несколько рекламных баннеров в одном и том же месте сайта, или «Баннерокрутилка».

Здравствуйте мои дорогие читатели! Этой статьей я продолжу тему о размещении рекламных баннеров на сайте. …

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

  1. А вот за эту статью большое спасибо! Уже сохранил ее на своем ПК.
    Это очень полезные материалы. Думаю, что перечитаю ее не один раз.

  2. Спасибо, Михаил за такой подробнейший обзор по работе с баннерами. Теперь не надо будет лазить по рунету и искать информацию. Знаем где взять если,что. Ждём продолжения!

  3. Спасибо, попробую как-нибудь ваш метод. А пока размещаю рекламные банеры в статьях при помощи плагина.

    • Лидия, не стоит использовать плагины там где, можно обойтись без них. Плагины нагружают сервер тем, что они используют базу данных (растет количество запросов в к базе данных) диск сервера, память, которой кстати на виртуальном хостинге распределено немного — на дешевых тарифах не больше 128М (64М обычно). Вы наверное, пока еще не получали ограничений нагрузки на сервер с вашего сайта. Это тогда когда по обращению к адресу сайта (или в админке) сервер вместо вашего сайта или страницы выдает 503 ошибку. Просто потом придется отключать с настроенного сайта плагины, которые будут давать пиковую нагрузку, а ведь без некоторых не обойтись. А вот размещение баннеров — это не ценность, чтобы использовать плагин. Ну разве, что вы продаете сантиметры на сайте — для отслеживания оплаты и автоматического размещения или отключения баннеров. Это конечно мое мнение.

    • Лидия здравствуйте! Предлагаю вам использовать не плагин, а скрипт. Для получения валидного кода скрипта можно использовать сервис представленный в моей статье

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

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

Яндекс.Метрика Рейтинг@Mail.ru Goon Каталог сайтов Каталог сайтов Всего.RU