0

Кастомные кнопки (блок) Поделиться в битрикс

Во многих случаях, на сайт на Битриксе люди хотят устанавливать свой блок кнопок «Поделиться», т.к. их по дизайну, как правило, не устраивают стандартные варианты от Яндекс.API, варианты Pluso и так далее. Плюс к тому, сторонние сервисы типа Pluso , могут генерить еще и непонятные исходящие ссылки, это рекламная политика приложения-сервиса, который упростил вам жизнь, но за это вам придется отплатить трафиком. Не все об этом задумываются, а вот в случае, когда заказчик попадется придирчивый да разбирающийся, возникнет вопрос, а что это у нас там за исходящие ссылочки непонятно куда. Вот тут-то вы репу свою и почешете, и придется садиться за блокнотик. 

Рассказываю про конструирование блока «поделиться» с кастомными, то есть своими,  кнопками. Внизу  архив с примером.

Замечание : если вы не желаете, не хотите, не можете, не будете сами делать кастомные кнопки в битриксе, но вам это нужно — можете обратиться ко мне, и я сделаю за вас. 

Введение для самых терпеливых

Ну, собсно, как в любой CMS, блок «поделиться» можно сделать под себя. В примере ниже мы сделаем такой блок для размещения на страницах статей на сайте, внизу.

Что делает блок «поделиться»? Он передает параметры вашей страницы в соцсеть. Что будем передавать? Название страницы (title) и URL. Принципы передачи у всех CMS абсолютно аналогичные, то есть задача сводится в основном к одной простой вещи, а именно передать эти два несчастных параметра как переменную в соответствующем блоке html кода на странице.

Для наглядности, делаем на примере : нужно построить кастомный блок поделиться для блока статей, с вот такими кнопочками :

пример социальных кнопок для битрикс кастом

пример социальных кнопок для Битрикс

Кнопки по дефолту серые, в режиме hover подсвечиваются.

Итак,

Шаг 1. Редактирование шаблона страницы вывода статей

(по аналогии, делаете для любого блока). Для этого переходим в место хранения файлов шаблонов данного раздела. Файл будет называться detail.php (ищите его в соответствующей ему директории на сервере).  В моем примере, я размещаю его в разделе статей, директория для него на сервере — articles :

Кастомные кнопки (блок) «поделиться» в битрикс пример социальных кнопок

Открываем detail.php любимым редактором, лично я сто лет обожаю Notepad++ и не собираюсь от него отказываться.  Кто не умеет пользоваться редактором кода, едет мимо блога, спасибо. Скачать Notepad++  можно тут.

В самом файле detail.php нам нужно будет отыскать место, куда мы будем запихивать наш социальный блок. Я его помещаю в самом внизу, под форму рассылки. В html это будет у меня выглядеть так :

Кастомные кнопки (блок) «поделиться» в битриксоткрыть картинку в отдельном окне

Код с приведенного рисунка ниже. В районе строки 138 начинается  блок <div> для кастомных кнопок шаринга:

<div style="float:left; margin-left:15px;"> 
	<a href="https://twitter.com/share?source=tweetbutton&amp;text=<?$APPLICATION->ShowTitle(false);?>&amp;url=<? echo "http://".$_SERVER['SERVER_NAME'].$APPLICATION->GetCurPage();?>" target="_blank" class="soc-butt-twitter open-share"></a>		
	<a href="https://vk.com/share.php?url=<? echo "http://".$_SERVER['SERVER_NAME'].$APPLICATION->GetCurPage();?>&title=<?$APPLICATION->ShowTitle(false);?>" target="_blank" class="soc-butt-vk open-share"></a>
	<a href="https://www.facebook.com/sharer.php?u=<? echo "http://".$_SERVER['SERVER_NAME'].$APPLICATION->GetCurPage();?>&amp;t=<?$APPLICATION->ShowTitle(false);?>" target="_blank" class="soc-butt-facebook open-share"></a>
	<a href="https://plus.google.com/share?url=<? echo "http://".$_SERVER['SERVER_NAME'].$APPLICATION->GetCurPage();?>" target="_blank" class="soc-butt-google open-share"></a>
</div>

Соответственно, в данном коде за передачу URL страницы отвечает код

url=<? echo "http://".$_SERVER['SERVER_NAME'].$APPLICATION->GetCurPage();?>

А название страницы передается таким образом :

<?$APPLICATION->ShowTitle(false);?>

Можно просто копировать данный блок без изменений, если вас устраивает набор сервисов ( у меня только гугл, твиттер, вконтакт и фейсбук.

  • Нужно ли добавить кнопку для Телеграм? Напишите в комментарии.

Шаг 2. Заготовка кнопок и добавление элементов в файл шаблона стилей.

Шаблон вашего сайта хранится скорей всего где-то в стандартном месте. В нашем примере, шаблон располагается по пути /local/templates/example.ru/

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

Я вношу изменения напрямую в один из используемых файлов стилей шаблона. В нашем случае, это файл template_styles.css

Код, который добавляем в файл стиля, приведен ниже, он формирует нам вывод кнопок с заданным оформлением. Можете подстроить под свои значения.

.box__social {
  position: absolute;
  left: 40px;
  bottom: 0; }
.box__social a[class*=soc-butt] {
    vertical-align: top;
    display: inline-block;
    text-decoration: none;
    width: 42px;
    height: 42px;
    position: relative;
    background-image: url(/local/templates/example.ru/images/all-sprites.png);
    background-color: #f5f5f5;
    cursor: pointer; }
.box__social a[class*=soc-butt]:hover {
      text-decoration: none; }
.box__social .soc-butt-twitter {
    background-position: -50px -251px; }
.box__social .soc-butt-twitter:hover {
      background-position: -50px 0; }
.box__social .soc-butt-vk {
    background-position: -50px -301px; }
.box__social .soc-butt-vk:hover {
      background-position: -50px -46px; }
.box__social .soc-butt-facebook {
    background-position: -50px -351px; }
.box__social .soc-butt-facebook:hover {
      background-position: -50px -93px; }
.box__social .soc-butt-google {
    background-position: -50px -401px; }
.box__social .soc-butt-google:hover {
      background-position: -50px -135px; }

И, наконец, самое последнее : картинка самих кастомных социальных иконок, которая приведена по ссылке в файле стиля

/local/templates/example.ru/images/all-sprites.png — вот эта.

Скачиваем тут : http://blog.odhost.ru/wp-content/uploads/2018/03/all-sprites.png

Её вы просто копируете из архива в то место, где хранятся картинки для вашего шаблона, и указываете соответственно в файле стилей путь до неё.

Сам файл это png  с прозрачностью, его вы можете редактировать, но  если решите делать свои кнопки, указывате правильно значения для смещения по y , указанные в файле css, иначе будет всё криво.

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

Ну вот и всё!

Живой пример работы данного блока «в действии» можно посмотреть здесь (листаем вниз страницы) :

https://climatstar.ru/articles/podgotovka-teplovogo-punkta-k-otopitelnomu-sezonu-keys-po-obsluzhivaniyu-kvant/

Архив с данным примером можно скачать здесь :

Если вам нужно сделать по-настоящему красивые и свои кнопки, лучше обращаться за этим к профессиональному дизайнеру, а не рукожопу из подсобки. Лично из меня дизайнер очень хуёвый, я поэтому даже не пытаюсь ничего рисовать. Моё дело код и только. Ни дизайном, ни вёрсткой я заниматься не умею, не могу и никогда не научусь, потому что божечка меня этим обделил. Так что обращайтесь к дизайнерам или пользуйтесь готовыми кнопками, благо, их миллионы.

Пригодился код? Поделись этой записью в соцсетях!

odhost

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *