"Липкие" кнопки "Поделиться" для мобильной версии сайта

В этой заметке покажу, как установить «липкие» кнопки «Поделиться» для мобильной версии сайта. Буду использовать HTML и CSS.

Для начала создаю в папке с рабочей темой сайта файл с названием mobile-floating-share-buttons.php. Содержимое этого файла должно быть таким:

<div class="mobile-floating-share-buttons">
  <a href="https://www.facebook.com/sharer.php?u=<?php echo urlencode(get_permalink()); ?>" target="_blank" rel="nofollow noindex">
    <img src="https://cdn4.iconfinder.com/data/icons/social-messaging-ui-color-shapes-2-free/128/social-facebook-square1-256.png" alt="Facebook">
  </a>
  <a href="https://twitter.com/intent/tweet?url=<?php echo urlencode(get_permalink()); ?>" target="_blank" rel="nofollow noindex">
    <img src="https://cdn2.iconfinder.com/data/icons/2018-social-media-app-logos/1000/2018_social_media_popular_app_logo_twitter-256.png" alt="Twitter">
  </a>
    <a href="https://vk.com/share.php?url=<?php echo urlencode(get_permalink()); ?>" target="_blank" rel="nofollow noindex">
    <img src="https://cdn2.iconfinder.com/data/icons/2018-social-media-app-logos/1000/2018_social_media_popular_app_logo_vkontakte-256.png" alt="VK">
  </a>
  <a href="https://connect.ok.ru/offer?url=<?php echo urlencode(get_permalink()); ?>" target="_blank" rel="nofollow noindex">
    <img src="https://cdn3.iconfinder.com/data/icons/social-media-2169/24/social_media_social_media_logo_Odnoklassniki-256.png" alt="Odnoklassniki">
  </a>
  <a href="whatsapp://send?text=<?php echo urlencode(get_the_title() . ' ' . get_permalink()); ?>" target="_blank" rel="nofollow noindex">
    <img src="https://cdn3.iconfinder.com/data/icons/cute-flat-social-media-icons-3/512/whatsapp.png" alt="WhatsApp">
  </a>
  <a href="tg://msg_url?url=<?php echo urlencode(get_permalink()); ?>&text=<?php echo urlencode(get_the_title()); ?>" target="_blank" rel="nofollow noindex">
    <img src="https://cdn-icons-png.flaticon.com/128/124/124019.png" alt="Telegram">
  </a>
  <a href="viber://forward?text=<?php echo urlencode(get_the_title() . ' ' . get_permalink()); ?>" target="_blank" rel="nofollow noindex">
    <img src="https://cdn3.iconfinder.com/data/icons/social-media-special/256/viber-256.png" alt="Viber">
  </a>
</div>

<a href="https://www.facebook.com/sharer.php?u=<?php echo urlencode(get_permalink()); ?>" target="_blank" rel="nofollow noindex">

</a>

<a href="https://twitter.com/intent/tweet?url=<?php echo urlencode(get_permalink()); ?>" target="_blank" rel="nofollow noindex">

</a>

<a href="https://vk.com/share.php?url=<?php echo urlencode(get_permalink()); ?>" target="_blank" rel="nofollow noindex">

</a>

<a href="https://connect.ok.ru/offer?url=<?php echo urlencode(get_permalink()); ?>" target="_blank" rel="nofollow noindex">

</a>

<a href="whatsapp://send?text=<?php echo urlencode(get_the_title() . ' ' . get_permalink()); ?>" target="_blank" rel="nofollow noindex">

</a>

<a href="tg://msg_url?url=<?php echo urlencode(get_permalink()); ?>&text=<?php echo urlencode(get_the_title()); ?>" target="_blank" rel="nofollow noindex">

</a>

<a href="viber://forward?text=<?php echo urlencode(get_the_title() . ' ' . get_permalink()); ?>" target="_blank" rel="nofollow noindex">

</a>

</div>

Теперь подключаю этот файл, вставив в functions.php вот такой код:

function add_floating_share_buttons_mob() {
  include 'mobile-floating-share-buttons.php';
}

add_action('wp_footer', 'add_floating_share_buttons_mob');

function add_floating_share_buttons_mob() {

include 'mobile-floating-share-buttons.php';

}

add_action('wp_footer', 'add_floating_share_buttons_mob');

Далее, будет замечательно, если добавим к кнопкам стили:

.mobile-floating-share-buttons {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 9999;
}

.mobile-floating-share-buttons a {
  margin: 5px;
    /*следующие 2 строки я добавил щас*/
  width: 42px;
  height: 42px;
}

.mobile-floating-share-buttons img {
  width: 41px;
  height: 41px;
}

.mobile-floating-share-buttons {

position: fixed;

top: 0;

left: 0;

width: 100%;

display: flex;

justify-content: center;

align-items: center;

background-color: #ffffff;

box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

z-index: 9999;

}

.mobile-floating-share-buttons a {

margin: 5px;

/*следующие 2 строки я добавил щас*/

width: 42px;

height: 42px;

}

.mobile-floating-share-buttons img {

width: 41px;

height: 41px;

}

Чтобы адаптировать кнопки поделиться для мобильных устройств, использую медиа-запросы CSS. Например, можно добавить следующий код в конец файла стилей:

@media screen and (max-width: 767px) {
  .mobile-floating-share-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .mobile-floating-share-buttons a {
    margin: 5px;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .mobile-floating-share-buttons img {
    max-width: 100%;
    max-height: 100%;
  }
}

@media screen and (max-width: 767px) {

.mobile-floating-share-buttons {

display: flex;

flex-wrap: wrap;

justify-content: center;

}

.mobile-floating-share-buttons a {

margin: 5px;

width: 50px;

height: 50px;

display: flex;

justify-content: center;

align-items: center;

}

.mobile-floating-share-buttons img {

max-width: 100%;

max-height: 100%;

}

Этот код применяет стили к элементам с классом mobile-floating-share-buttons только на устройствах с шириной экрана до 767 пикселей. Он устанавливает свойство display в flex для контейнера кнопок, добавляет отступы и выравнивание для каждой кнопки. Кроме того, устанавливает максимальную ширину и высоту для изображений, чтобы они не выходили за пределы кнопок.

Благодаря этому, при просмотре мобильной версии сайта, посетители всегда будут видеть кнопки «Поделиться» в верхней части экрана мобильных устройств. Ранее для этого я использовал сторонний сервис, который с некоторых пор перестал работать в России.