Добавить плавающие кнопки социальных сетей без WordPress плагина

Автор:
Nurlan Kemelbekov

Обмен статьями и контентом в социальных сетях является хорошим методом, чтобы увеличить трафик и рейтинг сайта. Отличный способ добиться этого — это добавить в WordPress блог плавающие кнопки социальных сетей.

Плавающие кнопки всегда находятся в центре внимания читателя и на любом отрезке страницы можно легко нажать и поделиться.

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

 

Это зависит от вас, на каких страницах вы хотите добавить секцию плавающих кнопок социальных сетей. Для всего сайта, наиболее Соц. сетипредпочтительным для редактирования будет «index.php» файл вашей темы, для страниц с записями (статьи) «single.php» файл.

Примечание: Этот метод является безопасным, но коды шаблонов темы сайта могут быть разными, поэтому создание резервной копии файлов не помешает.

Здесь включены плавающие кнопки для Facebook, Twitter, Google+. Вам остается просто скопировать код и вставить в нужное место. Вы можете добавить другие или удалить какую-то кнопку позже, если пожелаете.

1) Вход в админ — панель WordPress и перейти к разделу “Внешний вид” -> Редактор. Найдите файл с именем «single.php»из списка файлов. Теперь добавьте следующий код в самом конце, но до php get_footer();  (в некоторых случаях, возможно, нужно поставить его после линии php get_footer();  в зависимости от выбранной темы);

<!-- social-float -->
<div id="social-float">
<div class="sf-facebook">
<iframe src="http://www.facebook.com/plugins/like.php?app_id=186708408052490&amp;href=<?php echo urlencode($url); ?>&amp;send=false&amp;layout=box_count&amp;width=50&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=62" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:50px; height:62px;" allowTransparency="true"></iframe>
</div>
<div class="sf-twitter">
<a href="https://twitter.com/share" class="twitter-share-button" data-count="vertical" data-dnt="true">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
<div class="sf-plusone">

<g:plusone size="tall"></g:plusone>

<!-- Поместите этот вызов визуализации, если до этого не был установлен -->
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
</div>

</div>
<!-- /social-float -->
<script type="text/javascript">
jQuery(document).ready(function($) {
//Показывать кнопки, если только браузер достаточно широк
if( $(window).width() >= 1030 )
$('#social-float').show();
// Update when user resizes browser.
$(window).resize(function() {
if( $(window).width() < 1030 ) {
$('#social-float').hide();
} else {
$('#social-float').show();
}
});
});
</script>

Сохраните файл, щелкнув кнопку “Обновить”. Все должно быть завершено без ошибок.

Шаг 2:

Теперь выберите style.css файл, прокрутите вниз до конца и вставьте этот код;

#social-float {
position: fixed;
left: 20px;
bottom: 80px;
width: 75px;
padding: 10px 1px;
text-align: center;
background-color: #fff;
border: 4px solid rgba(180, 180, 180, .7);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
display: none;
}
.sf-facebook {
margin-bottom: 5px;
}

.sf-twitter {
height: 62px;
margin-bottom: 5px;
}
.sf-plusone {
height: 60px;
margin-bottom: 5px;
}

Можно добавить немного php кода для правильного определения url и названия статьи. Добавьте это перед html кодом.

<?php  // URL to share if( is_singular() ) { $url = get_permalink(); $text = the_title('', '', false); } else if ( is_category() || is_tag() ) { if(is_category() ) { $cat = get_query_var('cat'); $url = get_category_link($cat); } else { $tag = get_query_var('tag_id'); $url = get_tag_link($tag); } $text = single_cat_title('', false) . ' on ' . get_bloginfo('name'); } else { $url = get_bloginfo('url'); $text = get_bloginfo('name') . ' - ' . get_bloginfo('description'); } ?>

Суть этого кода в том, чтобы выбрать правильный URL и текст заголовка «поделиться», и сохранить их в 2 переменные PHP ($url и $text).
Как это работает:
Если мы находимся в Single Post/Page — то использовать URL поста и название.
Категория (category)/Тег (tag) — использовать URL категории, имя рубрики и “Название Сайта” как текст.
По умолчанию — URL домашней страницы, название сайта и описание.
Плавающие кнопки будут работать и без этого php кода, поэтому это будет на Ваше усмотрение.

Как удалить неиспользуемые произвольные поля WordPress
Я надеюсь, что плавающие кнопки социальных сетей заработали у вас, и вы смогли воспользоваться этим быстрым и простым способом для того, чтобы добавить плавающие кнопки без WordPress плагина!



Вам также может понравиться:


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

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

* Copy This Password *

* Type Or Paste Password Here *

пятнадцать − тринадцать =

Я просто хотел сказать, как сильно я ценю Ваш комментарий на мой пост. Спасибо Вам !!