Здравствуйте, уважаемые читатели моего блога. Сегодня я расскажу Вам как установить кнопки соцсетей на сайт без каких либо плагинов. Устанавливать будет так называемые официальные кнопки и выглядеть они будут так:
Но обо всём по порядку. Для начала нам необходимо получить скрипт для кнопки от фб. Для этого переходим на страницу разработчиков https://developers.facebook.com/ Далее идём по верхней ссылке Docs и слева у нас появляется Core Concepts. Выбираем Social Plugins и соответственно Like button.
Таким образом мы попадаем
Step 1 — Get Like Button Code
Вводим урл нашего сайта и нажимаем get codeКод генерируется и нам необходимо скопировать первую его часть. Далее то что мы скопировали необходимо вставить в файл header.php нашей темы перед тегом </body>.
На этом мы останавливаемся и идём за кнопкой от вконтакте.
Аналогично переходим на страницу разработчиков по этому адресу http://vk.com/developers.php, выбираем виджеты и сторонние сайты и соответственно виджет «мне нравится».
В поле сайт делаем подключить новый сайт и вводим урл и название сайта. Сохраняем. Выбираем вариант и высоту кнопки. Код ля вставки автоматически генерируется. И тут же нам опять необходимо скопировать первую половину кода. Грубо говоря от put до put, и также вставляем в header.php следом после кода от фб. На этом основная часть работы выполнена.
Далее вставляем код сами кнопок в то место где вы хотите чтобы они отображались. я обычно их вставляю в самый верх файла footer.php
так вот вставляем собственно вот этот код
<div class=»fb»><div class=»fb-like» style=»margin-bottom:3px» data-href=»» data-send=»true» data-layout=»button_count» data-width=»400″ data-show-faces=»true» data-font=»verdana»></div></div>
<!— Поместите этот тег туда, где должна отображаться кнопка +1. —>
<div class=»gp»><g:plusone size=»medium»></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 class=»tw»>
<a href=»https://twitter.com/share» class=»twitter-share-button» data-lang=»ru»>Твитнуть</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=»vk»>
<!— Put this div tag to the place, where the Like block will be —>
<a id=»vk_like» style=»margin-top:10px»></a>
<script type=»text/javascript»>
VK.Widgets.Like(«vk_like», {type: «full», height: 18});
</script></div>
вставили и у нас получается что кнопки лежат одна под другой. Нам надо их выровнять, сделать чтобы они шли в одну строчку. для этого необходимо добавить небольшой фрагмент кода в файл style.css нашей темы.Вот и код:
.fb
{
margin-left:5px;
}
.gp
{
margin-left:210px;
margin-top:-23px;
}
.tw
{
margin-left:275px;
margin-top:-23px;
}
.vk
{
margin-left:390px;
margin-top:-21px;
}
После этого у нас кнопки выводятся в одну строчку и выглядят прилично. Таким образом я вставил кнопки соцсетей без плагинов на данный блог.
С уважением, фрилансер-вебмастер Александр Шульгинов
