Skip to content
 

Размещение баннеров на сайте WordPress

Как разместить flesh баннер на блоге WordPress.

установка флеш баннера на сайте WordPress.

 

Приветствую вас, дорогие читатели, на страницах блога «создание и продвижение сайта». В прошлой статье: «Создание баннеров за пять минут», я рассказала о том, как можно самостоятельно сделать баннер  в программе  Aleo Flash Intro Banner Maker. Сегодня я расскажу, о том, как вставить созданный баннер на сайте в статье, или в виджетах.

Прежде всего, нам нужно залить созданный в программе файл .swf на сервер. В интернете я прочитала, что можно его загрузить в библиотеку изображений. В административной панели блога на WordPress, заходим во вкладку «библиотека» — «загрузить изображение» — выбираем на компьютере файл .swf, жмём «загрузить», затем нажимает «редактировать». Флеш файл открывается в новом окне, здесь нужно скопировать в браузерной строке адрес файла, и сохранить его в блокноте.

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

Открываем программу для соединения с хостингом. В моём случае это программа  FaileZilla. В строку быстрого доступа в первом окошке пишем адрес вашего сайта с приставкой — ftp.  У меня это выглядит так — ftp.batalova62.ru.  В следующем окне пишем логин, который вы указали при регистрации хостинга, далее пароль, и в последнем окне – 21.

Все эти данные вы можете взять из регистрационного письма от хостинга, которое приходит сразу после заказа хостинга. Я надеюсь, вы сохранили это письмо. Жмём кнопку – «соединить».

Справа открываются папки вашего сайта. Нужно сделать следующее:  открываем папку domen, затем папку с названием вашего сайта, затем папку publik_html. Это и есть корневая папка блога. Нужно создать новую папку. Правой кнопкой мыши открываем окно, выбираем «создать новый каталог». Называем папку – «flash».

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

При создании  баннеров сохраняется два файла, один – в формате html, он предназначен для того, чтобы вы могли открыть его в редакторе (например Notepad++) Узнать размеры баннеров, что то отредактировать. Этот файл весит 1 кb. А второй файл весит намного тяжелее, и имеет расширение .swf  Вот этот файл необходимо закачать на сервер. Выделяем его, клик правой кнопкой мыши – «закачать на сервер».

Я в статье о создании баннеров не сказала, как вы должны назвать свой баннер, это не имеет принципиального значения, одно важно, чтобы название состояло из латинских букв.  Например, вы назвали — banner.  Тогда сохранённый файл будет выглядеть так – banner.swf. Если же вы назвали файл русскими буквами, то следует его переименовать, перед закачкой в корневую папку блога WordPress.

Если вы всё сделали правильно, то ваш баннер появится по адресу: http://sait.ru/flash/banner.swf — где вместо sait.ru вы вставляете адрес вашего сайта. Проверили? Если всё в порядке, то можно закрывать программу FaileZilla, и приступать к  размещению флеш баннера на сайт. Я дам несколько кодов, для вставки флеш баннера на блог, не забудьте подставить в код свои значения:

  • Адрес баннера (вы его должны были сохранить в блокноте)
  • Ширина баннера в пикселях
  • Высота баннера в пикселях

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

Ссылку на страницу перехода вы указываете в программе, при создании баннеров, но если нужно указать целевую рекламную страницу, то в коде нужно добавить  ?link1=ссылка». Вместо слова ссылка указывайте адрес страницы, на который совершается переход. А сам код будет таким:

Если понадобится код с прозрачным фоном:

В установке флеш баннера, есть один существенный недостаток, его не увидят посетители, у которых не установлен Adobe Flash Player . Так же его не увидят те, кто просматривает ваш блог с планшета. В этом случае рекомендуется сделать картинку заглушку, то есть заменяющую флеш баннер, для таких посетителей. Картинка должна быть такого же размера, что и баннер, и сохранена в формате – gif.  Тогда нужно установить следующий код:

Если по какой то причине у вас не работает первый, короткий код, то попробуйте вот этот более расширенный:

Вообще существует несколько методов вставки флеш баннера на сайт:

  • Двусоставной метод вставки flash-ролика
  • Метод вложенных объектов
  • Метод Flash Satay
  • Внедрение с помощью SWFObject

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

При копировании кода, подстановке своих данных, будьте предельно осторожны и внимательны. Потеря одной скобочки, или кавычек, сделает код не рабочим. Так что внимательно проверяйте всё ли на месте, правильный код избавит вас от того, что баннер не захочет отображаться на блоге. А ещё лучше, замените все кавычки в скопированном коде. Переведите клавиатуру на английскую раскладку, и в верхнем регистре буква «Э» — даст «правильные» кавычки.

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

Если нужно вставить код не в виджет, а в статью, то делаем это в текстовом редакторе для добавления записей, во вкладке «Текст».  Если же по каким то причинам флеш баннер не отображается на блоге, то не нужно отчаиваться, есть ещё один простой но надёжный способ установить флеш баннер на сайт WordPress. Этот способ называется плагин — WP-SWFObject. Этот плагин имеет настройки, позволяющие вставлять не только флеш анимацию, но и видео ролики с YouTube.

Ещё вы можете сгенерировать готовый код онлайн, по адресу: http://www.artbanner.com.ua/generatori/generator-koda-flash-bannera.html  Для того, чтобы получить готовый код для вставки флеш баннера на сайт, нужно ввести в окошко адрес вашего флеш баннера, ширину в пикселях, и высоту в пикселях.

Вот и всё, что я хотела рассказать вам о том, как вставить флеш баннер или открытку, сделанную в программе  Aleo Flash Intro Banner Maker, на блог. Я постаралась написать подробно, что бы было понятно для новичков. Но если у вас возникнут вопросы, то задавайте их в комментариях. Вы так же можете прочитать статью — как сделать баннер в фотошоп, и как сделать шапку для сайта или баннер в программе XHeader.

С любовью и уважением Баталова Ирина

Я хочу быть в курсе событий на сайте!

Подпишитесь прямо сейчас, и получайте обновления на свой E-Mail:

Ваш E-Mail в безопасности

Google

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

  1. А я банеры всегда закидывала в яндекс фотки, от туда же и брала код потом :))) На хостинге сохраняю только легкие, обработанные картинки… И думала, что так правильно. Оказывается еще есть и несколько способов! Ох, Ирина… открыли глаза вы мне! 😉

  2. Я так ждала эту статью. Но у меня не загружается файл в библиотеку Файл «банер.swf» не удалось загрузить из-за ошибки
    Извините, тип этого файла не разрешён из соображений безопасности. И мне ничего не понятно — я супер чайник-самовар. А так хочется красоту на блоге!

  3. Ирина, а код заглушки куда вставляем?

    • А ты скопируй код, который я дала, там есть адрес картинки, это и есть заглушка. Делаешь картинку, загружаешь её в библиотеку, и копируешь адрес картинки, а затем вставляешь этот адрес в код, вместо слов — адрес картинки.

  4. Надо будет разобраться с баннером и его установкой. Спасибо, Ирина.

  5. Ирина, Ирочка, Иришка! У меня получилось! Вы такой хороший учитель! Благодаря Вам я установила FileZilla (очень боялась) :shock:Вашими кодами воспользоваться не получилось, сгенерировала онлайн))) Посмотрите, пожалуйста ❗ А еще сегодня поставила социальную карусель, сделала это после знакомства с FileZilla 😉

  6. Так выходит, создать баннер намного легче чем разместить на блог?!
    Ирина, сегодня последний день марафона и я решил обойти всех, как в первый день. Начал с конца списка. Галина Нагорная порадовала видами Карпат и Львова. Чудесные места! Пойду дальше!

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

  8. Таак, коды!)) Придётся тогда и баннер делать, чтобы протестировать.

  9. Ирина!Ну вот и я благодаря вам освоила программу FileZilla,а то все никак руки не доходили.Еще бы и блокнот Noterad++ освоить, тогда будет все полном ажуре.Очень понравился ваш стиль написания статьи, объясняете все мелочи.Это очень важно для начинающих веб мастеров.

  10. Бесплатный совет: заведи у себя в блоге рубрику типа «самые горячие обсуждения» или что-то в этом роде. Там можно будет комментировать самые обсуждаемые темы блога…

  11. Ирина, спасибо за код для размещения банеров и за сервис создания, отдельное.

  12. Интересно читать, спасибо

  13. Юлия:

    А почему у вас нет заглушки в виджете сверху справа там, где «Получить подарок»?
    А в виджетах заработок в интернет и посмотри бесплатно похоже flash-баннеры, но они проигрываются, а верхний у меня в браузере ругается на Adobe flash — в чем здесь причина? Смотрела через исходный код, но два последних это не флеш баннеры.

    • Верхний баннер у меня обычная статическая картинка, не флеш. А вот почему она не отображается, и причём здесь Adobe flash не знаю. Для отображения картинки адобе не нужен. Наверное это сигнал мне, что пора поменять этот старый баннер на новый 😉

  14. Создать баннер проще, чем его на сайт вставить 🙂

  15. Статья что надо! Я вообще еще не вникала в этот вопрос, баннер для меня — темный лес :smile:. Но теперь буду потихоньку выходить из чащи, надеюсь, что с такими подробными советами все у меня получится

  16. Собственно все понятно — флеш баннер теперь (после прочтения поста) установить себе на блоге WordPress даже чайник.
    Но вот было бы гораздо удобнее читать публикацию, если была бы реализована подсветка кода — при чем, я вижу, что вы исходники даете уже не первый раз.

    • @Юрий Йосифович, коды хранятся у меня в блокноте. Я уже давала некоторые из них, в статье «игры для сайта». О том как вставить на сайт флеш игры, плееры и прочие развлекательные штучки. А про подсветку — спасибо, постараюсь найти время и сделать коды с подсветкой. ➡

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

        По поводу же хранения кодов — для меня удобно использовать AkelPad с плагинами, там и подсветка синтаксиса есть, понятное дело, что если код html — то храним в html, если же css — значит в css.

        Вы правы и в том, что не все знают как работает флеш и как его подключить к сайту — а ведь с помощью его можно делать очень красивые эффекты и фишки на сайте!

        • @Юрий Йосифович, а про какую подсветку идет речь?Похо же,что что-то интересное,но я не пойму

          • @Олеся Сазонова, имеется ввиду подсветка синтаксиса. Для чайников это без разницы — только красота. А вот понимающим людям это полезно тем, что можно сразу разобраться где какие операторы используются, с какими функциями имеем дело и возможно есть ли смысл использовать этот код — или лучше найти более оптимальный.

          • @Олеся Сазонова, Юрий детально все описал в своем комментарии, просто почитайте его внимательно а не по дыогонали

        • @Юрий Йосифович, а я привыкла в Noterad++ работать, хотя по моему на моём компе и AkelPad установлен, нужно найти эту программку и разобраться что к чему. А подсветку чуть позже сделаю, сейчас отстаю по графику по своим основным пунктам. ❓

  17. Размещаю баннеры от Гугла!) Они сами обновляются и ничего никуда прописывать не надо! Только скрипт Адсенса и всё, готово)))
    А так необходимо закидывать баннеры на свой хостинг, ибо так быстрее, чем на каком-то облаке файлов!) А если облако зависнет… 😡 😡

  18. Ирина,помогите,поставила баннер в сайтбар,а он не во всех рубриках отображается,чтоэто может быть? Как это исправить

  19. Ирина как всегда спасибо за пост.
    Кодами обязательно воспользуюсь,очень нужная вещь.

  20. Баннер установился, а вот ссылка на целевую страницу — нет. Копирую ваш код с ?link1=, но ссылка не появляется:(((

    • Доброго здоровья, вам! Слишком мало информации в комментарии. Вы установили баннер, а он не даёт перехода на целевую страницу? Правильно я вас поняла? Проверьте внимательно код, замените все кавычки в коде. Для установки «правильных кавычек» нажимайте клавишу «Э» только на английской раскладке клавиатуры, верхний регистр. Теперь, посмотрите, правильно ли у вас вставлен адрес страницы, куда должен совершаться переход, взят ли адрес в правильные кавычки. В коде важно каждая деталь, и если что то утерялось с кода, то он работать не будет.

  21. Приветствую!
    У меня тоже самое как и у Дачницы. Кавычки какие только не ставил, блог автоматом подставляет вот такие »
    Использовал код, что бы можно было и с телефона и с компьютера. С телефона ссылка работает, с компьютера нет.
    Может есть еще какие варианты? Хотя сам код хорош, маленький и удобный.
    Надеюсь на Ваш ответ. а пока поищу еще варианты.

    • Роман, попробуйте отредактировать код в программе Notepad++, прописав правильные кавычки, а затем вставлять готовый код в виджет. Если вы вставляете код в статью, то редактор wordpress будет автоматически изменять его, для вставки баннеров в статью лучше всего использовать специальный плагины, который позволяет вставлять рекламные коды без изменений. Вот их названия: Header and Footer , Magic Action Box , New Adman, Post Layout Pro, Ad Injection, Quick Adsense Setting
      А вот статья, в которой я подробно описала как установить один из таких плагинов на сайт — http://batalova62.ru/ustanovka-reklamny-h-blokov-i-formy-podpiski-v-stat-i-sajtahtml
      Надеюсь вам поможет эта информация. Ещё есть один способ, сгенерировать готовый код, я о нём написала в конце этой статьи.

Написать отзыв

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: