Своя кнопка, свой стиль блока Яндекса «Поделиться»

02-22-2017, 06:07 PM

В продолжение этой темы

Социальные кнопки от Яндекса получились, на мой взгляд, удачные и у вас будет небольшая возможность настроить их вешний вид в Конструкторе блока «Поделиться». Однако опций настроек блока немного, кроме того, их можно сделать только путём изменения и добавления атрибутов в контейнере блока, что практически исключает возможность использования блока «Поделиться» для адаптивного дизайна сайта.

В тоже время, у движка форума есть опция «Поделиться с другом", которую блок Яндекса не заменяет и не отменяет. Поэтому, было бы логичным объединить в одном блоке «Поделиться» близкие по функционалу блок Яндекса и указанную опцию движка форума.

Добавим свой стиль

В блоке Яндекса «Поделиться» позиция кнопок относительно друг друга никак не регулируется. Чтобы устранить этот недостаток нужно добавить к классу «ya-share2» контейнера дополнительный стиль регулировки отступов для кнопок. Сделаем отступы справа от кнопок равными 4px.

Результатом этого будет следующий код блока от Яндекса

HTML Code:

<style type="text/css">
.ya-share2 li {margin:0 4px 0 0 !important;}
</style>
<script src="https://yastatic.net/share2/share.js" async="async"
 charset="utf-8"></script>
<div class="ya-share2" data-services="collections,vkontakte,facebook,odnoklassniki,moimir,twitter,telegram">
</div>

Добавим свою кнопку

Ну, или наоборот, добавим блок от Яндекса к своей кнопке – это не важно.
Вначале создадим свою кнопку и дадим ей название, например, «Поделиться ссылкой». Для этого;

- в каталог /images/buttons/ поместим иконку pochta.png с изображением почтового конверта,
- через "админпанель>управление фразами" добавим новую переменную в ОСНОВНЫЕ фразы
имя переменной - share_link
текст фразы - Share link
перевод на русский - Поделиться ссылкой

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

HTML Code:

<if condition="THIS_SCRIPT == 'showthread'">"sendmessage.php?do=sendtofriend&amp;t=$threadid" target="_blank"<else />"mailto:"</if>

Окончательно код кнопки "Поделиться ссылкой" будет такой

HTML Code:

<a href=<if condition="THIS_SCRIPT == 'showthread'">"sendmessage.php?do=sendtofriend&amp;t=$threadid" target="_blank"<else />"mailto:"</if> rel="nofollow"><img src="images/buttons/pochta.png" alt="$vbphrase[share_link]" /></a>

Далее, создадим контейнер c id="social_icon ", в который поместим код своей кнопки "Поделиться ссылкой" и код блока «Поделиться» от Яндекса.

Код блока

HTML Code:

<style type="text/css">
#social_icon{display:table;margin: 0 auto; }
#social_icon li,#social_icon img{margin:0 4px 0 0 !important;}
.ya-share2{display:table-cell;vertical-align:top;}
</style>
<script src="https://yastatic.net/share2/share.js" async="async"
 charset="utf-8"></script>
<div id="social_icon">
<a href=<if condition="THIS_SCRIPT == 'showthread'">" sendmessage.php?do=sendtofriend&amp;t=$threadid" target="_blank"<else />"mailto:"</if> rel="nofollow"><img src="images/buttons/pochta.png" alt="$vbphrase[share_link]" /></a>
<div class="ya-share2" data-services="collections,vkontakte,facebook,odnoklassniki,moimir,twitter,telegram">
</div>
</div>

Таким образом, был создан новый блок, который коротко назовём «Поделиться».

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

Для создания тени от кнопок блока добавим в таблицу стилей свойство "box-shadow" в стиль контейнера блока «Поделиться».

HTML Code:

<style type="text/css">
#social_icon{display:table;margin: 0 auto; }
#social_icon li,#social_icon img{margin:0 4px 0 0 !important;box-shadow: 0px 0px 12px -4px #000;-webkit-box-shadow: 0px 0px 12px -4px #000;}
.ya-share2{display:table-cell;vertical-align:top;}
</style>
<script src="https://yastatic.net/share2/share.js" async="async"
 charset="utf-8"></script>
<div id="social_icon">
<a href=<if condition="THIS_SCRIPT == 'showthread'">" sendmessage.php?do=sendtofriend&amp;t=$threadid" target="_blank"<else />"mailto:"</if> rel="nofollow"><img src="images/buttons/pochta.png" alt="$vbphrase[share_link]" /></a>
<div class="ya-share2" data-services="collections,vkontakte,facebook,odnoklassniki,moimir,twitter,telegram">
</div>
</div>

Мультиязычный блок «Поделиться».
Для того, чтобы блок «Поделиться» стал мультиязычным, необходимо произвести настройки блока в той его части, которая от Яндекса. Названия кнопок соцсетей в блоке «Поделиться» от Яндекса по умолчанию отображается на русском языке. Если требуется иная локализация, то в контейнер блока добавляется атрибут "data-lang". Условие переключения языка в названии кнопок соцсетей с использованием переменных форумного движка будет следующим;

HTML Code:

<if condition="$bbuserinfo['languageid'] != '2'"> data-lang=”en"</if>

Код мультиязычного блока

HTML Code:

<style type="text/css">
#social_icon{display:table;margin: 0 auto; }
#social_icon li,#social_icon img{margin:0 4px 0 0 !important;box-shadow: 0px 0px 12px -4px #000;-webkit-box-shadow: 0px 0px 12px -4px #000;}
.ya-share2{display:table-cell;vertical-align:top;}
</style>
<script src="https://yastatic.net/share2/share.js" async="async"
 charset="utf-8"></script>
<div id="social_icon">
<a href=<if condition="THIS_SCRIPT == 'showthread'">" sendmessage.php?do=sendtofriend&amp;t=$threadid" target="_blank"<else />"mailto:"</if> rel="nofollow"><img src="images/buttons/pochta.png" alt="$vbphrase[share_link]" /></a>
<div class="ya-share2" data-services="collections,vkontakte,facebook,odnoklassniki,moimir,twitter,telegram"<if condition="$bbuserinfo['languageid'] != '2'"> data-lang="en"</if>
>
</div>
</div>

С другими настройками блока «Поделится» от Яндекса можно ознакомиться здесь.

Примеры пользования блоком «Поделится»

Размещение блока
Таблицу стилей необходимо разместить внизу шаблона headinclude

HTML Code:

<style type="text/css">
.float_block_icon{position:fixed;top:2px;left:0;z-index:99;width:100%;}
#social_icon{display:table;margin: 0 auto; }
#social_icon li,#social_icon img{margin:0 4px 0 0 !important;box-shadow: 0px 0px 12px -4px #000;-webkit-box-shadow: 0px 0px 12px -4px #000;}
.ya-share2{display:table-cell;vertical-align:top;}
</style>

или код из таблицы стилей (между тегами <style></style>) разместить в нижнем поле опции "админпанель>все опции стиля>дополнительные определения CSS", при этом, не забывайте редактировать код стилей, для изменения вида (варианта) отображения блока на странице.

Отображение блока на странице
Разместим код блок "Поделиться" так, чтобы блок;

- отображался на всех страницах,
- при прокрутке страницы оставался неподвижным относительно окна браузера (летающий блок)

Для реализации этого код блока поместим в контейнер "float_block_icon".

HTML Code:

<script src="https://yastatic.net/share2/share.js" async="async"
 charset="utf-8"></script>
<div class="float_block_icon">
<div id="social_icon">
<a href=<if condition="THIS_SCRIPT == 'showthread'">" sendmessage.php?do=sendtofriend&amp;t=$threadid" target="_blank"<else />"mailto:"</if> rel="nofollow"><img src="images/buttons/pochta.png" alt="$vbphrase[share_link]" /></a>
<div class="ya-share2" data-services="collections,vkontakte,facebook,odnoklassniki,moimir,twitter,telegram"<if condition="$bbuserinfo['languageid'] != '2'"> data-lang="en"</if>
></div></div></div>

Контейнер "float_block_icon" можно разместить в начале или в конце шаблона "header" или "footer".

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

HTML Code:

<style type="text/css">
.float_block_icon{position:fixed;top:2px;left:0;z-index:99;width:100%;}
#social_icon{display:table;margin: 0 auto; }
#social_icon li,#social_icon img{margin:0 4px 0 0 !important;box-shadow: 0px 0px 12px -4px #000;-webkit-box-shadow: 0px 0px 12px -4px #000;}
.ya-share2{display:table-cell;vertical-align:top;}
</style>

Второй вариант изображения блока "Поделиться" на странице.
Блок находится по горизонтали по центру, по вертикали внизу страницы Для этого варианта код таблицы стилей будет таким

HTML Code:

<style type="text/css">
.float_block_icon{position:fixed;bottom:2px;left:0;z-index:99;width:100%;}
#social_icon{display:table;margin: 0 auto; }
#social_icon li,#social_icon img{margin:0 4px 0 0 !important;box-shadow: 0px 0px 12px -4px #000;-webkit-box-shadow: 0px 0px 12px -4px #000;}
.ya-share2{display:table-cell;vertical-align:top;}
</style>

В обоих случаях код контейнера блока остаётся неизменным.

HTML Code:

<script src="https://yastatic.net/share2/share.js" async="async"
 charset="utf-8"></script>
<div class="float_block_icon">
<div id="social_icon">
<a href=<if condition="THIS_SCRIPT == 'showthread'">" sendmessage.php?do=sendtofriend&amp;t=$threadid" target="_blank"<else />"mailto:"</if> rel="nofollow"><img src="images/buttons/pochta.png" alt="$vbphrase[share_link]" /></a>
<div class="ya-share2" data-services="collections,vkontakte,facebook,odnoklassniki,moimir,twitter,telegram"<if condition="$bbuserinfo['languageid'] != '2'"> data-lang="en"</if>
></div></div></div>