как разместить код виджета на сайте
Установка виджетов
Размещение сторонних виджетов подразумевает доступ к редактированию HTML кода блока, в который будет добавляться виджет. Обратите внимание что данный режим редактирования доступен только на тарифах PRO и SHOP.
У каждого текстового блока в редакторе сайта есть 3 кнопки:
Чтобы разместить код виджета, скопируйте его, нажмите кнопку «HTML» нужного блока и добавьте его в нужное место.
Нужно отметить что большинство виджетов являются персональными, оформляются на адрес доменного имени и работают только на опубликованном сайте, т.к. URL сайта в редакторе совсем другой.
1. Кнопки «Like», «Мне нравится».
Кнопка «Нравится» позволяет одним нажатием отметить материалы сайта как понравившиеся и поделиться ими на Facebook. Рядом с кнопкой «Нравится» вы можете разместить кнопку «Поделиться», чтобы люди могли настроить, с кем они хотят поделиться, а также добавить сообщение. Чтобы добавить кнопку «Нравится» от Facebook перейдите по ссылке
Перейдите в настройки конфигуратора кнопки.
В поле «URL-адрес для отметки «Нравится»» укажите адрес страницы где Вы желаете разместить виждет. В блоках «Композиция», «Размер кнопки» и «Тип действия» выберите как именно Вы хотите чтобы отображалась кнопка и нажмите кнопку «Получить код».
Во всплывающем окне скопируйте обе части кода
и разместите в необходимом месте на указанной ранее странице.
Переопубликуйте сайт и проверьте отображение виджета.
Вконтакте «Мне нравится»
Чтобы добавить кнопку «Мне нравится» от ВКонтакте перейдите по ссылке
Выберите «Подключить новый сайт», введите доменное имя Вашего сайта и выберите необходимые настройки кнопки и нажмите «Сохранить».
Скопируйте код виджета из поля «Код для вставки» и разместите его на нужной странице сайта.
Переопубликуйте сайт и проверьте отображение виджета.
Важно! Пока Вы не нажмете кнопку «Сохранить» код в поле «Код для вставки» не будет сгенерирован именно для Вашего сайта, а сам пример кода не будет работать.
2. Виджеты Вконтакте, Facebook (группы, рекомендации, комментарии, опросы).
Все виджеты Вконтакте и Facebook вставляются по аналогии с кнопками «Мне нравится» и «Like». Получить коды можно по ссылкам для Facebook и Вконтакте.
3. Виджет Instagram.
Сегодня Instagram это самая быстрорастущая социальная сеть в России. С помощью этой платформы можно как рекламировать, так и продавать товары. Чтобы добавить виджет Instagram на сайт можно сделать его самому или создать с помощью уже готового конструктора. Подробные инструкции по созданию виджета Вы можете найти по ссылке. Готовый конструктор виджета доступен по ссылке.
Все настройки интуитивно просты. Нужно лишь добавить имя Вашего профилья в Instagram, установить параметры и нажать «Создать виджет». Код виджета доступен под предварительным просмотром.
4. Виджет «Поделиться».
Для вставки виджета «Поделиться» отлично подходит готовый виджет от Яндекс. Отметьте галочками нужные сервисы и скопируйте готовый код для вставки.
Переопубликуйте сайт и проверьте отображение виджета.
5. Подписка на RSS.
Мы отдаем в RSS все новости — все записи на странице типа «Новости». Чтобы получить ссылку на фид новостей просто допишите к адресу страницы новостей «.xml». Например если у вас новости сайта доступны по адресу http://yoursite.ru/news/, то ссылка на фид новостей будет выглядеть http://yoursite.ru/news.xml.
Мы будем делать подписку через Feedburner.
Перейдите на сайт http://feedburner.google.com и войдите в него под своим google-аккаунтом (если у вас его нет, то зарегистрируйтесь). Создайте новый RSS канал для своих новостей, для этого просто введите ссылку на rss-фид (как получить ссылку описано немного выше) и нажимайте на кнопку «Next» пока канал не будет создан.
Теперь, когда канал создан, нам нужно получить код для подписки. Для этого в настройках канала перейдите на вкладку Publicize раздел Chicklet Choose. Выбираем подходящий вид кнопки подписки, копируем код в нижней части раздела и вставляем его в нужное место на нашем сайте. Подписка на rss готова.
Сейчас мы реализовали подписку на RSS с помощью программы чтения RSS-лент.
Для организации подписки через email в этой же вкладке Publicize переходим в раздел Email Subscriptions.
Активируем подписку по email если она не активирована.
И нам становится доступен код, который нужно вставить в нужное место.
6. Вставка карт.
С помощью виджетов карт Вы можете не только указать где именно находится Ваш офис, склад, или магазин, но и проложить оптимальный маршрут для Вашего клиента.
Для получения кода карты перейдите в Конструктор карт Яндекса и нажмите «Создать карту».
Подробные инструкции по редактированию карт Вы можете найти по ссылке.
На примере сделаем карту маршрута от станции м. Ломоносовский проспект до Биологического факультета МГУ. В поле «Адрес или объект» вписываем «Биологический факультета МГУ и нажимаем «Найти».
Яндекс предложит выбрать точный адрес объекта. Возможно их будет несколько, выберите нужный Вам. Он автоматически будет добавлен в список объектов и будет отмечен на карте.
Таким же способом добавляем объект для станции м. Ломоносовский проспект. Однако, мы знаем что у м. Ломоносовский проспект 6 выходов. Приблизим карту и укажем какой лучше выход использовать нашим клиентам. Просто выделите объект и перенесите его. В нашем случае удобнее всего использовать выход№1.
Теперь мы можем проложить маршрут. Нажмите на кнопку «Линии» и нажатием левой кнопки мыши проложите маршрут.
Введите название карты и нажмите «Сохранить и продолжить».
Выберите границы Вашей карты, нажмите «Получить код карты» и скопируйте сгенерированный код.
Разместите код на странице и переопубликуйте сайт.
7. Вставка видео.
Загружать видео к нам на сервис нельзя. Вы можете встроить видео с youtube или любого другого подобного сервиса. Для этого нужно просто получить код видео и вставить его в нужное место на вашем сайте.
Так же путем размещения кода плеера Вы можете добавлять видео на сайт. Самым популярным видеохостингом на данный момент является youtube. На его примере рассмотрим как получить код видео. Получить код можно несколькими способами.
Нажмите кнопку «Поделиться» в правом нижнем углу под видео
в открывшимся окне нажмите на первый пункт «Встроить».
Код видео будет автоматически добавлен в буфер обмена. Перейдите на страницу Вашего сайта где желаете разместить видео и добавьте его. В этом способе получения кода Вы можете задать время с которого начнется видео при его запуске.
Или просто нажмите правой кнопкой мыши на видео и выберите «Копировать HTML-код». Код видео будет автоматически добавлен в буфер обмена.
8. Чат.
Для создания чата можно использовать, например, следующий сервис http://www.chatovod.ru/new/.
После заполнения простой формы вам на указанный email будет выслана ссылка для активации чата.
После активации чата нужно перейти в Панель управления и нажать на «HTML-код для вставки на сайт».
Теперь просто скопируйте первый вариант кода и вставьте его в нужное место на вашем сайте.
9. Строка поиска.
Подробно про поиск написано тут http://setup.ru/client/news/72. Но на тарифе PRO можно вставить строку поиска непосредственно в текст страницы. Для этого просто вставьте следующий код в нужное место:
*тут all, content, gallery и catalog это области поиска. Вы можете оставить только те, какие захотите.
9. Звонок по Skype.
Установка виджета Skype на сайт позволит вашим посетителям звонить или писать вам в Skype всего лишь нажав на кнопку.
Для установки виджета переходим на страницу http://www.skype.com/en/features/skype-buttons/create-skype-buttons/. Вводим в соответствующее поле ваш логин в Skype. После этого выбираем внешний вид кнопки.
Нам сразу показывается как будет выглядеть кнопка на сайте. Если все устраивает копируем код кнопки и вставляем его в нужное место на вашем сайте, например в шапку.
11. Форма обратной связи.
Если вас, по каким-либо причинам, не устраивает наша стандартная форма обратной связи вы можете создать свою.
Сделать это очень просто.
Перейдите на сайт masterform.info Создайте такую форму обратной связи, которая вам нужна. 
После нажатия на кнопку «Генерировать» вы увидете как будет выглядеть ваша форма. 
Затем нажмите на кнопку «Получить код». Скопируйте сгенерированный код из открывшегося окна и вставьте в нужное место на своем сайте.
После этого вернитесь на сайт masterform.info и зарегистрируйте свой сайт, заполнив необходимые поля. 
Готово! Теперь можете проверить свою форму в действии.
База знаний uCoz
1. Общие сведения
1.1. Полное наименование Системы и ее условное обозначение Федеральная государственная информационная система «Единый портал государственных и муниципальных услуг (функций)» (далее – Единый портал). Единое окно цифровой обратной связи. Условное обозначение – Система.
1.2. Описание электронной формы
Электронная форма предназначена для направления гражданами и юридическими лицами в государственные органы, органы местного самоуправления, государственные и муниципальные учреждения, иные организации, осуществляющие публично значимые функции (далее – Органы и организации), и их должностным лицам сообщений и обращений.
Электронная форма является веб-приложением (веб-виджетом), предназначенным для размещения на сайте в информационно-телекоммуникационной сети «Интернет». Электронная форма размещается на официальных сайтах Органов и организаций и на Едином портале.
1.3 Регистрация на сайте Госуслуг и получение кода виджета для установки
1.3.2. Зайдите в личный кабинет (ЛКО). Пройдите, если потребуется, повторную авторизацию на ЕПГУ.
1.3.3. Выберите своё учреждение и перейдите в него (по кнопке внизу справа или по двойному щелчку по названию ОУ.
1.3.4. Перейдите в раздел «Функционирование ЛКО».
Прокрутите страницу до подзаголовка «Веб-виджет» и выберите «Скопировать код».
2. Требования к размещению электронной формы
Электронная форма должна размещаться на первом экране главной страницы официальных сайтов Органов и организаций.
3. Порядок действий для размещения виджета
Предварительное условие: Для размещения электронной формы необходим личный кабинет Органа или организации (далее – ЛКО), зарегистрированный в Системе. Для регистрации ЛКО обратитесь в техническую поддержку с соответствующим запросом (см. п.4 настоящей инструкции).
Шаг 1: В настройках ЛКО, на вкладке «Функционирование ЛКО» выберите один из вариантов оформления баннера (рисунок 1, отметка 1).
Шаг 2: Нажмите кнопку «Сгенерировать код» (рисунок 1, отметка 2).
Шаг 3: Скопируйте код электронной формы, нажав кнопку «Скопировать код» (рисунок 1, отметка 3).
Шаг 4: Вставьте скопированный код электронной формы на главную страницу, для этого открываем главную на редактирование:
Или же переходим по адресу: ваш-сайт /index/31-1-0-1-2 после чего у вас откроется на редактирование главная страница:
как показано на изображении выше, ставим здесь код виджета и сохраняем изменения.
ВАЖНО: Каждый орган/организация должны использовать уникальный код веб-виджета и уникальный ЛКО для соответствующей веб-страницы/сайта размещения электронной формы.
Недопустимо:
— использование одного веб-виджета для нескольких органов/организаций;
— изменение размеров веб-виджета, негативно влияющее на дизайн и удобство пользователей.
Шаг 5: Проверьте, что электронная форма размещена на первом экране главной страницы. При переходе на главную страницу электронная форма должна отображаться без необходимости прокрутки содержимого страницы.
Примечание! Устанавливая на сайт виджет Госуслуг, нужно устанавливать лишь один виджет, нельзя одновременно устанавливать несколько так как один из них работать в данной ситуации не будет.
Если от вас требуют установить новый виджет, в данной ситуации старый, который у вас ранее был установлен нужно удалить и установить новый.
Если вы для установки выбрали большой виджет размерами от 405px до 1116px и выше, такой баннер нужно устанавливать лишь на главной не помещая код в первый или второй контейнер.
Важно! Если вы хотите установить виджет в первый / второй контейнер, для установки выбирайте небольшой виджет размерами 293px, такой размер доступен для выбора на сайте госуслуг.
4. Техническая поддержка
В случае возникновения вопросов, сложностей с размещением электронной формы, необходимо отправить запрос в службу технической поддержки по электронному адресу sd@sc.minsvyaz.ru:
В заявке обязательно должны быть указаны:
– фамилия, имя и отчество инициатора заявки;
– электронный адрес регистрации в Системе;
– наименование ведомства/организации инициатора;
– описание причины и сути заявки;
– детальное описание ситуации;
– ожидаемое поведение Системы по шагам и результат ее работы (скриншоты экранов, коды ошибок и т.д.).
Как вставить виджеты на сайт
Как разместить код виджета
Код состоит из трех частей, которые можно расположить разными способами:
1. Скрипт для подключения к API виджетов:
2. Код с параметрами виджета:
1. Скрипт для подключения к API виджетов:
2. Код с параметрами виджета:
Рекомендуемый способ — так виджеты загружаются быстрее, повышается CTR виджета и увеличивается количество кликов.
Этот способ подходит, если вы вставляете на сайт один виджет или несколько виджетов с одинаковым кодом (например, настроен поиск по запросу из HTML‑элемента, в качестве которого используется заголовок статьи).
Используйте этот способ, если вы:
ищете товары для виджета по параметрам, которые нельзя поместить в элемент head ;
используете несколько виджетов с различным кодом.
Если использовать этот способ, виджеты будут загружаться не сразу, а по мере загрузки страницы. То есть, медленнее, чем в первом варианте.
Код в элементе head :
Код в элементе body :
Как настроить ширину и отступы виджетов
Вы можете настроить ширину и отступы для виджетов с помощью CSS-стилей.
Задает ширину виджета.
Можно использовать любые значения, допустимые в CSS.
Задает отступ между виджетом и тем элементом, в который он вставлен.
Можно использовать любые значения, допустимые в CSS.
Задает ширину виджета.
Можно использовать любые значения, допустимые в CSS.
Задает отступ между виджетом и тем элементом, в который он вставлен.
Можно использовать любые значения, допустимые в CSS.
Чтобы настроить ширину и отступы:
Для конкретных виджетов
Добавьте к контейнеру div нужного виджета атрибут style с правилами для настройки стиля. Например:
Для всех виджетов на странице
Добавьте атрибут class=\»marketWidget\» ко всем контейнерам виджетов, чтобы к ним применялись правила из стиля. Например:
Вы также можете изменить внешний вид виджетов с помощью различных параметров. Подробнее см. в разделе Вопросы по внешнему виду виджетов.
Как добавить несколько виджетов на одну страницу
Чтобы разместить несколько виджетов на одной странице:
Пример для двух виджетов:
Разместите в коде страницы контейнеры div для виджетов.
Пример для двух виджетов:
Как задать поисковый запрос в коде контейнера
Какую область выделить под виджет
Все размеры указаны в пикселях.
| Виджет | Ширина | Высота |
|---|---|---|
| Список предложений с описанием товара | Минимум 280 | Минимум 351 |
| Список предложений без описания товара | Минимум 280 | Минимум 129 |
| Компактный список предложений без описания товара | Произвольная | Минимум 104 |
| Подробный список предложений | Минимум 280 | Минимум 144 |
| Витрина | Минимум 280 | |
| Карусель с описанием товара | Минимум 280 | Всегда 403 |
| Карусель без описания товара | Минимум 280 | Всегда 221 |
| Карточка товара | Минимум 280 | Минимум 369 |
| Виджет | Ширина | Высота |
|---|---|---|
| Список предложений с описанием товара | Минимум 280 | Минимум 351 |
| Список предложений без описания товара | Минимум 280 | Минимум 129 |
| Компактный список предложений без описания товара | Произвольная | Минимум 104 |
| Подробный список предложений | Минимум 280 | Минимум 144 |
| Витрина | Минимум 280 | |
| Карусель с описанием товара | Минимум 280 | Всегда 403 |
| Карусель без описания товара | Минимум 280 | Всегда 221 |
| Карточка товара | Минимум 280 | Минимум 369 |
Для каждой строки (начиная со второй): минимум — 185, максимум — 235
Для каждой строки (начиная с седьмой): минимум — 50
Для каждой строки (начиная со второй): минимум — 185, максимум — 235
Для каждой строки (начиная с седьмой): минимум — 50