Адаптивные кнопки социальных сетей на сайт для WordPress
Представляю вам чистые и адаптивные кнопки социальных сетей, с помощью Font Awesome и JavaScript вы сможете установить себе хорошие кнопки «поделиться» на WordPress.
Я понимаю чтобы не заморачиваться можно и поюзать Pluso или Яндекс Блок «Поделиться», но я вас уверяю это все херня по сравнению с тем что я вам покажу. Данный способ поможет избежать подгрузки сторонних скриптов, без воровства трафика или левой рекламы на сайте. А так же плюс ко всему вы сможете сверстать кнопки как вам угодно. Пример вы можете посмотреть внизу статьи, я на свой блог их тоже подключил.
Подключение jQuery для кнопок
Не используйте? тогда подключаем в <head>
1 | <script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script> |
Лучше и проще всего, можно сделать через functions.php
(так наверное даже будет правильней):
1 2 3 4 5 6 | 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' ); |
HTML код для кнопок
Вставляем в нужное вам место следующий HTML код:
1 2 3 4 5 6 7 8 9 10 | <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
добавив уже готовые стили для кнопок
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | #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:
1 2 3 4 5 6 7 8 | $('.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(); |
Возможно скрипты конфиктуют, поэтому проверьте.