Виджеты соцсетей: четыре шага по подключению

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

Для этого, если вы используете Chrome, просто кликните правой кнопкой мыши на интересующей вас зоне и выберете пункт меню "Просмотр кода элемента".

В Firefox должно быть установлено дополнение "firebug", который добавляет аналогичный функционал.
В Опера это пункт меню "исходный код".

Вам откроется код страницы, загруженный и обработанный браузером.

На примере нас интересует левая зона на главной странице, куда мы будем помещать виджеты Vkontakte и Facebook (на скриншоте она обозначена розовым цветом).
При наведениии на определенные строчки в панели просмотра кода можно увидеть какая строчка за какой элемент отвечает - браузер подсвечивает описываемый элемент и дает небольшое описание.

В данном случае ширина зоны страницы - 200 пикселей.
В рассматриваемом примере будет генерироваться блок с двумя виджетами  - общей высотой 500 px (по 250 пикселов на каждый виджет).

2. В админ-панели магазина в меню "Дизайн" необходимо открыть "Редактирование дизайна". Справа, в блоке "Модули", после нажатия кнопки "Добавить" необходимо вписать название нового модуля. В данном примере новый модуль называется module.widget. Важно помнить: "module." - это неотъемлемая часть названия, конструкция, позволяющая добавить ваш модуль в список модулей в админке.

После нажатия кнопки "создать" в списке модулей появится файл module.widget.liquid.
Кликнув на него, необходимо проскроллить вверх страницы, чтобы увидеть пустое поле текстового редактора - ведь новый модуль module.widget.liquid  еще предстоит заполнить кодами вставки.

3. Необходимо сгенерировать коды виджетов.  И на "Вконтакте", и на "Facebook" есть так называемые генераторы кодов вставки. Начнем с Vkontakte (по этой ссылке откроется страница-генератор виджета для сообществ).

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

Ширина виджета - 200px, высота выставлена 250 px.
Полученный код необходимо скопировать и вставить в модуль module.widget.liquid, предварительно созданный в админ-панели магазина.

Фейсбук предоставляет более расширенные опции для генерации кода виджета.
После заполнения строчки с адресом странички Facebook и размеров (width - ширина-200px, height - высота - 250px) надо нажать кнопку GetCode. 
В открышемся окне, в данном примере, оптимальным видится использование iFrame кода.

Точно так же, как и код "Вконтакте",полученный код вставляется в модуль module.widget.liquid

В результате должно получиться что-то похожее:

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

4. В меню "Дизайн"-->"Редактирование модулей" для примера была выбрана Главная страница.
В левом столбце появился модуль module.widget, который можно "перетащить"  в нужную зону главной страницы.

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

Разумеется, внешний вид виджетов может отличаться, в зависимости от вкусовых предпочтений и информационной наполненности странички в социальных сетях.