[lux-rc.com]

Социальный виджет "ФОНАРЕВКА". Прочему это хорошо Вам?

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

И вот тут то появляется виджет "ФОНАРЕВКА". Добавляете код на страничку сайта и за три минуты получаете кнопку, вроде тех, что сейчас есть у всех социальных сетей. Посетитель жмакает на кнопку, и даже если он не зарегистрирован на форуме, в аккуратном всплывающем тултипе видит список тем Вашего раздела на фонаревке. Ну или любого другого раздела, где обсуждается близкие Вам темы и где Вы регулярно бываете. Решение? Однозначно!

Социальный виджет "ФОНАРЕВКА". Прочему это хорошо Фонаревке?

Допустим у Вас проект уже подрос и к Вам валит вал посетителей. Они находят Ваш сайт в гугле. Сарафанное радио разносит имя вашего домена и вы видите в статистике посещений, что не меньше трети Ваших гостей заходят прямым вводом адреса. Ведь всем будет только лучше, если Ваши, интересующиеся светом посетители в итоге узнавали о фонаревке и чаще ее посещали. Конечно можно повесить баннер. Самое простое решение. И самое плохое. Почему? Случайным людям, которые искали халявную музыку а по нелепой ошибке поисковика зашли к Вам на сайт будет глубоко пофиг на эту тему и тем более на баннеры, которые у Вас висят развесистой клюквой. Открыли, смотрят - не то. Сразу закрыли. Из этого следует, что вчитываться в содержание баннеров на Вашем сайте будут те посетилели, которым мягко говоря Вы небезынтересны. Это Ваши почитатели, лояльные клиенты, фанаты Вашего дела. И вот они видят баннер, а на нем написано непонятное "ФОНАРЕВКА". И что? Это звучит примерно как "Привет, тебе нравится что я делаю, а зайди ка еще вот сюда". Почему я должен туда идти? Зачем мне это надо? Что это вообще такое?...Именно поэтому на баннер по статисктие кликает от силы 1% посетителей. И то, чисто рефлекторно, потому что на нем фото сисек.

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


Виджет уже работает
http://fonarevka.ru
http://quazzle.com/content/
http://lux-rc.com/view.php

Добавляем виджет в свой блог или сайт



Виджет ФОНАРЕВКА торжественно готов. Принимайте. (на всякий случай прибейте историю или F5)

Пример - у меня на сайте. http://quazzle.com/content/...
Или тут (вариант с размещением внизу страницы) http://lux-rc.com/view.php.
Или вот на главной страничке фонаревки http://fonarevka.ru

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

<div id="luxrc-widget" data-api="http://fonarevka.ru/widget/fonarevka-jsonp.php?id=376" data-verb="В тему" data-site="http://fonarevka.ru" data-title="FONAREVKA.RU : ВСЕ О ФОНАРЯХ" data-set1="Главное" data-set2="Сейчас" data-ico="http://fonarevka.ru/widget/fonarevka.gif"></div>
<script type="text/javascript">(function(d){
var he,sc;
if(he=d.getElementsByTagName('head')[0]){
sc=he.appendChild(d.createElement('script'));
sc.setAttribute('type','text/javascript');
sc.setAttribute('src','http://fonarevka.ru/widget/widget.js');
}})(document);</script>


В таком виде код загрузит темы моего раздела. Понятное дело Вам это не нужно. Поэтому идете в свой раздел, из строки адреса понадобится один параметр - ID раздела (красным):

forum.fonarevka.ru/forumdisplay.php?f=258

Этот номер нужно скопировать в хвост параметра data-api, таким образом:

<div id="luxrc-widget" data-api="http://fonarevka.ru/widget/fonarevka-jsonp.php?id=258" data-verb="В тему" data-site="http://fonarevka.ru" data-title="FONAREVKA.RU : ВСЕ О ФОНАРЯХ" data-set1="Главное" data-set2="Сейчас" data-ico="http://fonarevka.ru/widget/fonarevka.gif"></div>
<script type="text/javascript">(function(d){
var he,sc;
if(he=d.getElementsByTagName('head')[0]){
sc=he.appendChild(d.createElement('script'));
sc.setAttribute('type','text/javascript');
sc.setAttribute('src','http://fonarevka.ru/widget/widget.js');
}})(document);</script>


Если так случилось, что сайт у вас до сих пор не работает в кодировке UTF-8, а допустим по старому в windows-1251, то нужно добавить еще одну мульку к адресу шлюза, выделено красным:

<div id="luxrc-widget" data-api="http://fonarevka.ru/widget/fonarevka-jsonp.php?id=258&en=windows-1251" data-verb="В тему" data-site="http://fonarevka.ru" data-title="FONAREVKA.RU : ВСЕ О ФОНАРЯХ" data-set1="Главное" data-set2="Сейчас" data-ico="http://fonarevka.ru/widget/fonarevka.gif"></div>
<script type="text/javascript">(function(d){
var he,sc;
if(he=d.getElementsByTagName('head')[0]){
sc=he.appendChild(d.createElement('script'));
sc.setAttribute('type','text/javascript');
sc.setAttribute('src','http://fonarevka.ru/widget/widget.js');
}})(document);</script>


На этом все. Вставляете на сайт - все работает. Виджет сам понимает в какую сторону открывать окно. Если кнопка болтается внизу сайта - окно будет всплывать над кнопкой.

Ну и на всякий случай приведу описание всех параметров виджета, может пригодиться (хотя лучше ничего не менять)

data-api - полный адрес JSONP сервиса. Фонаревочный шлюз понимает два параметра в строке адреса: id - айдишник раздела или форума (обязательно), en - кодировка (опция). Кодировка - важная вещь. По умолчанию шлюз перекодирует родную кодировку фонарвки (1251) в UTF8. Поэтому если у вас сайт UTF8, то не о чем беспокоиться. А вот если нет, то нужно обязательно указывать содировку Вашего сайта в параметре en для шлюза, ну например: fonarevka.ru/widget/fonarevka-jsonp.php?id=258&en=windows-1251

data-verb - Надпись на кнопке. Менять нельзя! Иначе виджет Вам отформатирует диск на компе. :-)

data-site - Сюда пишете адрес форума (корень)

data-title - Тут пишем название или слоган форума (будет висеть над списком тем)

data-set1 - Название первго списка (темы отмеченные тегом "top")

data-set2 - Навзание второго списка (обычные темы)

data-ico - Ссылка на файл иконки для кнопки. Менять категорически нельзя! Бренд - фонаревки :-)

Дерзайте. У меня во всех браузерах работает. Даже не поверите - кое как в IE7. В котором, к слову, нифига не работает ********

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

[lux-rc.com]

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

Прикрутил шлюз, который умеет довольно шустро парсить фонаревку и возвращает нужный XML:

Временный адрес шлюза
quazzle.com/temp/fonarevka.php?id= <тут должен быть код Вашего форума>

Вот что получается если натравить шлюз на мой раздел и раздел dsche:

http://quazzle.com/temp/fon...

http://quazzle.com/temp/fon...

А вот самый могучий раздел - основные обсуждения

http://quazzle.com/temp/fon...

Да, страницы он листать не умеет. Показывает только то, что вываливается на первой. Ну и визическое расположение неудобное. Сначала мы гоним довольно большую HTML в штаты, там парсим и обратно возвращаем клиенту в россию в виде легкого XML.

Но для начала тестирования виджета это хватит с большим запасом. А там быть может кто-то еще подключится. ;-)

[lux-rc.com]

прикрутил к тегу <thread> вложенный <ico>. Шлюз научил тянуть с фонаревки иконки тем. Иконки нужны, чтобы не изобретать свою графику для разделения тем в сплывающем окне, иначе все ссылки сливаются.

Окончательный формат XML теперь выглядит так.

В корне - обязательный тег <xml-api> (по законам XML он должен быть ровно один).

В нем - единственный пока тег <topics> (сделал на всяк случай, потом проще расширять API будет).

Внутри тега <topics> идут наши темы. Каждая тема - тег <thread id=XXX> с указанием ID темы.

Внутри <thread> следующие теги:

<desc> - содержит внутри текст названия темы целиком - ОБЯЗАТЕЛЬНО
<url> - fully-qualified ссылка на тему, ну т.е. начиная с http:// - ОБЯЗАТЕЛЬНО
<ico> - иконка темы, fully-qualified ссылка на картинку - ОБЯЗАТЕЛЬНО
<top/> - указан если тема из топа. Опция.

Вот и все. Я думаю для начала этого достаточно чтобы красиво и наглядно отрисовать темки в виджете. Одна неприятность - фонаревочные иконки все какие-то разные по размерам. Самая большая что насчитал 34x34. Уже многовато. А больше бывает?

[Scratch]

просто мало у кого тут есть собственные сайты )

[lux-rc.com]

 Сообщение от Scratch :

просто мало у кого тут есть собственные сайты )

ну и собственные разделы есть тоже мало у кого

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

Смотрите шире. Кроме разработчиков на сайте тусят дилеры и просто продаваны. Вот их реально много. И у всех у них есть свои сайты. У многих - свои торговые разделы на фонаревке. Если бы я был таким дилером, я бы хотел такую кнопку. И фонаревке будет от этого только лучше.

Вот к примеру мегапопулярный раздел FENIX глазами XML-API
http://quazzle.com/fonarevk...

[lux-rc.com]

Короче я спать. Давайте пока попробуем придумать короткий и емкий verb на двух языках, но или хотя бы на русском. Что-то конретное, понятное, вроде "Like", но в контексте этой кнопки.

Конректный пример. Кнопка живет на сайте дилера XXX. И у него же разумеется есть свой торговый раздел на фонаревке. Воспрос - какое слово должно быть написано на кнопке, чтобы всем было понятно - под ней - живые темы этого дилера на фонаревке? Размер - имеет значние. Чем короче - тем лучше.

[Scratch]

Flash

[Admin]

Live

[Admin]

lux-rc.com, Спасибо большое за помощь в реализации данного проекта, ибо это еще очень долго бы тянулось, хотя задача и не такая сложная.

[Admin]

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

[Admin]

или короткое название

Live Topic

[Admin]

Я вот тоже почти закончил писать некий виджет для Lux-RC, т.е. будет создана тема в разделе форума, например Новости на сайте люкс-рц, она будет привязана к модулю, а этот модуль будет при появлении новых сообщений отображать тему, как будто в ней появились новые сообщения и при нажатии на неё будет переходить на сам сайт люкс-рц к последним обсуждениям. При нажатии на плюсик рядом с темой можно будет увидеть последние комментарии с сайта люкс-рц ввиде таблички с сообщениями.

Получится некая информационная тема, для проверки новых комментов или при появлении новых обсуждений на сайте люкс-рц.

[lux-rc.com]

 Сообщение от Admin :

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

на эту тему не переживайте, "урезать" будем старедствами СSS уже на клиенте, отдавайте ему как есть, а мы разберемся.

[lux-rc.com]

Народ, а как вам такой верб - "Есть тема!"? Ну или "В тему!"?

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

[lux-rc.com]

 Сообщение от Admin :

или короткое название
Live Topic

Отлично! Если чуть перефразировать, то мы приходим к единому стилю "верба".

Ну русском - "В тему!"
На англ. - "Got topic!"

"В тему!" - забавная фраза. Сразу несколько смыслов и все что называется "в тему". Во-первых на уровне интуции - "в тему" - это значит по ссылке расположено что-то близкое к теме сайта. Так и есть! "В тему!" можно еще понять как "перейти в тему", а слово тема уже четко связано с понятием форума.

Теперь вся надежда на гениального selenopolis, нужна икона 20x20 пикселей в которой бы однозначно читалась символика фонаревки. Я в лоб заресемплил картинку с баннера фонареки - получилась какашка из пикселей. В лоб задачка не решается.

[lux-rc.com]

Кстати, в самом первом приближении виджет уже работает на моем тестовом домене. Кнопка есть, список качает. Т.е. идея в принципе работает. Осталось прилепить иконку на кропку и привести в порядок список. Если останутся силы сегодя - сделаю асинхронную загрузку.

Смотрим тут - http://quazzle.com/content

[togico]

При раскрытии списка "в тему" ползунок не работает. Только стрелками вверх\вниз. При попытке сдвинуть ползунком тянет весь список, как картинку.
UPD. Firefox

[lux-rc.com]

 Сообщение от togico :

При раскрытии списка "в тему" ползунок не работает. Только стрелками вверх\вниз. При попытке сдвинуть ползунком тянет весь список, как картинку.
UPD. Firefox

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

[lux-rc.com]

А как лучше "В теме" или "В тему" на кнопке?

[selenopolis]

"В тему" как то более объемно. Сегодня доделаю иконку. Вобщем Сергей, как ты и обещал - простой ресайз превратился в геморрой с паззлом на 400 пикселей;-)