Установка кнопок соцсетей на сайт без плагинов

Здравствуйте, уважаемые читатели моего блога. Сегодня я расскажу Вам как установить кнопки соцсетей на сайт без каких либо плагинов. Устанавливать будет так называемые официальные кнопки и выглядеть они будут так:

Но обо всём по порядку. Для начала нам необходимо получить скрипт для кнопки от фб. Для этого переходим на страницу разработчиков 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;
}

После этого у нас кнопки выводятся в одну строчку и выглядят прилично. Таким образом я вставил кнопки соцсетей без плагинов на данный блог.

С уважением, фрилансер-вебмастер Александр Шульгинов

 

 

Подпишитесь на рассылку

Чтобы быть в курсе обновлений блога, новостей по вордпресс и сайтостроительству

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Заполните поле
Заполните поле
Пожалуйста, введите корректный адрес email.

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

Обо мне

Работаю с сайтами с 2010 года.
Более 500 выполненных проектов
Специализируюсь преимущественно на сайтах-визитках, блогах и небольших интернет магазинах.
Подробнее

Хостинг ХостиЯ


Меню