Простые кнопки поделиться в социальных сетях без использования сторонних плагинов и скриптов, используется прямая ссылка для шеринга. В данном примере взят рабочий код с сайта на CMS WordPress, для статического сайта измените:
<?php the_permalink(); ?>
– на адрес страницы, которую нужно зашерить,<?php the_title(); ?>
– замените на заголовок страницы, которой вы делитесь в соцсети,<?php bloginfo('name'); ?>
– замените на название сайта.
Так же в моем примере используются иконки FontAwesome, если у вас не подключена эта библиотека иконок, то вы можете смело все теги <i>
заменить на текст или свои изображения с логотипами социальных сетей.
<ul class="share-list">
<li class="share-item">
<a href="https://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>&t=<?php the_title(); ?>" class="share-link share-link--facebook" rel="nofollow" target="_blank">
<i class="fa fa-facebook" aria-hidden="true"></i>
</a>
</li>
<li class="share-item">
<a href="https://twitter.com/share?url=<?php the_permalink(); ?>&text=<?php the_title(); ?>&hashtags=my_hashtag" class="social-tw" rel="nofollow" target="_blank">
<i class="fa fa-twitter" aria-hidden="true"></i>
</a>
</li>
<li class="share-item">
<script type="text/javascript" async defer src="https://assets.pinterest.com/js/pinit.js"></script>
<a href="https://www.pinterest.com/pin/create/button/" data-pin-do="buttonBookmark" data-pin-custom="true" class="share-link share-link--pintrest" rel="nofollow" target="_blank">
<i class="fa fa-pinterest" aria-hidden="true"></i>
</a>
</li>
<li class="share-item">
<a href="http://www.linkedin.com/shareArticle?mini=true&url=<?php the_permalink() ?>&title=<?php the_title(); ?>&summary=&source=<?php bloginfo('name'); ?>" rel="nofollow" target="_blank">
<i class="fa fa-linkedin" aria-hidden="true"></i>
</a>
</li>
<li class="share-item">
<a href="https://t.me/share/url?url=<?php the_permalink(); ?>&text=<?php the_title(); ?>" class="share-link share-link--telegram" rel="nofollow" target="_blank">
<i class="fa fa-telegram" aria-hidden="true"></i>
</a>
</li>
<li class="share-item">
<a href="viber://forward?text=<?php the_permalink(); ?>" class="share-link share-link--telegram" rel="nofollow" target="_blank">
<i class="fab fa-viber" aria-hidden="true"></i>
</a>
</li>
<li class="share-item">
<a href="http://www.reddit.com/submit" onclick="window.location = 'http://www.reddit.com/submit?url=' + encodeURIComponent(window.location); return false" class="share-link share-link--reddit" rel="nofollow" target="_blank">
<i class="fa fa-reddit" aria-hidden="true"></i>
</a>
</li>
<li class="share-item">
<a href="https://vk.com/share.php?url=<?php the_permalink(); ?>" class="social-vk" rel="nofollow" target="_blank">
<i class="fa fa-vkontakte" aria-hidden="true"></i>
</a>
</li>
<li class="share-item">
<a href="http://www.odnoklassniki.ru/dk?st.cmd=addShare&st.s=1&st._surl=<?php the_permalink(); ?>&st.comments=<?php the_title(); ?>" class="social-ok" rel="nofollow" target="_blank">
<i class="fa fa-odnoklassniki" aria-hidden="true"></i>
</a>
</li>
</ul>
Для того, чтобы при шеринге записей со своего сайта в соцсетях использовались необходимые данные, а не случайная картинка и тексты, необходимо правильно заполнить метатеги Open Graph для своего сайта для каждой страницы.
Комментарии (13) к “Кнопки “Поделиться в социальных сетях” без сторонних плагинов (Share Social Links)”
Сергей
Большое спасибо за статью, собрал замечательный блок! Только использовал таблицу вместо списка и svg-иконки.
Denis Creative
Лучше использовать
display: flex;
илиdisplay: table;
вместо таблиц.Гарисон
Простой и замечательный функционал!
Благодарен.
Александр
А если это будет в архивах выводится то будет шариться вся страница или анонс?
Denis Creative
По идее ссылка на архив, но вы попробуйте и расскажите потом нам.
Артур
Спасибо, долго искал везде не актуальная инфа, тут все работет!!!
Игорь
Очень крутой код! Подскажите пожалуйста какие функции нужно прописать для Joomla? не могу нигде найти уже второй день…
Имею в виду
?php the_permalink(); ?
– это для WPVlad
Отличная статья! Спасибо! Помогло
Фотки
добавьте шаринг с фотками
Rain
еще бы инстаграм туда добавить
благодарю за статью
Denis Creative
Так, у инстаграма нет такой функции, потому что идея самого сервиса в том, чтобы постить свои уникальные фотки, нельзя использовать чужие фото, за них могут забанить аккаунт и соответственно ничего нельзя репостить.
NickoF84
На сайте *** такие кнопки, к сожалению, сделать не удалось. Но за Ваш труд спасибо большое!
Denis Creative
У вас там сторонний скрипт ya-share.js, в каких-то случаях так сделать проще, чем добавлять свои кнопки, стили и иконки для кнопок.