Информеры для партнёрских сайтов

Jun 23, 2008 21:12

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

Информеры - это когда на сайте есть новости,  и хочется блоки со свежими новостями размещать на сайтах-партнёрах для привлечения трафика.

Чеклист получился довольно недлинный:
  • единая структура;
  • стили: префикс для названий классов, общий класс и раздельные классы для представлений;
  • разные форматы;
  • кодировка может быть разной;
  • ссылки наружу и таргет;
  • аргументы для модификации информера;
  • показ X новостей из последних X*2 новостей.
Ниже обо всём подробнее.

Структура

В целом структуру целесообразно делать одинаковой для всех вариантов представления. В крайнем случае, если определённый стиль информера не предполагает блока текста, можно отдать пустой параграф, но структуру лучше сохранить. Это избавит от неожиданностей при желании "немного поменять css", а также сделает возможным полностью отцепить всё оформление от самого информера и положить его в отдельную css'ку. Когда точно знаешь, что все информеры одинаковые внутри, это воодушевляет (вообще-то, когда что-то знаешь точно, это всегда воодушевляет ;).

Стили

Всё внешнее представление выносится в стили. Особое внимание нужно обратить на названия классов - они должны начинаться с какого-либо префикса, чтобы не смешаться со стилями сайта, на котором размещается информер. Общий для всех представлений класс можно назвать my-site-informer, а классы различного оформления - my-site-informer-compact, my-site-informer-full, my-site-informer-horiz и так далее. Довольно длинно, зато если на сайте партнёра два информера с вашего сайта, выполненные в разных стилях, их классы не перемешаются в неразборчивую кашу.

Формат

Нужно предусмотреть возможность получения информера как минимум в html и в виде ява-скрипта (достаточно document.write, главное не забыть заэскейпить "\r", "\n" и "'"). Случаи бывают разные.

Кодировка

Это удивительно, но на сайтах-партнёрах может быть кодировка, отличная от использующейся на вашем сайте UTF-8 ;) Необходимо предусмотреть возможность через аргументы в ссылке или каким-либо другим способом задать желаемую кодировку информера. windows-1251, utf-8... пожалуй, хватит.

Ссылки

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

Другие аргументы

Довольно удобно, если аргументами в ссылке можно задать количество новостей в информере. Стандартные блоки по 3. 5, 10 новостей - это отлично, но есть люди, которым нравятся другие числа ;-)

Если на сайте несколько разделов новостей, довольно просто сделать так, чтобы можно было лёгким изменением ссылки выбрать любой из них. Информер для двадцати разделов пишется так же, как и информер для одного, разница только в одной переменной. А партнёрам приятно.

Разброс новостей

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

Ну и примеры

css:

/* common style */

div.mysite-informer {
width: 100%;
text-align: left;
font-family: Tahoma, Verdana, Arial, sans-serif;
}
div.mysite-informer * {
margin: 0; padding: 0; border: 0; float: none;
line-height: 100%; color: black;
}

/* hotline style */

div.mysite-informer-hotline div.mysite-informer-post {
float: left; width: 20%; text-align: center;
}
div.mysite-informer-hotline div.mysite-informer-post p.mysite-informer-description {
padding: 5px 0.5em; margin: 0; font-size: 12px;
}
div.mysite-informer-hotline img {
 border: none; width: 125; height: 93;
}
div.mysite-informer-hotline a.mysite-informer-morelink {
display: none;
}
div.mysite-informer-hotline div.mysite-informer-post p.mysite-informer-date {
display: none;
}
div.mysite-informer-hotline div.mysite-informer-post h3 {
display: none;
}

html:



 alt="Orange sky with birds" />


Orange sky gets more than just a few clouds up there
class="mysite-informer-morelink">
подробнее »


Ссылка для получения информера из раздела сайта miracle
с 7-ю блоками новостей:

http://www.example.com/informer/miracle.js?style=hotline&charset=windows-1251&qty=7

чеклист, кусочки сайта

Previous post Next post
Up