RSS Tvitter facebook gplus vk Youtube
Skip to content

 

Кнопки соц. сетей «Поделиться» на сайт без плагина

кнопки соц.сетейДорогие друзья, с вами на связи Ольга Абрамова. Вот и наступил новый 2013 год. Надеюсь, все хорошо провели встречу Нового Года, получили массу подарков и ярких впечатлений.

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

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

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

Кнопки представлены в различных вариациях (их более 300) и размерах: круглые и квадратные, вертикальные и горизонтальные, большие и маленькие, цветные и однотонные, в один или два ряда. На все вкусы и стили 🙂 Можно подключить общий счетчик по желанию.

Также можно задать задний фон, на котором расположены кнопки. Для этого ниже, при выборе функции С фоном, появляется цветовая шкала. Кнопки можно перемещать в любом порядке, как вам хочется. Есть изначальный набор кнопок, а есть дополнительный сервис, откуда вы можете выбрать другие кнопки или удалить имеющиеся. Перемещение кнопок как обычно - зажимаете мышкой и перетаскиваете.

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

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

Я вижу, что на многих сайтах и блогах уже такие кнопки установлены на страницах с постами. Веселенько смотрятся 🙂 Но фон практически никто не выбирает. А я вот решила протестировать установку кнопок не на страницах, а на главной, зафиксировав их с левой стороны сайта, чтобы они всегда были на глазах. При том, чтобы они были полупрозрачные, а при наведении курсора становились обычными. Примерно так выглядят кнопки скрипта share24.com.

Что я сделала? Я сгенерировала код на сервисе Pluso для вертикального расположения и вставила его в файл header.php после тэга body, заключив код в div и задав имя классу <div class="pluso1"></div>. Далее открыла файл style.css и прописала свойства для этого div.

Вы можете здесь что-то изменить, отступы, цвет бэкграунда, закругления можно убрать или уменьшить, изменить или вообще не подключать уровень прозрачности (opacity)  и т.д. Каждый может подогнать по своему вкусу и необходимости.

Вот такой код получился у меня:

.pluso1 {
 margin-left: -23px;
 margin-top: 0;
 padding-right: 8px;
 position: fixed;
 width: 42px;
 background:#eee; 
 border: 1px solid #ccc;
 z-index: 999; 
 border-radius: 22px;
 opacity: 0.7;
}
.pluso1:hover {
 filter: alpha(opacity=100);
 opacity: 1;
 -moz-opacity: 1;
 -khtml-opacity: 1;
}

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

Всем красивых кнопок! 🙂

Related Posts Plugin for WordPress, Blogger...
Присоединяйтесь ко мне в социальных сетях:

Присоединяйтесь ко мне в ТвиттереПрисоединяйтесь ко мне в Моём Мире
Если информация была для Вас полезна, пжл, проголосуйте за неё с помощью кнопочек

31 комментарий

  1. Оля, здравствуйте! С наступающим Рождеством и успехов в Новом году! Красивые кнопки, но на моем блоге после установки они пропадают — вероятно, конфликт с чем-то. А мне нравятся, которые в хедере. Не расскажите, где из взять и как Вы поставили в нужное место в хедере внизу?

    • Ольга Абрамова:

      Лидия, большое спасибо за поздравление 🙂
      Кнопки в хереде, это обычные значки с ссылками на соц. сети. А чтобы их установить в нужное место, надо заключить их в тэг div и прописать отступы для высоты и ширины.

  2. Только хотела спросить, где же эти кнопки, и в конце поста получила ответ 🙂
    Да, я вот как раз поставила себе на блог, закрепила их слева на постоянном месте. Но при меньшей ширине окна они действительно наплывают на сайт. И вообще слишком много всего слева получилось. Хотя идея хорошая. Придется что-то менять…

  3. Оля, спасибо за поздравления! В свою очередь так же желаю блогу процветания, а хозяйке Любви, Радости и Здоровья! У меня так же установлены кнопки с этого ресурса, но я расположил их под постом в файле single.php после строчки:
    Поделись ссылкой с Друзьями!
    <div class=?php the_content(); ? > А если нужно чтобы кнопки отражались и на главной, то тот же код или код с другими, более мелкими, вставить после такой же строки, но в файле: index.php И ничего никуда не наезжает. Вверху ставить не стал, потому что не красиво, да и посетителей будет лишний раз раздражать, ИМХО

    • Ольга Абрамова:

      Спасибо, Михаил 🙂
      Да, вариантов размещения кнопок достаточно. В данном случае моей задачей было описать именно в хедере и зафиксировать 🙂

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

    • Ольга Абрамова:

      Ну вот, можете применить 🙂

    • Ума не хватает, а фрилансера не хочется нанимать.
      Мне недавно подкинули хорошую ссылку
      http://api.yandex.ru/share/
      Человек с опытом, говорит что на соц. кнопки все равно мало нажимают (на моем сайте их было целая куча). Поудалял лишнее, это поставил — довольный. Также там есть версия для мобильного сайта

    • Ольга Абрамова:

      Вариантов кнопок много, так что каждому по душе найдутся 🙂 Самые популярные это Твиттер, Фэйсбук, Вконтакте, остальные по желанию.

  5. Да, кнопочки классные, сама не налюбуюсь, главное, что не сложно установить их.

    • Ольга Абрамова:

      Татьяна, вот именно, не сложно. Я тоже за простоту 🙂

  6. Кнопки социальных сетей стараюсь, активно использовать на сайте

  7. У меня pluso стоят, но вот нравятся мне кнопочки такие как у Вас, в блоке. Сам пробовал делать, никак в один ряд составить не мог, facebook все «выскочить» хочет :). С Новым годом!

    • Ольга Абрамова:

      Павел, большое спасибо за поздравление.
      А кнопочки и вправду капризные, сложно их построить в ряд 🙂

  8. О, что-то новенькое! Спасибо, Олечка! Всех благ Вам в Новом Году!
    Никогда не была на Алтае, рада за Вас!

    • Ольга Абрамова:

      Оксана, спасибо 🙂
      А на Алтае рекомендую побывать, там и зимой и летом есть чем заняться.

  9. Ольга, спасибо Вам за Ваш блог и за то, что Вы отдаете свои знания людям! Поздравляю с Международным Днем Спасибо. Передаю эстафету благодарности! 🙂

    Условия эстафеты просты: зайти на 10 любимых тобою блогов, поблагодарить авторов и передать эстафету.

    А в статье на моем блоге признание Вашсего блога и приглашение к новой эстафете «5 моих мотиваторов успеха».

    • Ольга Абрамова:

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

  10. Спасибо за статью и за рекомендацию, кнопки Pluso мне тоже нравятся, возможно попробую их установить

    • Ольга Абрамова:

      Рашида, пожалуйста. Кнопки установить и убрать не сложно, главное, надо ли 🙂

  11. Хорошая статья получилась. Я еще не ставил кнопки себе на блог. Теперь попробую с вашей помощью.

    • Ольга Абрамова:

      Сергей, конечно попробуйте. И стимулируйте своих читателей на них нажимать 🙂

  12. Crepeer:

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

    • Ольга Абрамова:

      Ну тут уже надо смотреть чего больше, пользы или вреда 🙂

  13. Татьяна:

    Такая хорошая статья, жаль только, что у меня не получилось. Текст почему-то в шапке появился.Может быть я что-то в коде не так прописала:
    <div class="(function() {
    if (window.pluso)if (typeof window.pluso.start == «function») return;
    var d = document, s = d.createElement(‘script’), g = ‘getElementsByTagName’;
    s.type = ‘text/javascript’; s.charset=’UTF-8′; s.async = true;
    s.src = (‘https:’ == window.location.protocol ? ‘https’ : ‘http’) + ‘://share.pluso.ru/pluso-like.js’;
    var h=d[g](‘head’)[0] || d[g](‘body’)[0];
    h.appendChild(s);
    })();
    «>

    • Ольга Абрамова:

      Татьяна, это возможно из-за того, что Вы div не закрыли? Код пишется в тэгах div……/div.

  14. Очень хорошая статья!
    Есть правда одна проблема. Когда открываешь сайт первый раз в каком либо браузере, то вертикальные кнопки отображаются не там, где задано стилем, а над шапкой сайта. Но после обновления страницы уже сбоку где мы и хотим. Как от этого избавиться?