Как сделать простой виджет для главной страницы Яндекса
Недавно я делал виджет, который пользователь может разместить на своей главной странице Яндекса. Здесь я опишу технические детали реализации простого виджета, показывающего информацию из внешнего источника (сайта).
Цель виджета — показывать все виды пиццы с сайта CheeseCafe в виде картинок, названий и ссылок на онлайн-заказ.
Виджеты для Яндекса создаются очень просто: создается почти обычный XHTML-документ, в котором содержатся данные/скрипты, либо методы для загрузки данных. В моем случае сам виджет будет только оболочкой, а данные будут загружаться извне.
Так как сайт-донор отдает информацию только в виде обычных веб-страниц, то придется добавить промежуточное звено: скрипт на сервере, который спарсит страницу каталога и выделит оттуда наименование, изображение и ссылку на каждое наименование каталога. Затем сформируем XHTML-документ, который будет подгружаться при загрузке виджета.
После просмотра документации яндекса стало ясно что код виджета будет таким:
1 2 3 4 5 6 7 8 9 10 11 12 |
<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:widget="http://wdgt.yandex.ru/ns/"> <head> <meta name="title" content="Пицца от CheeseCafe в Пензе" /> <meta name="description" content="Быстрый заказ пиццы в Пензе" /> <meta name="src" content="http://kereal.ru/widget/widget.html" /> <meta name="height" content="260" /> </head> <body> </body> </html> |
В этом документе содержатся описательные meta-теги виджета. Ключевым является атрибут src, значение content которого содержит ссылку на файл с данными, который будет предварительно подготовлен. Данные будут загружены в тело этого документа (между тегами <body/>).
Для легкого парсинга я использовал библиотеку phpQuery.
Код для парсинга каталога с пиццами, если выбросить проверки и обработку ошибок может выглядеть примерно так:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<?php define('SITE_URL', 'http://cheesecafe.ru/'); define('PIZZA_URL', 'http://cheesecafe.ru/pizza/'); require('phpQuery.php'); function get_products() { $page = phpQuery::newDocument(file_get_contents(PIZZA_URL)); $products = $page->find('.products-list > .product'); $out = array(); foreach ($products as $product) { $out[] = array( 'title' => trim(pq($product)->find('a.detail-link > h2')->text()), 'image' => pq($product)->find('a.detail-link img')->attr('src'), 'uri' => pq($product)->find('a.detail-link')->attr('href') ); } return $out; } function cache_data($products) { $wdata = file_get_contents('data-tpl.html'); $out_data = ''; foreach ($products as $product) { $out_data .= ' <li class="product"> <div class="image"><a href="'.rtrim(SITE_URL, '/').$product['uri'].'" title="«'.$product['title'].'» — заказать сейчас!" target="_blank"><img src="'.rtrim(SITE_URL, '/').$product['image'].'" alt="'.$product['title'].'"></a></div> <div class="title"><a href="'.rtrim(SITE_URL, '/').$product['uri'].'" target="_blank">'.$product['title'].'</a></div> </li>'; } return file_put_contents('widget.html', str_replace('{list}', $out_data, $wdata)); } if (cache_data(get_products())) echo 'cached'; else echo 'fail'; ?> |
Собственно, этого и достаточно для backend’a виджета. На выходе получается HTML-файл со сграбленными данными сайта, URI которого указан в коде виджета (атрибут метатега src). Я использовал шаблон data-tpl.html, который является обычным HTML-документом, содержащим все стили и скрипты виджета. Скрипт парсинга я добавил в cron, чтобы данные обновлялись каждые сутки.
Естественно необходимо поработать над дизайном, графикой, стилями и скриптами виджета, которые будут расположены в подгружаемом файле с данными (data-tpl.html в данном случае). Внутри этого файла необходимо загрузить скрипт WidgetApi.js
1 |
<script type="text/javascript" src="http://img.yandex.net/webwidgets/1/WidgetApi.js"></script> |
Этот скрипт дополнительно загрузит библиотеку jQuery, что для меня оказалось очень удобным. Данные я решил представить в виде карусели, для чего использовал jQuery-плагин jCarousel Lite.
Далее необходимо все это скормить Яндексу. На странице добавления виджета выбираем тип XHTML, закачиваем виджет-оболочку, заполняем остальные поля, следуем простым инструкциям и смотрим результат.
Мой результат выглядит так:
Ниже готовый виджет, который получился у меня. Теперь можно выбирать пиццу от CheeseCafe прямо на главной странице яндекса. Пользуйтесь и успешной разработки виджетов! 😉
UPD
Виджет перестал работать по причине прекращения работы сайта cheesecafe, откуда получались данные.
Меня можно нанять. Напишите мне на эл. почту [email protected]
Комментарии записи «Как сделать простой виджет для главной страницы Яндекса»
Добрый день, скажите пожалуйста как связаться с админом сайта? Писал на емайл не ответили.
В правой колонке сайта есть ссылки на профили на других сайтах. Напишите там или попробуйте еще раз на почту, указанную там же, в правой колонке.
Здравствуйте. Как с вами можно пообщаться вне комментариев, нужен совет.