Кнопки социальных сетей без плагинов, плавающая панель кнопок социальных сетей
Уже давно, как я отказался от использования плагина кнопок социальных сетей и решил заменить многие плагины кнопок социальных сетей на код.
Сегодня я расскажу вам, как сделать кнопки социальных сетей без плагинов такие как: плавающая панель кнопок соц. сетей, блок кнопок социальных сетей.
Кнопки социальных сетей без помощи плагинов
Первым представляю плавающую панель социальных кнопок для WordPress на jQuery. Достаточно удобное решение: не нагружает сайт, экономит место, постоянно напоминает о возможности поделиться в соц. сетях.
Ссылки уже закрыты от индексации, а также скорость страницы не изменится.
Установка плавающей панели соц. кнопок на WordPress
Предлагаю скачать скрипт
jQuery скрипт плавающей панели кнопок социальных сетей
Скрипт и значки соц. сетей помещаем в 1 папку вместе.
- Убедитесь, что у вас на сайте подключен jQuery. Для этого зайдите на сайт, нажмите правой кнопкой мыши по странице и выберите «Исходный код страницы» или комбинацией «Ctrl + U». Далее надо найти строчку со словом «jquery» возможно, в вашем шаблоне установлен, например у меня строка выглядит так «js/jquery/jquery.js?ver=1.8.3», тогда пропускаем шаг, если нет, то устанавливаем на сайт:Стоит установить последнюю версию jQuery, поэтому зайдите на сайт jquery.com и скачайте последнюю версию
После чего загружаем скрипт в любое место по FTP клиенту FileZilla, затем открываем файл header.php, лучше использовать редактор кода Notepad и добавляем между тегами код:<script type='text/javascript' src='http://ÐÑÑÑ до файла со скриптом jQuery'></script>
- Далее устанавливаем скрипт самой плавающей панели кнопок. Загружаем его на сайт, а далее открываем тотже файл header.php и между тегами добавляем код:
<script type="text/javascript" src="Путь до файла со скриптом js"></script>
- Далее добавляем функцию, которая будет выводить панель кнопок соц. сетей. Если хотите выводить только в статьях, то добавьте код в файл single.php перед началом статьи, строка выглядит так: <div id=»content»> ( у вас может быть и другой, но находится в верху файла с кодом). Добавляем эту функцию:
<script type="text/javascript">social(encodeURIComponent('<?php the_permalink() ?>'),encodeURIComponent('<?php the_title(); ?>'))</script>
- Далее идем в файл стилей и добавляем
-
#social {
-
position: fixed;
-
z-index: 1000;
-
margin-left: -77px;
-
padding: 6px 6px 0;
-
border: 1px solid #E5E5E5;
-
-moz-border-radius: 4px;
-
-webkit-border-radius: 4px;
-
border-radius: 4px;
-
background: #FFF;
-
}
-
* html #social {display: none}
-
#social:hover {
-
background: #F6F6F6;
-
border: 1px solid #D4D4D4;
-
-moz-box-shadow: 0 0 5px #DDD;
-
-webkit-box-shadow: 0 0 5px #DDD;
-
box-shadow: 0 0 5px #DDD;
-
}
-
#social a {
-
display: block;
-
width: 50px;
-
height: 50px;
-
margin: 0 0 6px;
-
background-color: #F6F6F6;
-
}
-
#social img {
-
margin: 0 !important;
-
padding: 0 !important;
-
border: none !important;
-
}
Здесь ширина значков предполагается 50х50, если у вас картинки другого размера, то поменяйте это значение
-
- Осталось открыть скрипт ( ссылка выше в 1 пункте). Редактируем строчку
-
var f = ‘http://iglous.ru/’; /* путь к папке с изображениями кнопок */
Здесь указываем полный путь до файла, т.е. http://ваÑÑайÑ.ru/wp-content/uploads/sociak.js, к примеру такой путь.
-
Блок социальных кнопок для WordPress
1 Пример
Заметили? Эти кнопки точь в точь, как в плагине Social Share Buttons, но только без помощи плагина. Поэтому напишу, как заменить плагин Social Share Buttons на код:
1. Давайте для начала определимся какие нам нужны кнопки соц. сетей. Я представлю коды для вывода каждой из кнопок популярных соц. сетей, а вы выберите те, которые вам нужны и просто добавите их в файл, об этом чуть ниже.
Рекомендация: на мой взгляд, прежде чем добавлять доп. ссылки на сайт ( считается, что закрытые ссылки тоже оказывают некое влияние), поэтому сделайте перелинковку сайта WordPress, примером может служить вывод похожих статей с картинкой в WordPress, а также сделайте карту сайта WordPress с плагином. Чтобы ускорить индексацию сайта сделайте кросспостинг статей.
Добавляем кнопку Twitter
<a rel="nofollow" target="_blank" href="http://twitter.com/home/?status=<?php the_title(); ?> <?php the_permalink(); ?>"> <img src="адрес вашей картинки" /></a>
Добавляем кнопку Facebook
<a rel="nofollow" target="blank" href="http://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>"><img src="адрес вашей картинки"></a>
Добавляем кнопку Вконтакте
<a href="http://vkontakte.ru/share.php?url=<?php the_permalink(); ?>" target="_blank" rel="nofollow"><img src="адрес вашей картинки"/></a>
Добавляем кнопку Я.ру
<a target="_blank" rel="nofollow" href="http://my.ya.ru/posts_add_link.xml?title=<?php the_title(); ?>&URL=<?php the_permalink(); ?>"><img src="адрес вашей картинки"/></a>
Добавляем кнопку Мой Мир
<a target="_blank" rel="nofollow" href="http://connect.mail.ru/share?share_url=<?php the_permalink(); ?>"><img src="адрес вашей картинки"></a>
Добавляем кнопку LiveInternet
<a href="http://www.liveinternet.ru/journal_post.php?action=l_add&cnurl=<?php the_permalink(); ?>" target="_blank"><img src="адрес вашей картинки"></a>
Добавляем кнопку Livejournal
<a target="_blank" rel="nofollow" href="http://www.livejournal.com/update.bml?event=<?php the_permalink(); ?>&subject=<?php the_title(); ?>" ><img src="адрес вашей картинки"></a>
Добавляем кнопку Google Buzz
<a href="http://www.google.com/reader/link?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>&srcURL=http://адÑÐµÑ вашего сайта.ru/" rel="nofollow" target="_blank"><img src="адрес вашей картинки"></a>
Добавляем кнопку подписки на RSS Feedburner
<a href="http://feeds.feedburner.com/Ð¸Ð¼Ñ фида" rel="nofollow" target="_blank"><img src="адрес вашей картинки" alt="Подписаться по RSS" title="Подписаться на RSS" width="32" height="32"></a>
Как вы понимаете, берем нужные соц. сети и вставляем в файл ( single.php или comments.php ( размещаем вначале) — для вывода в записях, для первого будет в самой записи, для второго файла под записью).
Для красоты можно еще прописать перед ссылками на соц. сети такую строчку:
При этом, при наведении на запись она будет увеличиваться.
<center><div>Понравилась статья? Поделитесь ею с друзьями!</div></center>
Добавляем стиль, css:
-
.soc_but {
-
color:#34c924; /* Цвет */
-
font:16pt Verdana; /* Размер, семейство шрифта */
-
text-shadow:0px 0px 1px #4B4B4B; /* Размытие через тень */
-
}
-
.soc_but {
-
-webkit-transition:All 0.3s ease;
-
-moz-transition:All 0.3s ease;
-
-o-transition:All 0.3s ease;
-
}
-
.soc_but:hover {
-
font-size:19pt;
-
text-shadow:0px 0px 5px #747474;
-
}
И напоследок еще один вид панель кнопок социальных сетей:
Установка
Вставлять данный код надо в виджет «Текст», если хотите поменять вид кнопки, то зайдите на страницу Twitter Вконтакте Google
Изменение:
Чтобы изменить цвет фона, найдите #eff3fa и замените на свой цвет.
Чтобы выбрать с какой стороны будет отображаться панель, найдите в самом начале left:100px; — отображение по левой стороне, чтобы отобразить по правому краю замените left на right
Чтобы изменить отступ от края найдите left:100px; и измените значение на ваше.
Чтобы панель поднять выше/ниже к странице найдите bottom:49%; измените на ваше, чем больше значение, тем выше к началу, чем меньше, тем ниже будет отображаться панель.
<style>
#pageshare {position:fixed; bottom:49%; left:100px; float:left; border: 1px solid black; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#eff3fa;padding:0 0 2px 0;z-index:10;}
#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}
.fb_share_count_top {width:48px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
</style>
<div id='pageshare' title="Поделиться с друзьями">
<div class='sbutton' id='gb'><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like layout="box_count" show_faces="false" font=""></fb:like></div>
<div class='sbutton' id='rt'><a href="https://twitter.com/share" class="twitter-share-button" data-via="Iglousru" data-lang="ru" data-count="none">Твитнуть</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='sbutton' id='gplusone'><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><g:plusone size="tall"></g:plusone></div>
<div class='sbutton' id='su'><script type="text/javascript"><!--
document.write(VK.Share.button(false,{type: "custom", text: "<img src="http://vk.com/images/vk32.png?1" />"}));
--></script></div>
<br/><div style="clear: both;font-size: 9px;text-align:center;"><a href="http://iglous.ru/knopki-socialnyx-setej-bez-plaginov-plavayushhaya-panel-knopok-socialnyx-setej" target="blank"><font color="black">[Узнать]<font></font></font></a></div></div>
Чтобы заработала кнопка Вконтакте необходимо в файл header.php между тегамидобавить кодили тот, который будет указан у вас при выборе ( выводятся два кода, первый и нужно добавить в файл header.php).
На этом у меня все, подписывайтесь на блог, ведь дальше будет интереснее!
Похожие записи:
- Как удалить ссылки из комментариев WordPress, удаляем поле URL из комментариев
- Как вывести похожие статьи без плагинов с миниатюрой
- Как вставить рекламный блок Google AdSense без плагинов
- Как заменить плагины на код, оптимизация WordPress
- Сервисы для заработка в Twitter
Добавить комментарий