Веб дизайн и разработка

HTML widget: форумы, комментарии, блоги и другие возможности

Иван Алексеев 22 Августа, 2012

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

Теперь вы с легкостью можете разместить на своем сайте информацию из различных популярных сервисов: Google приложения, Google интернет сообщества, фотографии из Picasa, Twitter, Вконтакте, Facebook, комментарии из IntenseDebate и Disqus, файлы из Dropbox, Box, Flickr Badge, Blogger, Meebo, Email Me From, Nabble Forum и Vimeo. Функциональность и информативность вашего ресурса возрастет и вы почувствуете эти изменения на себе.

Давай на практике, а не словах, разберемся со всеми возможностями html виджета. HTML widget есть в любом шаблоне MotoCMS из нашего магазина.

 

Знакомство с html виджетом

 

Создадим новую пустую страницу, чтобы там протестировать виджет.

Узнайте больше о возможностях MotoCMS: html-виджет
Слева в панели настроек вы найдете вкладку «виджет», в ней – HTML widget.

Узнайте больше о возможностях MotoCMS: html-виджет
Справа вы видите панель настроек. Там вы можете отредактировать название виджета, показать или скрыть прелоадер (индикатор загрузки внешнего виджета), изменить размер, прозрачность и режим смешивания виджета, добавить различные эффекты его появления на сайте.

Узнайте больше о возможностях MotoCMS: html-виджет
Если контент больше, чем область виджета, вы можете включить функцию сроллбаров. То есть, появится полоса прокрутки, позволяющая видеть содержимое модуля полностью.

Узнайте больше о возможностях MotoCMS: html-виджет
Нажмите на него дважды, вы можете вставить виджет куда угодно. Волшебная функция drag&drop позволяет легко и просто это сделать.

Узнайте больше о возможностях MotoCMS: html-виджет
Нужно создать новове содержимое, выберете из списка HTML контент.

Узнайте больше о возможностях MotoCMS: html-виджет
Вот как выглядит окно настроек виджета. Слева вы видите список сервисов, с которыми можно совершить интеграцию.

Внимание: в Панели управления этот виджет не будет виден в полноэкранном режиме. Он виден только при просмотре сайта. Также, html виджет будет всегда поверх всех остальных визуальных объектов сайта, поэтому необходимо менять его Расположение на Content в настройках. Если HTML Widget неактивен, это значит в настройках активирован параметр «Включить поддержку нелатинских символов».

Узнайте больше о возможностях MotoCMS: html-виджет
Blank html – это чистый бланк, сюда вы можете вставить любой html код, к примеру, код приложения, форума, формы комментариев и прочие.

 

Добавление Google документа

 

Вы можете вставить на сайт документ из сервиса Google Docs. Для этого, выберете html виджет, выделите область, в которой он будет отображаться на сайте.Нажмите на вкладу Google документ. Теперь смотрите на инструкцию. Нужно открыть Google документ с помощью ссылки «здесь», вы можете видеть ее в инструкции.

Узнайте больше о возможностях MotoCMS: html-виджет
Далее откройте необходимый документ, нажмите Файл – Опубликовать в Интернете.

Узнайте больше о возможностях MotoCMS: html-виджет
Выделите код в появившемся окошке под названием «Встраивание кода». Вставьте этот код в виджет в Панель управления вместо слов «paste code here».

Узнайте больше о возможностях MotoCMS: html-виджет
Теперь сохраните изменения и нажмите Предпросмотр, чтобы увидеть виджет с Google документом. Если документ достаточно большой, то появляется скролл.

Узнайте больше о возможностях MotoCMS: html-виджет
Аналогичным образом можно вставить на сайт Google таблицу, календарь, слайдшоу фотографий из сервиса Picasa и видео из YouTube.

 

Добавление Google карты

 

Карту Google Maps вы можете вставить с помощью HTML виджета или же благодаря отдельному виджету карты. Выберете для себя более подходящий вариант.

Разберем детально, как вставить Google карту с помощью html виджета. Как вы видите, инструкция есть везде.

Узнайте больше о возможностях MotoCMS: html-виджет
Откройте ссылку Карты в инструкции. Слева вы увидите закладку «Ссылка», нажав на нее появится html-код, который вам нужен.

Узнайте больше о возможностях MotoCMS: html-виджет
Снова сохраните изменения и нажмите предпросмотр, чтобы увидеть html виджет на сайте.

Узнайте больше о возможностях MotoCMS: html-виджет
Таким же образом вы можете вставить Google интернет сообщества, то есть позволить людям создавать собственные профили на вашем сайте, приглашать новых пользователей и обмениваться информацией. Вы можете создать социальную панель и блок комментариев.

 

Добавление Twitter профиля

 

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

Узнайте больше о возможностях MotoCMS: html-виджет
Тут необходимо ввести свое имя, вы можете настроить полосу прокрутки, обновления, количество твитов, цветовое оформление блока на сайте и его размеры. Когда вы закончили настраивать его, нажмите на кнопку «Завершить и получить код», чтобы высветился нужный html-код.

Узнайте больше о возможностях MotoCMS: html-виджет
Скопируйте его и вставьте на сайт.

Узнайте больше о возможностях MotoCMS: html-виджет

Добавление других полезных сервисов

 

Вы также можете добавить на сайт блоки с комментариями, благодаря сервису IntenceDebate и Disqus.

Узнайте больше о возможностях MotoCMS: html-виджет
Интеграция с Facebook означает, что вы можете добавить кнопку «Like», ленту комментариев или новостей, рекомендации и LikeBox, то есть все, что нужно для работы с пользователями. В html виджете вы найдете подробную инструкцию. Все делается по аналогии. В первом пункте есть кнопка для перехода на страницу кнопки Like.

Узнайте больше о возможностях MotoCMS: html-виджет
Файлы из DropBox, Box, Flickr Badge, Meebo, Blogger и форму Email Me.

Узнайте больше о возможностях MotoCMS: html-виджет
Также можно вставить на сайт видео из сервиса Vimeo.

Узнайте больше о возможностях MotoCMS: html-виджет
Модуль «HTML виджет» встроен в Панель управления, а это означает, что вы получите его совершенно бесплатно при покупке лицензионной версии системы или любой шаблон из нашего магазина. Вы можете выбрать любой шаблон, воспользоваться бесплатной 30-ти дневной демо-версией и протестировать возможность HTML виджета самостоятельно.

Оставляйте свои комментарии и предложения относительно функциональности системы Moto CMS на нашем Форуме, в разделе «Предложения».

Ваше мнение очень важно для нас!

Хочу демо-версию шаблона! Бесплатно!

Следуйте за нами: @MotoCMS_ru

Leave a Reply

Your email address will not be published. Required fields are marked *

Автор: Иван Алексеев
В компании MotoCMS Иван работает со дня ее основания. Признается, что успел создать не один сайт на MotoCMS ради досконального изучения админки и изложения всех хитростей работы с ней в блоге. Иван невероятно позитивен, предан своему делу, отзывчив. С удовольствием поболтает с вами о новых фичах, тулзах, пингах и других непонятных определениях на страницах блога.