0

Как установить кнопки социальных сетей горизонтально в ряд

Опубликовано: 10.10.2011 | Рубрика: SMO/SMM, Начинающему блоггеру, Хитрости Wordpress

Установить кнопки социальных сетей за 5 минут!Поскольку за последнюю неделю мне пришлось 3 раза объяснять о том, как установить горизонтально кнопки социальных сетей на свой сайт, я решил написать этот пост, чтобы в будущем просто скидывать ссылку на него и не тратить ваше и своё время.

Перед тем, как приступить к работе, советую вам ознакомиться со статьей, написанной мною практически год назад, в которой я рассказал о влиянии кнопок социальных сетей на трафик вашего сайта. Вот ссылка на этот пост.

Ну а теперь перейдем к тому, ради чего я пишу эту статью. Если у вас все получится (а я в это уверен!), через 5 минут возле каждой их ваших статей будут красоваться вот эти кнопки:

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

Сейчас от вас потребуется 2 вещи: узнать свой никнейм на Твиттере и взять скрипт Контакта для своего сайта. С первым у вас не должно возникнуть никаких проблем (думаю свои ники все помнят :)). А вот чтобы подключить скрипт, нужно вначале создать специальное приложение, затем перейти на эту страницу, подключить новый сайт, сохранить настройки (!) и скопировать вот этот код:

<script type="text/javascript" src="http://userapi.com/js/api/openapi.js?####"></script>
<script type="text/javascript">
  VK.init({apiId: ######, onlyWidgets: true});
</script>

У каждого из вас код будет свой, поэтому будьте внимательны – не забудьте вместо решёток вставить свои цифры. Для тех кто в танке, и так и не понял, о чем идет речь – читайте эту статью.

Теперь можно вставлять кнопки социальных сетей на сайт. Открываем файл style.css и в самом конце вставляем вот этот код:

.socials {
 position: relative;
 height: 22px;
 margin-bottom: 5px;

}
.social {
 position: absolute;
}
.svkontakte {
 left: 0;
}
.sgoogle {
 left: 184px;
}
.sfacebook{
 left: 296px;
}
.stwitter {
 right: 0;
 z-index: 100;
}

Стили настраивались для моего блога, так что вам придется немного подобрать отступы  (left) для кнопки гугл+ (.sgoogle) и фейсбука (.sfacebook).

Теперь открываем файл header.php, ищем там тег <head> </head> и внутри него вставляем вот этот код ():

<!--Для Контакта. Не забудьте вставить свои цифры -->
<script type="text/javascript" src="http://userapi.com/js/api/openapi.js?####"></script>
<script type="text/javascript">
  VK.init({apiId: ######, onlyWidgets: true});
</script>
<!--Гугл Плюс -->
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">{lang: 'ru'}</script>

А вот этот код вставляем в то место, где будут выводиться кнопки. Я вставил его после статей (файл single.php):

<div class="socials">
<div class="social svkontakte">
<div id="vk_like"></div>
<script type="text/javascript">
VK.Widgets.Like("vk_like", {type: "button"});
</script>
</div>
<div class="social sgoogle">
<g:plusone></g:plusone>
</div>
<div class="social stwitter">
<a rel=”nofollow” href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="sidash">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</div>
<div class="social sfacebook">
<iframe src="//www.facebook.com/plugins/like.php?app_id=117414535029821&amp;href&amp;send=false&amp;layout=button_count&amp;width=450&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:21px;" allowTransparency="true"></iframe>
</div>
</div>

Для Твиттера не забываем вместо ника «sidash» вставить свой.

Думаю эта статья оказалась полезной для вас! Если будут вопросы – задавайте, я с радостью отвечу.

p.s. увидел в интернете проводятся видео обзоры блогов. Нужно, чтобы и новый дизайн моего блога покритиковали немножко.

Предыдущая
«
Следующая
»