[pingvincible]

Товарищи! Хочу поделиться своим небольшим открытием. Все уже, наверное, знакомы с плагином Social Simple Buttons. Я тоже в этом числе. Но вот меня не устроило то, в каком месте этот плагин выводит кнопки. А точнее то, что он их клеит внутри записи, а еще точнее внутри дива с классом entry. И у меня получалось вот так:



А мне не нравилось это пустое пространство справа от соц. кнопок и слева от кнопки "Читать дальше".

Поэтому, я подглядел у Алексея, и мне понравилось, что у него кнопки соц. сетей аккуратненько лежат на одной линии вместе со ссылкой "Читать полностью".



Я решил повторить этот трюк

За основу я взял вышеупомянутый плагин. Итак, какие запчасти от плагина нам понадобятся:

1. Скрипты соц. сетей. Находятся они в файле simple-social-buttons.php, который лежит в папке плагина по адресу /wordpress/wp-content/plugins/simple-social-buttons/simple-social-buttons.php. Выглядят они вот так:

Код HTML:

<!-- Simple Social Buttons plugin --> <script type="text/javascript">
//<![CDATA[
// google plus
window.___gcfg = {lang: '<?php echo $lang_g; ?>'};
(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);
})();
// facebook 
(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/<?php echo $lang_fb; ?>/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
// twitter 
!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> <!-- /End of Simple Social Buttons -->

Это скрипт для всех трех сетей. Его прямо в таком виде нужно вставить перед закрывающим тегом </head> в файле header.php вашей темы по адресу /wordpress/wp-content/themes/имя_вашей_темы/header.php
Если у кого есть навороченные темы типа моей, то в ней могут быть настройки, и там можно вставить скрипт.

2. Стили для кнопок. Они находятся в том же файле, что и скрипты. Вот они:

Код HTML:

<!-- Simple Social Buttons style sheet --> <style type="text/css">
   div.simplesocialbuttons { height: 20px; margin: 10px auto 10px 0; text-align: center; clear: left; }
   div.simplesocialbutton { float: left; text-align: center;}
</style> <!-- End of Simple Social Buttons -->

Эти стили можно вставить, опять же, перед закрывающим тегом </head> в файле header.php, в настройках темы, либо в файле стилей темы /wordpress/wp-content/themes/имя_вашей_темы/style.css

Здесь ремарочка. Свойство clear: left блока div.simplesocialbuttons я заменил на float: left, чтобы блок с кнопками прижимался влево и можно было в правую пустую часть воткнуть мою кнопку "Читать дальше". Если у вас цель просто воткнуть блок с кнопками куда-то, куда вам хочется, то это делать необязательно. Также можно поиграть со свойством margin, чтобы выровнять кнопки по вертикали и горизонтали.

3. И последнее, что нам понадобится, это вставить код кнопок в страницы, на которых мы хотим их увидеть. Вот код:

Код HTML:

<div class="simplesocialbuttons"> <div class="simplesocialbutton ssb-button-googleplus"><!-- Google Plus One--><div class="g-plusone" data-size="medium" data-href="<?php the_permalink(); ?>"></div></div> <div class="simplesocialbutton ssb-button-fblike"><!-- Facebook like--><div class="fb-like" data-href="<?php the_permalink(); ?>" data-send="false" data-layout="button_count" data-width="100" data-show-faces="false"></div></div> <div class="simplesocialbutton ssb-buttom-twitter"><!-- Twitter--><a href="https://twitter.com/share" class="twitter-share-button" data-text="'.$title.'" data-url="<?php the_permalink(); ?>" rel="nofollow"></a></div> </div>

Этот код я выковырял из функции вывода кнопок в том же файле /wordpress/wp-content/plugins/simple-social-buttons/simple-social-buttons.php. Вставлять его можно куда вам угодно. В моем случае я вставил его сразу после закрывающего тега блока <div class="entry"> в файле /wordpress/wp-content/themes/имя_вашей_темы/index.php. Помимо этого можно вставить код в файлы page.php, single.php и другие, где необходимо. Функция the_permalink(); возвращает ссылку на пост, под которым стоят кнопки.

После этих нехитрых манипуляций кнопки у меня на сайте стали выглядеть так:



А это и есть то, чего я так страстно хотел .

Что в итоге: можем ставить кнопки соц.сетей в любое место на странице, исключаем дополнительную нагрузку на базу данных.