Обновления виджетов. Как добавить виджет на главную страницу Яндекса и настроить тему

Привет всем! Сегодня я выкроил немного времени, чтобы немного доработать оформление и работу блога: исправил несколько косяков верстки, добавил несколько малозаметных фишек, сменил фон и, главное, сменил логотип блога (просто взял перо и написал, а потом отсканировал). Так вот одним из улучшений было добавление картинки сайта на табло Яндекс.Браузера. Дело в том, что на табло Я.Браузера отображаются избранные или часто посещаемые сайты и Яндекс присваивает всем им одинаковый шаблон: какой-то фон плашки, favicon в кружочке и название сайта. Но я думаю, многие заметили, что некоторые сайты выглядят практически одинаково на табло, а у некоторых «личные» плитки.

UPDATE : Яднекс.Браузер недавно обновился и все старые настройки виджетов на табло перестали работать. Кроме того, ссылки на документацию по «API Табло» также изменились. Так что статью пришлось переписывать по-новому.

Например Яндекс , Google , Вконтакте , Rutracker имеют свои красивые легкоузнаваемые плашки, а остальные нет. Например выше на снимке видно, что такие маститые мэтры Сети как IXBT , Компьютерра и THG пока что не позаботились о такой детали, хоть и мелкой, но все же не лишней, учитывая тот факт, что очень многие сейчас пользуются именно Яндекс.Браузером.

Лично меня раздражают сайты с дефолтным оформлением плиток. Вот сейчас мы и разберемся как сделать своему сайту красивую плашку (виджет) для табло Яндекс.Браузера. Все очень просто:

В любом редакторе изображений создаем картинку в формате PNG. Ограничения по размерам картинок указаны ниже. Картинка должна иметь прозрачный фон. Картинку лучше сделать с логотипом сайта. Назовем ее logo.png .

Ограничения по размеру логотипа:

  • длинные горизонтальные логотипы - ширина до 300 пикселей, высота до 85 пикселей;
  • короткие горизонтальные логотипы - ширина до 250 пикселей, высота до 120 пикселей;
  • квадратные логотипы могут быть до 120 пикселей в высоту;
  • длина логотипа не должна превышать его ширину более, чем в 4,6 раза.

{ "api_version": 4, "layout": { "logo": "http://ваш.сайт/logo.png", "color": "#ffffff", "show_title": false } }

где
«logo»: «http://ваш.сайт/logo.png», — путь до картинки (причем именно с полным адресом картинки, только так заработал новый виджет;
«color»: «#fbfbfb», — фон плашки

Теперь картинку logo.png и файл manifest.json заливаем в корень сайта. А в код на всех страницах сайта между и добавляем следующую строку:

Вот и все. Теперь у сайта есть своя красивая плашка. Кстати, если она сразу не отобразилась — нужно удалить плашку сайта из табло, а потом заново ее туда добавить. У остальных пользователей она обновится при следующем открытии браузера и табло.

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

Если все же не работает, то почистите кэш сайта (именно сайта, чтобы новый файл корректно отдавался сервером). У меня и после этого не заработало. И помогло только удаление старого виджета из «Табло и добавление его еще раз. И вот, наконец-то, все стало как должно быть.


А, вот еще что: по видимому что-то в лесу сдохло, но в Яндекс.Браузере теперь нормальное табло, которое помещает в себе много плиток, расширяется, масштабируется. Ну прямо как в старой доброй «Опере» (кстати: самая нормальная реализация этого экрана), наконец-то дошли руки разработчиков доделать табло. Тут заметен забавный момент: попытались изначально сделать «не так, как у всех», внести, стало быть, «изюминку». Но этой изюминкой многие подавились и ругали Я.Б за то, что есть дурацкое ограничение по количеству плиток. Сколько их там можно было поставить? Восемь? Идиотизм, не правда ли? Но теперь можно увеличить количество виджетов. Я не знаю максимума, но 15 хорошо влезло. И зачем было мудрить, если все равно вернулись к виду «как у всех»? Понты да и только.

Ну вот и все. Я пошел придумывать новую статью.

Здравствуйте, дорогие читатели. Сегодня поговорим о Яндекс виджетах, о том, как настроить главную страницу Yandex.ru под себя и как привлечь дополнительных посетителей на блог, ведь стоимость раскрутки сайта с каждым днём растёт и приходится придумывать всё новые способы привлечения посетителей.

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

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

Чтобы настроить Яндекс под себя нужно на странице yandex.ru вверху выбрать в меню пункт «Настроить Яндекс»:

настройки яндекса

Затем можно убрать лишние виджеты или поменять их местами.

У себя я оставил только погоду и Яндекс Вебмастер, добавил виджеты блогов, которые я часто читаю и ещё несколько полезных сайтов, например, виджет сайта seobudget.ru, на котором отображается информация об апдейтах тИЦ, Pr и выдачи Яндекса.

Часть из этих информеров выглядят следующим образом:

Яндекс виджеты

Очень удобно заходить на стартовую страницу и видеть все новости, которые тебе нужны.

Можно самому создавать такие информеры для любых сайтов в кабинете разработчиков виджетов. Выбираете «Создать виджет» -> «RSS виджет», вставляете адрес блога и ссылку на RSS ленту.

кабинете разработчиков виджетов

Можно даже попробовать привлечь таким способом читателей на свой блог и немного раскрутить свой сайт. Для этого нужно создать информер и взять в своём кабинете «код для вставки в блог». Затем добавить этот код рядом с кнопками социальных сетей в конце каждого поста.

Если вы сами создаете информер, то в кабинете разработчика будет информация о среднем числе пользователей в день. То есть можно проследить эффект от виджетов и узнать сколько человек им пользуются. Выглядеть это будет следующим образом:

SEO блог Богданова Дениса

Установи этот виджет и узнаешь о появлении нового поста на сайте Pinzes.ru прямо на главной странице Яндекса.
добавить на Яндекс
Не забудьте закрыть от индексации 3 внешние ссылки на Yandex.ru, а то у него и так тИЦ уже 270000))). Я оставил одну внешнюю ссылку «Добавить в Яндекс», а ссылку с фотки и с названия блога сделал на внутренние страницы Pinzes.ru.

P. S. Если заработок на сайте уже надоел, то открой вклады в рублях в Ростбанке и живи на проценты. Если же денег ещё не заработал и вкладывать нечего, продолжай читать блог Pinzes.ru и учись зарабатывать дальше.

P. P. S. Если хочешь поставить себе уже готовые виджеты, то вот несколько примеров:

Shakin.ru
Isif-life.ru
Sidash.ru
Terehoff.com

Пришло время рассмотреть основные фишки, которыми будет обладать предстоящий релиз системы WordPress 4.8 (запланированный на 8 июня). Это первое серьезное обновление в текущем году, поэтому даже как-то интересно что припасли для нас разработчики. Предыдущий апдейт был достаточно масштабным, и мне лично понравился.

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

Перейдем непосредственно к списку основных фишек из под цифрой 4.8. Начнем с наиболее интересных.

Визуальный редактор в виджете «Текст»

В предыдущих версиях системы для данного виджета вы могли добавлять содержимое в HTML режиме (plain text). Тем, кто знает базовые основы верстки, не составляло особого труда использовать разные теги выделения текста. Теперь же это смогут сделать и все остальные пользователи WordPress 4.8.


Как видите, из элементов редактора доступны:

  • списки (нумерованный и нет);
  • ссылки;
  • выделение жирным;
  • курсив.

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

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

Виджет «Изображение»

Ранее в блоге рассказывал как — там обязательно нужны знания HTML. Приходилось лишний раз объяснять заказчикам и писать пример кода для реализации этой задачи. Через новый видежт в WordPress 4.8 все сделать будет гораздо легче.


Элемент содержит поле заголовка и кнопку загрузки картинки — вы можете выбрать ее с компа или медиабиблиотеки. Механизм стандартный для вордпресс админки (через всплывающее окно или перетаскивание). После в виджете отобразится превью + появится ссылка смены / редактирования изображения.

Виджет «Видео»

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

При клике на кнопку добавления появится всплывающее окно, где нужно выбрать один из варинтов загрузки. Вообще рекомендуется заливать ролик сначала куда-то типа YouTube, а после указывать на него ссылку.

Виджет «Аудио»

Ну, и последний элемент — для вставки аудио сайдбаре, принцип работы такой же. Видимо, разработчики решили сделать альтернативу , данная функция будет теперь прямо в админке.


Кликайте по кнопке добавления файла (Add File) и выбирайте его во всплывающем окне по ссылке либо загружайте с компьютера. Можно и просто перетащить в поле виджета. Сложностей не должно возникнуть.

В новой версии TinyMCE 4.6 улучшат работу с правкой линков в контенте. Когда разместите курсор на ссылке, то появится выделение всего этого блока, и вы легко сможете внести правки в анкор. Выглядит это следующим образом:


Да, в принципе, фишка удобная, особенно если вы редактируете много текста. Ранее приходилось кликать где-то в центре ссылки за пару символов до ее конца и править весь анкор. В WordPress 4.8 будет проще.

В старый виджет новостей заменили на информационный блок, где кроме последних новинок из мира WordPress отображаются события, связанные с системой и проходящие недалеко от вас.

Локация определяется по умолчанию, но вы можете задать любой другой город, если пожелаете. Для многопользовательских сайтов каждому юзеру будет показан соответствующий результат в зависимости от временной зоны, языка и IP адреса.

Итого

Традиционно в WordPress 4.8 допилили некоторые функции для разработчиков и подправили глюки, например, панель настройщика темы будет корректно выводиться на больших экранах + при редактировании настроек юзера отобразится его имя (чего сейчас нет).

Что касается всех остальных обновлений, то вроде как, они пригодятся многим редакторам. Вам не придется объяснять клиентам как вставлять картинки в виджеты или добавлять видео, что тоже весьма полезно. С другой стороны это не является чем-то экстраординарным и легко реализовывалось с помощью дополнительного модуля Black Studio TinyMCE Widget, о котором я говорил выше. Да, админка стала лучше, но хотелось бы получить какие-то более масштабные фишки за полгода.

А вам понравилось обновление WordPress 4.8? что думаете по этому поводу?

Большинство пользователей привыкли уже к главной странице Яндекса, но ее легко можно изменить. Например, сделать главную страницу такой:

Настройки действуют только для того браузера, с которого настраиваете!

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


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


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


Если темы не устраивают, можно перелистывать темы стрелочками вправо и влево.


После выбора темы, необходимо нажать кнопку «сохранить тему», которая находится снизу. Если передумали устанавливать тему, то можно закрыть окно или нажать кнопку «отмена».


Второй пункт меню настроек внешнего вида Яндекса — «настроить Яндекс». Здесь задаются те виджеты , которые Вы будете видеть на главной странице Яндекс-поиска.

При нажатии «настроить яндекс», переходим в режим замены и удаления ненужных виджетов. Виджеты можно просто перетаскивать с помощью мышки на место другого виджета (навести на виджет, зажать левую кнопку мыши и тащить), либо их можно удалять, нажимая крестик в правом верхнем углу. У некоторых виджетов есть собственные настройки, в зависимости от показываемой информации. Например, виджет «яндекс-пробки» можно настроить на любой город, а так же задать маршрут «работа-дом».


Кроме показанных виджетов, можно выбрать и другие. Для этого нажимаем в левом верхнем углу ссылку «добавить новый виджет».


Слева можно выбрать интересующую тематику виджета, а справа расположены сами виджеты с коротким описанием. Внизу страницы находится нумерация для перехода на следующие или предыдущие страницы.


Чтобы выбрать виджет, наводим на него курсор мышки, появляется кнопка добавить, и кликаем левой кнопкой мыши (кликать не обязательно именно по кнопке, достаточно кликнуть по гаджету или названию).


После этого виджет появляется на главной странице и его можно перетаскивать на место других виджетов. Необходимо выбрать действие — «оставить» или «удалить».


В верхнем меню имеются кнопки — «вернуть» для возвращения удаленных виджетов (если не удаляли, то такой кнопки не будет), «сбросить настройки» — возвращает все как было изначально, так же сбрасывается все оформление страницы, «отмена» для возврата того вида, который был до изменений и «сохранить» — для сохранения изменений.

В поле для ввода названия города начинаем вводить начальные буквы города и далее выбираем его из выпадающего списка. Самостоятельно город ввести не удастся, только выбирать из списка. Здесь же можно установить город по умолчанию, то есть город будет определяться автоматически. Поставив галочку в пункте «не уточнять мое местоположение», Вам не будут показываться всплывающие окна с вопросом, например, «вы в Москве?» и двумя вариантами ответа — «да» и «нет». После выбора города, нажимаем кнопку «вернуться».


Всем привет! В конце прошлого года ко мне на почту пришло письмо от команды Яндекс.Браузера, в котором шла речь про API Табло и виджет сайта . Честно сказать, я не являюсь постоянным пользователем этого браузера, однако сообщение вызвало неподдельный интерес.

  • пользователи Яндекс Браузера;
  • пользователи других браузеров с установленным расширением Визуальные закладки .

На данный момент Яндекс браузеру всего лишь чуть больше года, однако его доля среди пользователей рунета составляет порядка 5% и охват постоянно растет.

Представьте себе, что среди этих пяти процентов находится Ваша , почему бы не выделить свой сайт на фоне остальных?

А если учесть, что расширение «Визуальные закладки» доступно для других популярных браузеров, таких как Google Chrome, Mozilla Firefox, Internet Explorer — то число пользователей API Табло будет намного больше. Нужно ли создавать виджет сайта в том случае, если лично Вы не пользуетесь Яндекс.Браузером? Однозначно да!

Как создать виджет сайта для API табло

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

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

Для того чтобы внести все эти модификации нам понадобится создать файл манифеста для виджета с именем manifest.json , который будет содержать блок метаданных на языке XML. Затем подключаем файл в заголовке страницы, внутри . Я разместил файл , но если хотите — можете использовать другой путь:

1 <link rel = "yandex-tableau-widget" href = "/manifest.json" / >

Содержимое файла:

1 2 3 4 5 6 7 8 9 10 { "version" : "1.0" , "api_version" : 1 , "layout" : { "logo" : "https://сайт/wp-content/themes/lime/images/manifest.png" , "color" : "#e9ffd0" , "show_title" : false } }

{ "version": "1..png", "color": "#e9ffd0", "show_title": false } }

Внимание! Вам потребуется внести свои изменения в код перед применением! Что означают указанные параметры:

  • version — версия виджета. Любое число, например 1 или 2; 1.0 или 2.0 и т.д.
  • api_version — номер версии API Табло. На данный момент существует только 1.
  • logo — укажите абсолютный путь к графическому файлу логотипа.
  • color — цвет заливки фона.
  • show_title — отображение заголовка страницы. Может принимать два значения: false — не показывать; true — показывать.

В своем примере я не стал приводить настройки значков уведомлений, потому как не компетентен в данном вопросе — здесь потребуется помощь программиста. Среди возможных вариантов применения — уведомления о новых письмах (как это реализовано у Яндекс почты), число лайков и прочее. Более подробную техническую документацию можно найти на странице Яндекс API , в том числе примеры настройки уведомлений.


К логотипу предъявляются особые требования:

  • графический файл должен быть формата PNG с прозрачным фоном;
  • максимальные размеры: ширина 150px, высота 60px.

Все виджеты Яндекс Табло обновляются автоматически с некоторым заданным интервалом, понадобится время чтобы увидеть изменения. Возможно придется несколько раз почистить браузера. Однако, если Вы не желаете ждать, то откройте в Яндекс браузере страницу chrome://tableau-widget и укажите в строке URL манифеста, после чего нажмите на кнопку Проверить:


Если код манифеста оформлен верно — появится надпись «Манифест виджета верен», в противном случае возникнет ошибка. Есть и другой способ увидеть изменения сразу — вручную добавить сайт на табло:


После продолжительных манипуляций в конце-концов я получил такой результат:


Он конечно не претендует на звание лучшей дизайнерской работы 😀 По крайней мере отражает суть и заданный стиль оформления блога. А тайтл я не стал выводить (show_title), т.к. нельзя настроить отступы и цвет шрифта — в моем случае название является частью изображения. А Вы уже сделали виджет своего сайта для табло браузера и визуальных закладок Яндекса?