Кнопки «Поделиться в социальных сетях» без сторонних плагинов (Share Social Links)
Простые кнопки поделиться в социальных сетях без использования сторонних плагинов и скриптов, используется прямая ссылка для шеринга. В данном примере взят рабочий код с сайта на 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 для своего сайта для каждой страницы.
Самый простой и удобный таймер обратного отсчета HTML CSS Javascript Указываем дату окончания работы таймера…
Форма обратной связи с прикреплением файла (attach) Самый простой внешний вид формы обратной связи с…
В общем, из-за санкций против российских компаний возникли некоторые сложности у многих украинских компаний. Допустим,…
Самый простой пример реализации табов на сайте. Код максимально простой и легкий, не нужно никаких…
13 комментариев
Ответить
Большое спасибо за статью, собрал замечательный блок! Только использовал таблицу вместо списка и svg-иконки.
Лучше использовать
display: flex;илиdisplay: table;вместо таблиц.Простой и замечательный функционал!
Благодарен.
А если это будет в архивах выводится то будет шариться вся страница или анонс?
По идее ссылка на архив, но вы попробуйте и расскажите потом нам.
Спасибо, долго искал везде не актуальная инфа, тут все работет!!!
Очень крутой код! Подскажите пожалуйста какие функции нужно прописать для Joomla? не могу нигде найти уже второй день…
Имею в виду
?php the_permalink(); ?— это для WPОтличная статья! Спасибо! Помогло
добавьте шаринг с фотками
еще бы инстаграм туда добавить
благодарю за статью
Так, у инстаграма нет такой функции, потому что идея самого сервиса в том, чтобы постить свои уникальные фотки, нельзя использовать чужие фото, за них могут забанить аккаунт и соответственно ничего нельзя репостить.
На сайте *** такие кнопки, к сожалению, сделать не удалось. Но за Ваш труд спасибо большое!
У вас там сторонний скрипт ya-share.js, в каких-то случаях так сделать проще, чем добавлять свои кнопки, стили и иконки для кнопок.