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

Установить кнопки социальных сетей за 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. увидел в интернете проводятся видео обзоры блогов. Нужно, чтобы и новый дизайн моего блога покритиковали немножко.

Понравилась статья? Поделиться с друзьями:
Комментарии: 55
  1. Мудрый Кот

    Спасибо, а то когда только блог начинал вести много полезных кнопок поставил, смотрю, а они все в разнобой…
    Вот и пришлось убрать, а теперь всё обратно поставлю =)

  2. sidash (автор)

    @Мудрый Кот: всегда рад помочь :) надеюсь у вас все получится. если возникнут проблемы- пишите в комментах

  3. Свекровушка

    А я сколько раз пыталась вставить, и все не там. На этом и бросила это дело. Кроме меня самой ими никто не пользовался.

  4. Андрей

    Спасибоа то я их по разным местам повставлял т.к. наблюдались баги,если они стояли рядом)Позже скорее всего сделаю все по вашей статье)

  5. Почти годовалый читатель

    Статья интересная, мне нравится такие кнопочки, тоже такие же на одном сайте
    Но у меня сейчас проблемка хотел бы помощи, хочу ноутбук купить для работы, а растерялся и не знаю что выбрать денег у меня около 20-25к, что посоветуете?

  6. sidash (автор)
  7. Лариса Мартынюк

    Именно то, что надо! Так хочется, чтобы на сайте все было организовано

  8. Елена

    Хоть мало кто и пользуется ими кроме хозяев сайтов, все равно они очень полезные эти кнопочки.

  9. Krusnik02

    А как их поставить вертикально?
    Например типа как вот у этого:
    http://maxkhiger.com/

    При чём под Друпал… Т.е. через свободный код, так как модулей таких нет.

  10. sidash (автор)

    @Елена: почему же? лично я часто пользуюсь такими кнопками на многих сайтах
    @Krusnik02: вот так http://dimox.name/socializ-floating-panel/

  11. Lettore

    Спасибо.
    Вот только у меня кнопка Вконтакте не появляется!
    И скажем в IE не отображается вовсе!

  12. Lettore

    @Lettore:
    С отображением кнопки разобрался!

  13. sidash

    @Lettore: ИЕ это не браузер ;)

  14. Lettore

    @sidash:
    Не сомневаюсь! :)
    Вот только статистика все же держит его на первых позициях по использованию! Вот тут и задумываться приходится!

  15. тяп-ляп

    @Lettore: по какой такой статистике IE на первом месте…

  16. Евгений

    Blogger выдаёт:
    Сообщение об ошибке в XML: Open quote is expected for attribute «{1}» associated with an element type «rel».

  17. sidash (автор)

    @Евгений: я в блоггере не силен(

  18. Dneprolab

    @Евгений:
    Используйте плагин ShareThis, очень красив и легок в установке.

  19. Vitliky

    Спасибо конечно, только на моем шаблоне после редактирования css в опере сайт начинает неправильно отображаться

  20. Евгений

    блин,что за фигня??мне он выдает такое

    VK.init({apiId: API_ID, onlyWidgets: true});

    почему у меня нет цеферок там,а просто написано API_ID?? откуда мне цифры свои взять?? нирена не могу понять

  21. sidash

    @Евгений: после того, как сделаешь все настройки, нажми вверху кнопку для сохранения настроек и будет тебе счастье;)

  22. Влад

    А я ссылки на тви и на остальные социалки делаю внутренними))))то бишь с редиректом

  23. Gaimer77

    Сегодня весь день ковырялся, так и не вставил, попробую по вашей статье сделать. За ранее спасибо!

  24. PaNick

    Полезная статья ) Когда-то тоже бился с этим. Особые проблемы были с кнопками контакта. Остальные более предсказуемо себя вели.

  25. Евгений

    а кстати на счет api_id от фэйсбука… его откуда брать?) а то я так и скапировал с тем который у тебя написан))

  26. sidash (автор)

    @Евгений: в фейсбуке ничего менять не нужно

  27. Олег

    Ну вот, а я искал про установку кнопок совсем не там, находишь как обычно — случайно.

  28. Vitliky

    @Евгений: API_ID?? -это значит, что нужно пойти в профиль Вконтакте и указать сайт, на который буде устанавливаться кнопка.

  29. Frost

    Отличная полезная статья. Не хватает только кнопки лайка от mail.ru. Думаю не стоит ее недооценивать. Или ее на каждую страницу нельзя поставить?) Если можно, просьба добавить описание по ее установке.

  30. sidash (автор)

    @Frost: отдельной кнопки мейла я не видел да и не хочу устанавливать)

  31. Александр

    Дмитрий, спасибо тебе за классную статью. Все сделал, как написано, и кнопки появились без проблем.

  32. Алексей

    Спасибо большое реализовал на своём сайте!

  33. WeB XaSeR

    @Sidash, вы хорошо рассказали про установку кнопок на WordPress, а другие платформы вниманием обделили :)
    Планирую серию похожих статей, но с большим количеством социальных сервисов, да и заточенную под Blogspot.

  34. Alice

    спасибо за статью!

    только вот такая фигня: при нажатии на лайк фейсбука, единичка по счетчику добавляется, но предложения поделиться новостью с друзьями на фейсбуке не поступает… что я не так делаю?

  35. sidash (автор)

    @Alice: в фейсбуке какой-то глюк в последнее время. для него код теперь нужно вставлять вот так
    http://sidash.ru/dobavlyaem-vidzhet-mne-nravitsya-facebook-vkontakte-na-svoy-blog/

  36. Maximal

    спасибо!
    взамен делюсь быстрым кодом 2leep, чтобы не тормозил сайт
    http://1nf.ru/internal-optimization/2leep-com-asinxronnaya-zagruzka-koda-vidzheta/

  37. sidash (автор)

    @Maximal: и вам спасибо. проблемы не замечал но код на всяк случай обновил

  38. Wolpix

    Спасибо, наконец нашёл решение, а то замучился с этими кнопками. Вроде уже через таблицы вывел, но чуточку не влазили. Нашёл ссылку на эту статью в комментариях на wpnew.ru :)
    Единственное, что огорчает — в Хроме кнопки съезжают :(

  39. sidash

    @Wolpix: а у меня в хроме все ОК

  40. Константин

    Единственное не понятно куда вставлять код, у меня отражается не там, видимо от темы многое зависит

  41. Денис Черников

    Здравствуйте!
    Отличный пример установки кнопок в один ряд!
    Есть ещё один простой способ используя всего несколько тегов — вот посмотрите тут Кнопки социальных сетей в один ряд

  42. Денис Черников

    Самая извечная проблема — это установить кнопки социальных сетей в один ряд! Постоянно с этим у всех возникают трудности!
    Я к примеру нашёл решение данной проблемы вот посмотрите — Кнопки социальных сетей в один ряд

  43. Федор

    Кнопочка фейсбука не хочет работать( Там вроде изменили их кодировку на хтмл5. Но что тут надо изменить, что бы все заработало?
    Заранее спасибо за ответ

  44. sidash
  45. Ирина

    А я по старинке, таблицей вставляю…

  46. Дмитрий

    Спасибо за материал, поставил, почти все зразу получилось, только с фейсбуком были проблемы, не показывало, чуток поигрался и сейчас все нормась. Раньше не знал как ставить горизонтально кнопки, все-время внизу проставлял. теперь буду знать.)

  47. Vitaliy

    Подскажите что делать? Кнопка фейсбука навалилась на кнопку контакта (лежит сверху на ней).

  48. sidash (автор)

    @Vitaliy: или в css отступы задали неверно, или же в самом single.php могли допустить ошибку в коде

  49. Руслан

    Подскажите если не трудно, как мне поставит вот таким образом социальные кнопки?

    http://newsinworlds.ru/news/economy/2479-rzhd-vypustil-prilozhenie-rzhd-bilety-na-baze-android-i-ios.html

  50. sidash (автор)
  51. Антон

    Спасибо за статью! Все получилось!

  52. aleksmens

    Спасибо за пост! Это отличный пример установки социальных кнопок на сайт, но я все же пользуюсь WordPress плагинами.

  53. Андрей

    отличная статья, очень помогла мне спасибо

  54. Людмила

    Это именно то, что я искала! У меня стоят кнопки соцсетей на сайте, но они мне не нравятся. Я хочу именно такие, как тут описаны, чтобы возле каждой было видно, сколько людей её нажали. Ведь это такие кнопочки, да?

  55. sidash

    @Людмила: именно они) как у меня под статьями)

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

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: