Как сделать простой виджет для главной страницы Яндекса

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

Цель виджета — показывать все виды пиццы с сайта CheeseCafe в виде картинок, названий и ссылок на онлайн-заказ.

Виджеты для Яндекса создаются очень просто: создается почти обычный XHTML-документ, в котором содержатся данные/скрипты, либо методы для загрузки данных. В моем случае сам виджет будет только оболочкой, а данные будут загружаться извне.

Так как сайт-донор отдает информацию только в виде обычных веб-страниц, то придется добавить промежуточное звено: скрипт на сервере, который спарсит страницу каталога и выделит оттуда наименование, изображение и ссылку на каждое наименование каталога. Затем сформируем XHTML-документ, который будет подгружаться при загрузке виджета.

После просмотра документации яндекса стало ясно что код виджета будет таким:

<?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>

<?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">

<head>

</head>

<body>

</body>

</html>

В этом документе содержатся описательные meta-теги виджета. Ключевым является атрибут src, значение content которого содержит ссылку на файл с данными, который будет предварительно подготовлен. Данные будут загружены в тело этого документа (между тегами <body/>).

Для легкого парсинга я использовал библиотеку phpQuery.

Код для парсинга каталога с пиццами, если выбросить проверки и обработку ошибок может выглядеть примерно так:

<?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';

?>

<?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 .= '

<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

<script type="text/javascript" src="http://img.yandex.net/webwidgets/1/WidgetApi.js"></script>

1	<script type="text/javascript" src="http://img.yandex.net/webwidgets/1/WidgetApi.js"></script>

Этот скрипт дополнительно загрузит библиотеку jQuery, что для меня оказалось очень удобным. Данные я решил представить в виде карусели, для чего использовал jQuery-плагин jCarousel Lite.

Далее необходимо все это скормить Яндексу. На странице добавления виджета выбираем тип XHTML, закачиваем виджет-оболочку, заполняем остальные поля, следуем простым инструкциям и смотрим результат.

Мой результат выглядит так:

Виджет для заказа пиццы в CheeseCafe

Ниже готовый виджет, который получился у меня. Теперь можно выбирать пиццу от CheeseCafe прямо на главной странице яндекса. Пользуйтесь и успешной разработки виджетов! 😉

Пицца от CheeseCafe в Пензе

Быстрый заказ пиццы в Пензе

UPD
Виджет перестал работать по причине прекращения работы сайта cheesecafe, откуда получались данные.

Комментарии записи «Как сделать простой виджет для главной страницы Яндекса»

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

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

Здравствуйте. Как с вами можно пообщаться вне комментариев, нужен совет.

Как сделать простой виджет для главной страницы Яндекса

Пицца от CheeseCafe в Пензе

Комментарии записи «Как сделать простой виджет для главной страницы Яндекса»

Ваш комментарий