Как изменить виджет Facebook, на Вконтакте или Одноклассники PrestaShop 1.6

Привет дорогие друзья:) Сегодня мы научимся менять виджеты социальных сетей в стандартном шаблоне PrestaShop 1.6.
Как изменить виджет Facebook, на Вконтакте или Одноклассники PrestaShop 1.6

Ничего сложного в уроке нету, более подробно я расскажу обо всем на видео. Итак приступим.
Для начала открываем файл:
/modules/blockfacebook/blockfacebook.tpl

В открытом файле нас интересует следующий блок кода:
<h4 >{l s='Follow us on Facebook' mod='blockfacebook'}</h4>
<div class="facebook-fanbox">
<div class="fb-like-box" data-href="{$facebookurl|escape:'html':'UTF-8'}" data-colorscheme="light" data-show-faces="true" data-header="false" data-stream="false" data-show-border="false">
</div>
</div>

Для начала мы изменим имя виджета:
<h4 >{l s='Мы Вконтакте' mod='blockfacebook'}</h4>

Если Вы хотите использовать Одноклассники, то код будет выглядеть так:
<h4 >{l s='Мы в Одноклассниках' mod='blockfacebook'}</h4>

Теперь нам нужно генерировать код виджета, для вконтакте, или для одноклассников.
После того как Вы настроите виджет помещаем его в следующий блок:
<div class="facebook-fanbox">
Тут код виджета
</div>

Чуть не забыл, после вставки кода Вы получите белый экран, для этого код нужно обвернуть:
{literal}{/literal}

После всех изменений получаем код:
<div class="facebook-fanbox">
{literal}	
Тут код виджета
{/literal}
</div>

Для большей наглядности я сделал для Вас видео, желаю приятного просмотра:)

49 комментариев

avatar
Как всегда если у Вас возникли вопросы задавайте их в комментариях.
avatar
Добрый день. А подскажите пожалуйста, можно ли этот блок сделать посередине? Просто два других блока я убрал из-за ненадобности, а этот слева смотрится не особо хорошо.
avatar
Можно сделать и посередине.
avatar
Подскажите, пожалуйста, как это сделать.
avatar
Ну описать весь процесс замены я к сожалению не могу.
avatar
Подскажите, хоть где менять? А то что-то я рылся в глобал цсс и нечего не получилось.
avatar
Нужно работать с блоками что в футере.
avatar
Вы хотите чтобы виджет был просто по центру? Или на всю ширину сайта?
avatar
Просто по центру. На всю ширину — это слишком много будет.
avatar
Подскажите пожалуйста:
В файле blockfacebook.tpl прописываю текст, но на сайте остается все по прежнему.
Вы упоминали, что можно через перевод его изменить. В переводах исходный текст уже изменен, добавление перевода вручную тоже не помогает.
Кэш чистился.
Может есть идеи в чем может быть проблема?
avatar
Производите очистку кэша?
avatar
Да
avatar
Могу платно исправить, в процессе получите ответ что делали не так, 500 рублей
avatar
Здравствуйте, подскажите а как добавить виджет вконтакте рядом с права от виджета фейсбук? Если просто вставлять код он не хочет работать, отображается на сайте сам код вместо виджета.
avatar
В код и добавить.
avatar
Таже проблема, что ничего не происходит с изменением на странице, при этом проверяем а работает ли это вообще, ну к примеру находим файл админки:
C:\OpenServer\domains\vaiga.by\modules\blockfacebook\views\admin\_configure\preview.tpl
смотрим и исправляем код, как в инструкции на нижеследующий:
<script src="{$facebook_js_url}"></script>
<link href="{$facebook_css_url}" rel="stylesheet">
{if $facebookurl != ''}
<div class="bootstrap panel">
	<div class="panel-heading">
		<i class="icon-picture-o"></i> {l s='Preview' mod='blockfacebook'}
	</div>
	<div id="fb-root"></div>
	<div id="facebook_block">
		<h4 >{l s='Мы ВКонтакте' mod='blockfacebook'}</h4>
		<div class="facebook-fanbox">
			{literal}       
				<script type="text/javascript" src="//vk.com/js/api/openapi.js?120"></script>
				<!-- VK Widget -->
				<div id="vk_groups"></div>
				<script type="text/javascript">
				VK.Widgets.Group("vk_groups", {mode: 2, width: "220", height: "400"}, 48187006);
				</script>
			{/literal}
		</div>
	</div>
</div>
{/if}

Всё работает. а теперь по аналогии пробуем править

C:\OpenServer\domains\vaiga.by\modules\blockfacebook\blockfacebook.tpl
и тут самое интересное, всё по прежнему, обновление не помогает, даже если весь код из файла удалить ничего не меняется.
Значит??? Или файл не тот или еще гдето скрытый код?
avatar
Найдено решение, мне помогло.
Идуте по адрес (в моем случае): C:\OpenServer\domains\vaiga.by\cache\
Делаете на всякий случай архив содержимого и херите ВСЁ СОДЕРЖИМОЕ!!!
После этого обновляете страничку и будет вам счастье ;)
Херьте кеш короче
avatar
Итак, после пары часов ковыряния и подгонке по цвету виджета, в итоге у меня получился примерно такой рабочий код, спс автору:
{if $facebookurl != ''}
<div id="fb-root"></div>
<div id="facebook_block" class="col-xs-4">
	
	<div class="facebook-fanbox">
		{literal}       
			<script type="text/javascript" src="//vk.com/js/api/openapi.js?120"></script>
				<!-- VK Widget -->
				<div id="vk_groups"></div>
				<script type="text/javascript">
				VK.Widgets.Group("vk_groups", {mode: 2, width: "auto", height: "auto", color1: 'F1F1F1',color3: '327082'}, 48187006);
			</script>
		{/literal}
	</div>
</div>
{/if}

Важное примечание, обязательно приходится УДАЛЯТЬ ПОЛНОСТЬЮ КЕШ работая на локальном сервере, у меня он лежит тут:
C:\OpenServer\domains\vaiga.by\cache\smarty\cache\
иначе постоянно отображает первоначальное положение
avatar
Я думаю что Ваша инструкция поможет многим wink
avatar
А как поменять не виджет, а иконку фейсбука на вк?
avatar
В каком месте?
avatar
на стандартном шаблоне PrestaShop находится в правом нижнем углу, чуть выше Контактов фирмы
avatar
avatar
Да!
avatar
Например можно заменить pinterest, в файле global.css
Найти
.footer-container #footer #social_block ul li.pinterest a:before {content: "\f0d2"; }

И заменить на
.footer-container #footer #social_block ul li.pinterest a:before {
            content: "\f189"; }

В админ панеле в поле для pinterest, указать ссылку ВКонтакте.
avatar
всё сделала, но значок так и остался фейсбука…
avatar
Это мой косяк, ВСЁ ПОМЕНЯЛОСЬ!!! СПАСИБО!!!:)
avatar
Отлично:)
avatar
Здравствуйте. Внес все изменения, все заработало. Подскажите пожалуйста…
Не отображается виджет ВК на мобильных устройствах. причем на планшетах отображается.
В настройки Модули для фронт-офиса
Блок подписки на Facebook выключал и снова включал отображение на мобильных телефонах по прежнему не отображает.
Помогите пожалуйста.
Сайт mybedroom.ru
avatar
Блок просто не влезает, правьте верстку.
avatar
выставил width: «260», height: «180» было 330х270
не отображает((
avatar
www.youtube.com/watch?v=MBa98TgSNfQ
вот в этом видео советуют 300х239
avatar
joxi.ru/52azPePhGqkKZA
Как видите все отображается, а у Вас косяки в блоках значит. Удалили что-то лишнее.
avatar
Готов дать доступ и проплатить при необходимости.
Не отображает на мобильных устройствах((
avatar
750 рублей.
avatar
Хорошо.
icq 5729293
или напишите как связаться с вами
avatar
или почта 2279597@mail.ru
avatar
skype pro100lutsk
avatar
Здравствуйте, добавляю виджет в колонку слева, делаю как описано в инструкции, но он не отображается и выглядит все следующим образом.

Кеш чистил. Пробовал добавить на другие страницы, но отображается только на всплывающей странице быстрого просмотра товаров, шаблон product.tpl. Prestashop 1.6.0.9.
Подскажите, пожалуйста, в чем может быть проблема?
avatar
В неправильной установке.
avatar
В неправильной установке чего?
avatar
Кода.
avatar
Здравствуйте!
Как в данном виджете использовать статическую картинку, а не отображение api VK?
гугл пэйджспид ругается на миниатюры аватаров пользователей
идеальный вариант решение ежедневное создание статической картинки с возможностью сжатия изображения
комментарий был удален
avatar
Это кто будет каждый день создавать картинку?
avatar
Впринципе ее обновление не нужно, если отображать область с кол-вом пользователей отдельно от статичной картинки.
Или сделать создание изображения автоматическим внутри виджета
avatar
Понятно.
avatar
Скажите пожалуйста как вставить виджет INWIDGET с inwidget ru ???
я вставляю код виджета но виджет уходит вверх.
avatar
Скорее всего проблема в том что Вы не правильно вставляете.
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.