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


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


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

Здравствуйте дорогие мои читатели — Sozdaiblog.ru!

В этой статье Вы узнаете, как установить кнопки социальных сетей в один ряд.

Сегодня, у Вашего покорного слуги день варения!

И мне, немного-нимало стукнуло 29 лет!

Чуть – чуть до трёх десятков не дотянул, ну это ничего я никуда пока не спешу.

Некоторое время назад мной была написана статья – «Как установить кнопки социальных сетей».

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

Да действительно в этом есть загвоздка, они то друг на друга лепятся, то куда-то волшебным образом пропадают, а иногда даже наезжают друг на дружку.

Конечно, пришлось с ними повозиться, но я человек упёртый иду до конца.

Вот и в этом случае, после определённого геморроя всё-таки нашлось оптимальное решение (извините за вульгарность).

 

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

У меня этот фокус получился следующим образом.

Каждый код кнопки социальных сетей, я обернул тегом — <div>.

Затем внутри тега , прописал стиль — style=float: и указал место, где кнопка должна находиться — right

(в моём случае справа).
.
И ко всему, добавил возможность изменять расстояние друг от друга, при помощи — width : 16%.

После долгих мучений у меня получился вот такой код:

 

<div style="float: right;">
<a href="https://twitter.com/share" rel="nofollow" data-via="SOZDAIBLOG" data-lang="ru">Твитнуть</a>
<script type="text/javascript">// <![CDATA[
!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 style="float: right; width: 16%;"><!-- Поместите этот тег туда, где должна отображаться кнопка +1. -->

</div>

<div style="float: right; width: 28%;"><!-- Put this script tag to the place, where the Share button will be -->
<script type="text/javascript">// <![CDATA[
document.write(VK.Share.button(false,{type: "round", text: "Понравилось"}));
// ]]></script></div>

<div style="float: right; width: 28%;">
<div data-send="false" data-layout="button_count" data-width="0" data-show-faces="true" data-font="arial"></div>
</div>
<div style="clear: both;"></div>

 

Можете опуститься в конец поста и посмотреть на мои труды.

Поиграйтесь со значениями – «width : 16%» и подгоните их по вашей теме оформления.

В конце всего кода, обязательно поставьте строчку:

 

<div style="clear: both;"></div>

 

иначе всё расплывётся.

Для тех, кому не хочется заморачиваться с кодами, есть специальный сервис готовых кнопок.

Переходите по ссылке.

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

Также, Вы найдёте там подробное описание по их установке.

Здесь каждый сам вправе выбирать, что ему удобнее.

 

Мой совет:

Во время установки кнопки от Facebook,  поменяйте внутри её кода значение ширины на «0» (data-width="0"). Иначе будут проблемы.

 

Вот вроде и всё.

Расскажите пожалуйста, а как Вы укротили эти кнопки?

Если Вам было интересно, не забывайте подписываться на обновления и посоветуйте друзьям, нажав в конце статьи, по одной из кнопок социальных сетей.

Ну, а Ваш покорный слуга пойдёт справлять именины, а то без меня, всё вкусное съедят!

С уважением, Денис Черников!




Сделайте, пожалуйста, доброе дело, расскажите о блоге своим друзьям:




52 комментарияА что думаете Вы?

  1. Ирина

    Денис, не переживайте о посещаемости. Люди к Вам придут,так как сайт Ваш интересный и прост в изложении. Не обязательно иметь «бизнес мышление», нужно овладеть чисто техническими фишками, которые «знатоки» пытаются нам продать, но мой девиз — в Интернете все можно найти и скачать БЕСПЛАТНО. Мой блог тоже очень молодой и вплотную заниматься им у меня мало времени, но потихоньку я двигаюсь вперед. Желаю Вам удачи всегда и во всем.

    [Ответить]

    Денис Черников ответил:

    Здравствуйте, Ирина!

    Очень рад, что Вам понравился мой блог!

    Спасибо за Вашу поддержку.

    Я стараюсь делать всё для людей и пускай, как Вы подметили у меня не бизнес мышление, но я на своём примере

    хочу показать, что любой человек может добиться многого.

    А мышление придёт!

    Не могут ведь все сразу стать Владимирами Дручинами!

    Заходите иногда ко мне! Я буду рад!

    [Ответить]

  2. Владимир

    Спасибо, тоже пришлось возиться с этими кнопками когда-то. Слегка по-другому делал. Прописывал с css условия для отступа кнопок.

    [Ответить]

    Денис Черников ответил:

    Пожалуйста, Владимир!

    Я рад, что смог Вам помочь!

    Если, что будет не получаться, заходите вместе разберёмся!

    [Ответить]

    Владимир ответил:

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

    [Ответить]

    Денис Черников ответил:

    Владимир, Вы попробуйте сами на кнопочку нажать и проанонсировать Ваш пост, затем обновите страницу! Должна появиться цифра один на счётчике. У меня та-же беда была!

    Пока кто-нибудь комментарий не оставит, счётчик не видно!

    [Ответить]

  3. Владимир

    Денис, да счетчик видно в хроме. Тут вопрос решен. А вот почему в мазилле и опере видно пол кнопки от фейсбук неясно. Кстати, на многих сайтах такое. ???

    [Ответить]

    Денис Черников ответил:

    Владимир — возможно это общий глюк, у меня тоже такое было. Сейчас вроде в норме! Но наблюдаю за своими блогами и на одном, то появиться, то исчезнет!

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

    [Ответить]

  4. Владимир

    Денис, договорились, спасибо !

    [Ответить]

    Денис Черников ответил:

    Владимир, всегда пожалуйста!Заходите! Чем могу, помогу!

    [Ответить]

  5. Юлия (moreidey.ru)

    Денис, спасибо за полезную информацию!

    Социальные кнопки с помощью специального сервиса, ссылочка на который у Вас в статье, я устанавливала на моей рекламной страничке. А для блога пользовалась плагином «Social Share Buttons». Единственное, что мне в нем не понравилось, так это странное поведение лайк-кнопок. Хотят, в некоторых постах появляются, но чаще ленятся: не хотят и не появляются :( Кнопка Нравится" от «Фейсбук» вообще только в одном посте пожелала присутствовать. Уже после установки узнала, что именно в плане лайк-настроек этот плагин немного не доделанный. Поэтому в ближайшее время собираюсь отключить в плагине именно эти кнопки (первые 2 ряда кнопок меня устраивают), и установить их в код вручную. Очень долго искала, в какой именно файл темы их можно поместить, чтобы они шли сразу после текста сообщения. Еле нашла. И в код, если честно, немножко страшно лезть, хоть и сохраняю заранее нужные файлы перед такими действиями. Так что, пока оставлю эту страничку с Вашим постом в закладках, и как только морально подготовлюсь к этому событию, обязательно воспользуюсь Вашими советами! Благодарю заранее! ;) «На конкурс»

    [Ответить]

    Денис Черников ответил:

    Здравствуйте, Юлия! Всегда, пожалуйста! Вообще, я потихоньку отхожу от плагинов и стараюсь заменить всё кодом! Кнопка фэйсбука, всегда была проблемной, даже во время установки кода приходится возиться!

    Юлия, не бойтесь экспериментировать с кодом, просто делайте резервные копии тех файлов, которые правите и запоминайте свои действия! Ну а если что, мы всегда придём на помощь! Всеми блогерами будем выручать!

    Заходите почаще!

    [Ответить]

    Юлия (moreidey.ru) ответил:

    Денис, спасибо Вам огромное за поддержку!!! Это просто непередаваемое чувство, когда знаешь, что есть люди, которые готовы помочь! Правда, я очень постараюсь не доводить свой блог до состояния, когда без помощи не обойтись ;) Резервные копии перед экспериментами с кодом делаю всегда :)

    Знаю, что плагины создают дополнительную нагрузку и лучше все же обходиться без них, но не всегда получается. Вот, например, пробовала обойтись без плагина для создания карты сайта для читателей — результат меня не очень устроил, не хватает знаний, чтобы довести начатое до ума — все рубрики и публикации отображаются, кроме тех, которые имеют родительскую рубрику :( Видимо, придется все же плагин ставить... Тем более, у Вас для этого тоже плагин стоит ;)

    [Ответить]

    Денис Черников ответил:

    Да, Юлия у меня плагин стоит! Есть решение без плагина, но оно меня пока тоже не устроило! Поддержка, должна быть всегда иначе очень сложно продвигаться, не только здесь, но и в жизни!

    [Ответить]

  6. Юлия (moreidey.ru)

    И спасибо большое за приглашение, постараюсь! :)

    Мне так понравился Ваш блог! Не смотря на техническую тематику, Вы смогли организовать на нем такую добрую, дружескую, гостеприимную атмосферу, Вы так внимательно относитесь ко всем комментаторам, что заходить к Вам действительно хочется почаще!

    P.S. Специально не хочу больше делать пометок в комментариях, потому, что это от души, а не ради конкурса ;)

    [Ответить]

    Денис Черников ответил:

    Огромное спасибо, Вам за такую поддержку и тёплые слова! Я рад всем, и стараясь помочь каждому, кто в этом нуждается! Одно время сам искал помощи, но мало кто откликнулся и я решил сам помогать, тем кто действительно в этом нуждается!

    [Ответить]

    Юлия (moreidey.ru) ответил:

    На счет помощи, это точно. А о том, как мне помогали (причем платно), я уже писала в той статье, в комментариях к которой Вы оставили приглашение на свой конкурс :(

    Ну ничего, разберемся, было бы желание!

    [Ответить]

    Денис Черников ответил:

    Не расстраивайтесь! Всё бывает! Нужно не только желание, но и стремление, терпение и упорство!)

    [Ответить]

  7. Светлана

    Здравствуйте, Денис! Очень понравилось у вас в гостях, буду заходить чаще), потому что срочно нужно обучиться, т.к. создатель нашего сайта «пропал», а обратиться мне не к кому (я только наполняла наш сайт). Очень надеюсь на вашу помощь. Ситуация такая: сегодня на главной к каждой записи появились кнопки «Поделиться в соц. сетях», до этого они были только в самой статье (Читать далее). Не знаю понятно ли я описала). Как можно убрать это и вернуть пежний вид?

    [Ответить]

    Денис Черников ответил:

    Здравствуйте, Светлана! Мне очень приятно, что Вам у нас хорошо!

    Светлана, сами по себе кнопки не появляются, обычно за них отвечает определённый код или плагин.

    Для вывода кнопок в самой статье, используется код прописанный в статье выше и вставляется в single.php, всё это есть в статье. За всё остальное отвечают файлы — page.php, archive.php, index.php. Откройте эти файлы и ищите похожий код, затем удаляйте. Только перед этим сделайте копию всех файлов, чтобы не сломать сайт.

    Как вариант, если за вывод отвечает плагин, отключите его или настройте правильно!

    [Ответить]

  8. Aleksandr

    Я устанавливал себе кнопки с помощью сервиса share42. Все очень быстро и просто, и кнопочки красиво в один ряд стоят. Можно выбирать как соц. сети, так и соц. закладки.

    Кому интересно наберите в яндексе «как установить соц кнопки с помощью share42» там даже видеоуроки есть. (На конкурс!!!)

    [Ответить]

    Денис Черников ответил:

    В правом верхнем углу блога, реализован вывод кнопок, как раз с помощью share42!)

    [Ответить]

  9. Надежда

    Потрудились наславу. Я как раз хочу подобный вариант расположения кнопок, только еще добавить в этот ряд кнопку для Майла и Одноклассников. Очень понравился дизайн вашего сайта. Особенно порадовало оригинальное оформление подписки на новый статьи. Грех не подписаться!

    [Ответить]

    Денис Черников ответил:

    Спасибо, что оценили мои старания!

    В одной из ближайших статей, обязательно расскажу, как сделать, такой живой уголок!))

    [Ответить]

  10. Артем

    Еще можно все кнопки разместить в табличке,так как это сделано у меня на сайте, и тогда не нужно вообще возиться с дивами.

    [Ответить]

    Денис Черников ответил:

    На самом деле, Артём вариантов море! Много плагинов и кодов, да и сервисов, которые дают возможность реализовать данную возможность установки кнопок и как в поговорке — каждая лягушка будит хвалить своё болото! А на самом деле, каждый вправе выбирать то, что ему больше нравиться.

    А возиться можно с любым способом реализации, кто-то даже плагин ещё не научился ставить и провозиться больше, чем Вы с дивами!

    [Ответить]

  11. Лидия

    Замечательное решение кнопок в одну линию! Давно хочу сделать, но все не решаюсь.

    [Ответить]

    Денис Черников ответил:

    Здравствуйте, Лидия! Давненько Вас не видел! Рад, что Вы с нами!

    Спасибо, что оценили!

    [Ответить]

  12. Макс

    хочу сделать кнопки как на этом сайте http: //www.europaplustv.com

    Правый верхний угол.

    Не подскажите?

    [Ответить]

    Денис Черников ответил:

    Представленный Вами сайт выдаёт ошибку!

    [Ответить]

  13. сергей

    стили желательно в style.css прописывать, так правильней. хотя можно и так конечно. Спасибо Денис за статью.

    [Ответить]

    Денис Черников ответил:

    Пожалуйста, Сергей! Можно и в стилях, кому как удобней, главное понять процесс построения.

    [Ответить]

  14. Чайник

    Добрый день, читал, все сделал как надо, но увы результат плачевный. Движок Joomla, хоть новичок повторил как вы описали. Поможете с jooml ой ?

    [Ответить]

    Денис Черников ответил:

    Здравствуйте! Думаю, что именно из-за Joomla и как вариант я не вижу, как и что Вы делаете!

    [Ответить]

  15. Айгуль

    Что-то не получается...

    [Ответить]

    Денис Черников ответил:

    Старайтесь, у меня же стоят!

    [Ответить]

  16. Александр

    Приветствую. Статейка у вас получилась довольно понятная. За что и спасибо Вам! Но вот с растяжкой что у меня не особо получилось на своём блоге. Именно с указанием процентного сдвига.

    [Ответить]

    Денис Черников ответил:

    Здравствуйте, Александр!

    У меня с первого раза тоже не получалось. Меняйте процентное значение, экспериментируйте.

    [Ответить]

  17. Наталья

    Добрый день, Денис!

    Делаю, как по примеру. Не получается в одну строчку. Подскажи, пожалуйста, где ошибка?

    //

    VK.Widgets.Like («vk_like», {type: «full», height: 18});

    [Ответить]

    Денис Черников ответил:

    Здравствуйте, Наталья!

    Вы код здесь корректно не вставите. В одну строчку обычно не получается когда не правильно указан размер между кнопок.

    [Ответить]

  18. gkozhushnyi

    Фейсбук как впихнуть ?)

    [Ответить]

    Денис Черников ответил:

    С ним всегда проблема, он всё время криво становится. Я первый раз его часа полтора подгонял!

    [Ответить]

  19. gkozhushnyi

    Ну сейчас подгоняю, вроде есть успехи, а потом значение какое то задам и все слетает к чертям))) щипитильная работенка)))

    [Ответить]

    Денис Черников ответил:

    Ну а как ты хотел! Ни кто не говорил, что будет легко!)))

    [Ответить]

    gkozhushnyi ответил:

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

    [Ответить]

    Денис Черников ответил:

    Полностью согласен. Люблю, когда голова сама доходит до нужного итога.

    [Ответить]

    gkozhushnyi ответил:

    Все, к успеху пришел) Кнопки готовы)))

    Спасибо за статейку)

    Денис Черников ответил:

    Пожалуйста! Рад, что ты справился!

  20. Валерий Андреевич.

    С новым 2014 годом и Рождеством!Денис скажите,есть плагин для вордпресс для соц. сетей,для набора подписчиков мне нравится.Удачи Вам!Валерий

    [Ответить]

    Денис Черников ответил:

    Спасибо, Валерий! Вас тоже с праздниками!

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

    [Ответить]

  21. Elena

    Большое спасибо! Очень помогли! Перекопала кучу блогов с советами, но Вы просто спасли :)

    [Ответить]

    Денис Черников ответил:

    Пожалуйста, заходите ещё!

    [Ответить]

Оставить комментарий!

Вверх