Sozdaiblog.ru
Назад

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

Опубликовано: 25.04.2012
Время на чтение: 8 мин
52
4

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

Здравствуйте дорогие мои читатели — 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"). Иначе будут проблемы.

 

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

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

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

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

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

Поделиться
Похожие записи
Комментарии:
  • Ирина
    Опубликовано: 30.04.2012 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 30.04.2012 Ответить на сообщение

      Здравствуйте, Ирина!
      Очень рад, что Вам понравился мой блог!
      Спасибо за Вашу поддержку.
      Я стараюсь делать всё для людей и пускай, как Вы подметили у меня не бизнес мышление, но я на своём примере
      хочу показать, что любой человек может добиться многого.
      А мышление придёт!
      Не могут ведь все сразу стать Владимирами Дручинами!
      Заходите иногда ко мне! Я буду рад!

  • Владимир
    Опубликовано: 01.05.2012 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 01.05.2012 Ответить на сообщение

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

      • Владимир
        Опубликовано: 02.05.2012 Ответить на сообщение

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

        • Денис Черников
          Опубликовано: 02.05.2012 Ответить на сообщение

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

  • Владимир
    Опубликовано: 03.05.2012 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 03.05.2012 Ответить на сообщение

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

  • Владимир
    Опубликовано: 03.05.2012 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 04.05.2012 Ответить на сообщение

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

  • Юлия moreideyru
    Опубликовано: 26.06.2012 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 26.06.2012 Ответить на сообщение

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

      • Юлия moreideyru
        Опубликовано: 27.06.2012 Ответить на сообщение

        Денис, спасибо Вам огромное за поддержку!!! Это просто непередаваемое чувство, когда знаешь, что есть люди, которые готовы помочь! Правда, я очень постараюсь не доводить свой блог до состояния, когда без помощи не обойтись Резервные копии перед экспериментами с кодом делаю всегда
        Знаю, что плагины создают дополнительную нагрузку и лучше все же обходиться без них, но не всегда получается. Вот, например, пробовала обойтись без плагина для создания карты сайта для читателей — результат меня не очень устроил, не хватает знаний, чтобы довести начатое до ума — все рубрики и публикации отображаются, кроме тех, которые имеют родительскую рубрику Видимо, придется все же плагин ставить... Тем более, у Вас для этого тоже плагин стоит

        • Денис Черников
          Опубликовано: 27.06.2012 Ответить на сообщение

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

  • Юлия moreideyru
    Опубликовано: 27.06.2012 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 27.06.2012 Ответить на сообщение

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

      • Юлия moreideyru
        Опубликовано: 27.06.2012 Ответить на сообщение

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

        • Денис Черников
          Опубликовано: 27.06.2012 Ответить на сообщение

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

  • Светлана
    Опубликовано: 29.06.2012 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 29.06.2012 Ответить на сообщение

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

  • Aleksandr
    Опубликовано: 30.06.2012 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 30.06.2012 Ответить на сообщение

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

  • Надежда
    Опубликовано: 29.07.2012 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 29.07.2012 Ответить на сообщение

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

  • Артем
    Опубликовано: 30.08.2012 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 30.08.2012 Ответить на сообщение

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

  • Лидия
    Опубликовано: 10.09.2012 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 10.09.2012 Ответить на сообщение

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

  • Макс
    Опубликовано: 17.10.2012 Ответить на сообщение

    хочу сделать кнопки как на этом сайте http: //www.europaplustv.com
    Правый верхний угол.
    Не подскажите?

    • Денис Черников
      Опубликовано: 17.10.2012 Ответить на сообщение

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

  • сергей
    Опубликовано: 23.11.2012 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 23.11.2012 Ответить на сообщение

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

  • Чайник
    Опубликовано: 18.02.2013 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 18.02.2013 Ответить на сообщение

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

  • Айгуль
    Опубликовано: 09.03.2013 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 09.03.2013 Ответить на сообщение

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

  • Александр
    Опубликовано: 20.03.2013 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 20.03.2013 Ответить на сообщение

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

  • Наталья
    Опубликовано: 10.04.2013 Ответить на сообщение

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

    //

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

    • Денис Черников
      Опубликовано: 10.04.2013 Ответить на сообщение

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

  • gkozhushnyi
    Опубликовано: 24.08.2013 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 24.08.2013 Ответить на сообщение

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

  • gkozhushnyi
    Опубликовано: 24.08.2013 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 24.08.2013 Ответить на сообщение

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

      • gkozhushnyi
        Опубликовано: 24.08.2013 Ответить на сообщение

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

        • Денис Черников
          Опубликовано: 24.08.2013 Ответить на сообщение

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

          • gkozhushnyi
            Опубликовано: 24.08.2013 Ответить на сообщение

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

          • Денис Черников
            Опубликовано: 24.08.2013 Ответить на сообщение

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

  • Валерий Андреевич
    Опубликовано: 09.01.2014 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 09.01.2014 Ответить на сообщение

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

  • Elena
    Опубликовано: 20.01.2014 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 20.01.2014 Ответить на сообщение

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

Имя
Укажите своё имя и фамилию
E-mail
Без СПАМа, обещаем
Текст сообщения
Отправляя данную форму, вы соглашаетесь с политикой конфиденциальности и правилами нашего сайта.