Адаптивные кнопки социальных сетей на сайт для WordPress

Представляю вам чистые и адаптивные кнопки социальных сетей, с помощью Font Awesome и JavaScript вы сможете установить себе хорошие кнопки «поделиться» на WordPress.

Я понимаю чтобы не заморачиваться можно и поюзать Pluso или Яндекс Блок «Поделиться», но я вас уверяю это все херня по сравнению с тем что я вам покажу. Данный способ поможет избежать подгрузки сторонних скриптов, без воровства трафика или левой рекламы на сайте. А так же плюс ко всему вы сможете сверстать кнопки как вам угодно. Пример вы можете посмотреть внизу статьи, я на свой блог их тоже подключил.

Подключение jQuery для кнопок

Наверняка вы уже используете jQuery библиотеки поэтому можете пропустить этот пункт.

Не используйте? тогда подключаем в <head>

1	<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>

Лучше и проще всего, можно сделать через functions.php (так наверное даже будет правильней):

PHP

function my_jquery() {
	wp_deregister_script( 'jquery' );
	wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js');
	wp_enqueue_script( 'jquery' );
}
add_action( 'wp_enqueue_scripts', 'my_jquery' );

Не забудьте подключить Font Awesome, если вы его еще не используйте то зря!

HTML код для кнопок

Вставляем в нужное вам место следующий HTML код:

HTML

<div id="share">
<div class="like">Поделиться в социальных сетях</div>
<div class="social" data-url="<?php the_permalink(); ?>" data-title="<?php the_title(); ?>">
	<a class="push facebook" data-id="fb"><i class="fa fa-facebook"></i></a>
	<a class="push twitter" data-id="tw"><i class="fa fa-twitter"></i></a>
	<a class="push vkontakte" data-id="vk"><i class="fa fa-vk"></i></a>
	<a class="push google" data-id="gp"><i class="fa fa-google-plus"></i></a>
	<a class="push ok" data-id="ok"><i class="fa fa-odnoklassniki"></i></a>
</div>
</div>

Не забываем про стили кнопок

Оформите кнопки в style.css добавив уже готовые стили для кнопок

CSS

#share {
	width:100%;
	border:1px solid #eaeaea;
	margin: 0 auto;
	background:#fff;
	text-align:center;
}
.like {
	font-size: 16px;
	font-weight: 700;
	line-height: 50px;
}
.push {
	display: inline-block;
	width: 17%;
	min-width: 100px;
	line-height: 40px;
	margin: 5px 2px 20px 2px;
	font-size: 15px;
	text-align: center;
	color:#fff;
	cursor: pointer;
}
 
.facebook {background-color:#3b5998;}
.facebook:hover {background-color:#2d4373; color:#fff;}
.google {background-color:#dd4b39;}
.google:hover {background-color:#c23321; color:#fff;}
.twitter {background-color:#55acee;}
.twitter:hover {background-color:#2795e9; color:#fff;}
.vkontakte {background-color:#587ea3;}
.vkontakte:hover {background-color:#466482; color:#fff;}
.ok {background-color:#ee8208;}
.ok:hover {background-color:#ee7808; color:#fff;}

Последний шаг

Подключаем share.js и смотрим на результат!

1	<script type='text/javascript' src='http://evexa.ru/wp-content/themes/evexa-blog/js/share.js'></script>

Скачать share.js

Дополнительно

Так получилось, что лично у меня кнопки не работали сразу, помогло вот это:

Заменить строки в share.js:

$('.social a').on('click', function() {
var id = $(this).data('id');
if(id) {
var data = $(this).parent('.social');
var url = data.data('url') || location.href, title = data.data('title') || '', desc = data.data('desc') || '';
Shares.share(id, url, title, desc);
}
});

На одну такую:

1	Shares.init();

Возможно скрипты конфиктуют, поэтому проверьте.