Png кнопки социальных сетей – Социальные Иконки — скачать 1812 бесплатно Иконки PNG, SVG, ICO или ICNS

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

1. Pluso.ru

   

   Это полностью бесплатный сервис, который работает следующим образом. Он автоматически генерирует специальный скрипт, при помощи которого имеется возможность посетителям интернет-проекта публиковать ссылки в социальные сети. Выглядит сервис в виде кнопочек. Установка очень проста и удобна, а размещенные кнопочки красиво смотрятся на странице.

   Сервис предлагает более трехсот вариантов разных кнопок! Можно очень просто выбрать наиболее понравившиеся.

   Установка происходит буквально в один клик. Имеется статистика переходов.

2. Share42.com

   

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

3. Tech.Yandex.ru

   Этот удобный сервис от Яндекса позволяет быстро и просто разместить специальный блок под названием «Поделиться». Кнопки очень удобные и пользователь сможет очень быстро добавить анонс статьи в свой аккаунт. Для установки необходимо поместить скрипт в необходимое место на созданном сайте.

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

   Далее система автоматически сгенерирует исходный код, который нужно будет установить у себя на блоге. К основным преимуществам этого сервиса можно отнести то, что скрипт не ставит на созданном блоге исходящие ссылки. Также имеется возможность подключения Яндекс.Метрики, для ведения статистики.

4. Social-Likes

   

   Данный сервис предлагает пользователям разместить на своем сайте очень красивые и стильные кнопочки социальных сетей. Созданная сервисом форма использует css и javascript. Сгенерированная форма будет прекрасно вписываться в дизайн любого интернет-проекта. Кнопки «лайков» выполнены с использованием современной технологии jquery. Подключение очень простое и не вызовет трудностей даже у начинающих. Загрузка происходит очень быстро.

5. Odnaknopka.ru

   

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

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

6. Pip.Qip.ru

   

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

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

P.S. Спасибо за внимание. А какой сервис предпочитаете вы? Жду ваши комментарии. 🙂

blogoshpora.ru

Оформляем кнопки соц сетей для сайта

Как Вы думаете, можно ли совместить кнопки социальных сетей и изображения? Чтобы и то и другое смотрелось очень красиво и креативно. Да, можно это сделать очень интересным способом. И даже не одним, а несколькими. А если быть точнее, то в статье Вы найдете 12 способов сделать классные эффекты для кнопок социальных сетей при наведении на изображение. В некоторых случаях необходимо не просто наведение, а еще и клик мыши, что также добавляет интерактива. Необычный способ выделить свой сайт, используя именно такие эффекты при наведении на изображение.

Все 12 примеров смотрите и скачивайте по ссылке ниже:

Смотреть примерыСкачать

Кстати, по поводу эффектов при наведении, на сайте по этой теме есть еще парочка статей:

Понравился эффект — используйте!

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

(наведите на изображение)

Довольно привлекательный способ выделить самые важные изображения как на сайте так на одностраничном продающем сайте. Но, как я уже писал, эффектов значительно больше (12!).

Шаг 1 — HTML

Для иконок, которые Вы видите на кнопках социальных сетей, используется FA (Font Awesome). Подключаются эти иконки одной строкой между блоками <head></head>

HTML КОД

1

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

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

Копируем оттуда блок со всеми кнопками социальных сетей и изображениями. Этот блок <div> находится под список меню со всеми эффектами. В моём случае этот блок имеет такой вид:

HTML КОД

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<div>
    <div>
        <a href="#">
            <i></i>
            Вконтакте
        </a>
        <a href="#">
            <i></i>
            Facebook
        </a>
        <a href="#">
            <i></i>
            Twitter
        </a>
    </div>
 
    <div>
        <img src="images/tree.jpg" alt="California surf">
    </div>
</div>

Вся необходимая структура есть. Осталось задать только стили в CSS. Поэтому переходим ко 2-му и, одновременно, последнему шагу.

Шаг 2 — CSS

Стили находятся в каждом HTML файле между блоками <head></head>. То есть в каждом файле с разными эффектами, в этом блоке вверху документа находятся соответствующие стили.

Вам необходимо взять эти стили и поместить их в Ваш файл стилей:

CSS КОД

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99

.image-effect-fall-back {
    width: 500px;
    height: 300px;
    position: relative;
    margin: 0 auto;
    -webkit-perspective: 800px;
    perspective: 800px;
}
 
.image-effect-fall-back .image-layer{
    position: absolute;
    top:0;
    left: 0;
    height: 300px;
    -webkit-transition: 0.6s;
    transition: 0.6s;
    z-index: 1;
}
 
.image-effect-fall-back:hover .image-layer{
    -webkit-transform: rotateX(70deg);
    transform: rotateX(70deg);
    overflow: visible;
}
 
.image-effect-fall-back .image-layer img{
    height: 100%;
}
 
.image-effect-fall-back .image-layer:before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 100px 50px rgba(0, 0, 0, 0.5);
    opacity: 0;
 
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
    -webkit-transform: rotateX(114deg) translateZ(-26px)  translateY(110px) scale(0.75);
    transform: rotateX(114deg) translateZ(-26px)  translateY(110px) scale(0.75);
    -webkit-transform-origin: bottom;
    -ms-transform-origin: bottom;
    transform-origin: bottom;
}
 
.image-effect-fall-back:hover .image-layer:before {
    opacity: 0.3;
}
 
.image-effect-fall-back .share-layer{
    position: absolute;
    bottom: 100px;
    left: 0;
    width: 100%;
    height: 100px;
    opacity: 0;
    z-index: 10;
 
    -webkit-transition: 0.6s;
    transition: 0.6s;
 
    -webkit-transform: rotateX(70deg);
    transform: rotateX(70deg);
}
 
.image-effect-fall-back:hover .share-layer {
    opacity: 1;
 
    -webkit-transform: rotateX(0deg) translateY(-70px);
    transform: rotateX(0deg) translateY(-70px);
}
 
/*стили для всех кнопок*/
.share-button{
    display: inline-block;
    text-decoration: none;
    color: #ffffff;
    padding: 12px;
    width: 90px;
    border-radius: 2px;
    margin:	25px 10px;
}
 
/*цвет кнопок социальных сетей*/
.share-via-vk {
    background-color:#4C75A3;
}
 
.share-via-facebook {
    background-color:#3b5998;
}
 
.share-via-twitter {
    background-color:#00aced;
}

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

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

Вывод

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

Успехов!

Источник: Оригинал

С Уважением, Юрий Немец

Эффекты кнопок социальных сетей для сайта 4.83/5 (96.67%) 6 голос(ов)

Понравилась статья — расскажи друзьям! 🙂

Facebook

Twitter

Вконтакте

Одноклассники

Google+

www.sitehere.ru

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

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

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

1. Блок «Поделиться» — Технологии Яндекс
Блок «Поделиться» помогает посетителям сайта быстро публиковать ссылки на понравившиеся страницы в соцсетях и блогах. Создайте блок «Поделиться» с помощью конструктора, а дополнительные параметры ищите в документации.

2. Лёгкий способ получить ссылки на сайт – QIP.RU
Разместите кнопку на сайте и дайте посетителям возможность добавлять понравившиеся материалы сайта в закладки, блоги и соцсети. Три шага: где разметите кнопку (сайт, Blogger или WordPress), стиль кнопок (готовые варианты) и получить кнопку.

3. Кнопки для добавления контента в соцсети — Pluso
Разместите кнопки и дайте посетителям возможность делиться понравившимися страницами в соцсетях, а также печатать, отправлять письмо и добавлять закладки.

4. Сервис социальной активности — UpToLike
Кастомизированные кнопки соцсетей с возможностью задать цвет, форму, размер и спецэффекты. Дополнительные фишки – виджет расшаривания картинок PicShare, функция «Цитирование» и кастомизированная функция Following.

5. Одна кнопка! — для всех сервисов закладок и соцсетей
Выберите вид кнопку. Где будет установлена кнопка: сайт, Blogger или WordPress. Добавьте кнопку.

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

1. Красивые социальные кнопки для сайта — goodshare.js
Отображение кнопок практически на любом устройстве. Чистый код. Краткая документация. SEO friendly.

2. Скрипт кнопок социальных закладок и сетей — Share42
Выберите размер и отметьте иконки сервисов, которые хотите использовать на сайте. Выберите нужные опции. Посмотрите, как это будет выглядеть и/или скачайте готовый скрипт. Установите скрипт на сайт WordPress, Drupal, другое.

3. Красивые кнопки «лайков» соцсетей с использованием jQuery — Social Likes
Скрипт кнопок «лайков» со счётчиками в едином стиле для соцсетей: Facebook, Twitter, ВКонтакте, Одноклассники, Мой мир, Google+ и Pinterest.

Зарубежные аналоги кнопок социальных сетей для сайта

1. Share Buttons — AddThis
Кнопки шаринга помогут вам увеличить аудитория сайта, путем привлечения посетителей с других ресурсов и соцсетей, через распространяемый контент.

2. Get the Share Button — ShareThis
Выберите платформу: WordPress, Drupal, Joompla!, Blogger, TypePad, tumblr, Newsletter, IOS & Android, другое. Выберите стиль снопок (кнопки или тулбар), Настройте кнопки: выберите сервисы (кнопки поделиться или социальные плагины), укажите размер кнопок, другое. Получите код.

3. Share buttons for WordPress, Tumblr, Drupal, Joomla and all website — Shareaholic
Сделайте так, чтобы посетители сайта могли поделиться вашим контентом с друзьями в один клик. Выберите: тему, размещение, размер, счётчик, выравнивание и другие настройки кнопок и получите код.

4. Social Sharing — Po.st
Получить больше пользы от шаринга в соцсетях. Сервис позволит облегчить процесс шаринга в соцсетях для посетителей, что позволит увеличить органический трафик сайта.

5. Share Buttons for Any Website — AddToAny
Получите код кнопок социальных сетей для любого сайта. Выберите тип и стиль кнопок, укажите e-mail и другие опции или выберите одну из платформ: WordPress, Drupal, Tumblr, Joomla, Elgg, WordPress.com, Blogger, TypePad или FeedFlare. Получите код кнопок.

Короткая ссылка: http://goo.gl/XjatQ7

chuvyr.ru

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

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

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

Скрипт социальных кнопок для сайта предоставляют много источников:

1. Социальные кнопки яндекса;
2. Плагины социальных кнопок для WordPress;
3. Сервисы социального шаринга и дополнительных инструментов.

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

Социальные кнопки Яндекса

Уже много лет сервис Яндекса предоставляет возможность размещать социальные кнопки с помощью его скрипта. Очень удобный и простой способ получить скрипт социального обмена. Очень большой выбор социальных сетей для шаринга.

Есть возможность размещения:

• Простых иконок;
• Иконок со счетчиками;
• Показывать только несколько сетей и и кнопки меню для открытия дополнительных;
• Кнопок маленького размера.

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

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

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

Изменение стиля социальных кнопок Яндекса

Чтобы изменить внешний вид, необходимо переопределить стили Яндекса в своем CSS файле.

.b-share_theme_counter .b-share {
padding: 0 !important;
}

.b-share_theme_counter .b-share__link {
border-radius: 0px !important; /*убираем скругление иконок*/
background-color: #555 !important; /*делаем фон серым*/
}

.b-share_theme_counter .b-share__link:hover {
opacity: 0.8; /*добавляем прозрачность при наведении*/
}

.b-share_theme_counter .b-share-icon {
background-image: url(‘http://ваш сайт.ру/files/b-share_counter_large.png’) !important;
/*заменяем стандартное изображение иконок на свое*/
}

.b-share_theme_counter .b-share-counter {
color: #fff; /*задаем цвет текста*/
}

Меняем размер иконок:

.ya-share2__container_size_m .ya-share2__icon {
height: 40px !important;
width: 40px !important;
background-size: 40px 40px !important;
}

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

Плагины социальных кнопок для WordPress

Easy Social Share Buttons

Этот премиум плагин доступен на CodeCanyon.net за $19. Это один из самых универсальных плагинов подобного рода, благодаря одному простому факту — плагин позволяет размещать бар с кнопками для социальных сетей абсолютно в любом месте, где это может вам понадобиться.

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

При помощи плагина можно добавлять плавающий бар иконок, размещать кнопки сверху/снизу поста, создавать статический или даже плавающий бар иконок для мобильной версии. Вы также сможете использовать триггеры, например, для добавления функций pop-up и fly-in.

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

Monarch от Elegant Themes

Monarch — это платный плагин для социальных сетей, который поставляется с тарифными планами Elegant Theme’s Developer и Lifetime Access. Данные планы включают в себя более 85 премиум тем для WordPress и все другие плагины от этого разработчика. К сожалению, политика компании такова, что вы не можете купить отдельно сам только плагин. Вы оплачиваете полный тарифный план и получаете доступ сразу ко всем премиум плагинам и темам разработчика.

Monarch — это отзывчивый плагин, который позволит вам размещать эффектные плавающие бары по бокам поста или статические горизонтальные бары в начале/конце поста. Monarch предоставляет более 20 иконок для социальных сетей, есть image-sharing, pop-up и fly-in функции, а также множество настроек для оформления и дизайна.

Social Warfare

Social Warfare — интересный плагин от компании Warfare Plugins. Он не настолько универсален, как предыдущие два варианта, поскольку позволяет добавлять на сайт только плавающий бар, который прилипает к нижней части экрана. Но этот недостаток компенсируется замечательными ценовыми вариантами и огромным количеством других функций.

Плагин предоставляет аналитику, возможность показывать количество репостов только после того, как постом поделится определенное количество людей, также есть более 75 различных вариантов для оформления. Можно использовать плагин для добавления функции click-to-tweet в ваши посты.

Бесплатные плагины для социальных сетей

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

SumoMe Share

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

SumoMe Share Pro поставляется с дополнительными функциями. Например, здесь есть возможность удалить брендинг SumoMe из вашего бара, можно отслеживать UTM-метки, чтобы узнать, какие социальные сети приносят наибольший трафик и т.д.

GetSocial

GetSocial является бесплатным адаптивным плагином для социальных сетей. Он позволяет вам размещать плавающий бар сбоку вашего поста или статический бар сверху/снизу. В бесплатной версии вы также найдете различные варианты для оформления.

Разработчики представили и премиум версию плагина (с ежемесячной платой). В ней вы найдете функцию для добавления плавающего бара для мобильных версий и дополнительные варианты дизайна, есть функция click-to-tweet. В платной версии у вас также будет возможность убрать счетчик с кнопок, который отвечает за количество репостов.

AddToAny Share Buttons

AddToAny Share Buttons — это один из самых популярных WordPress плагинов для социальных сетей с более чем 200,000 активных установок. Этот плагин ставит простые плавающие бары по бокам вашего поста, а также в его начале или конце.

С этим плагином вы сможете изменять некоторые функции, например, задавать размеры иконок для социальных сетей, устанавливать расстояние между началом страницы и самим баром, и т.д. Одной из самых приятных и чуть ли не уникальных особенностей этого плагина является то, что он позволяет добавлять иконки более 90 различных социальных сетей, сообществ и услуг.

Custom Share Buttons with Floating Sidebar

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

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

Sharify Social Share Buttons

Это далеко не самый известный плагин, но его отзывчивый и приятный дизайн делают его одним из основных претендентов на звание лидера в нашем списке «Лучшие бесплатные плагины 2016 года». Это простой плагин с действительно отличным, аккуратным дизайном, результат работы которого будет гармонично смотреться на вашем сайте.

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

Социальные кнопки и дополнительные инструменты AddThis

Здесь бы я хотел рассмотреть очень удобный по моему мнению инструмент предоставляемый сервисом AddThis. Который предлагает для использования:

1. Кнопки социальных сетей;
2. Кнопки подписки в соцсетях;
3. Похожие материалы;
4. И многое др…

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

Сервис может работать абсолютно на любом движке и даже на HTML сайтах. Усли же вы пользуетесь WordPress, то вам доступен плагин, который упростит работу с сервисом.

В другие же движки можно подключить размещением кода на страницу в шаблоне.

А теперь по порядку:

Чтобы подключится к сервису и пользоваться бесплатно почти всеми его возможностями — нам прийдется пройти простенькую регистрацию. После чего мы попадаем в личный кабинет сервиса.

Инструменты

В инструментах нам доступны

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

Социальные кнопки поделится

Социальные кнопки можно разместить на ПК с левой или с правой стороны экрана, на мобильных сверху или снизу.

По нажатию Add more Services доступны все популярные социальные сети, как зарубежные, так и наши.

Рекомендуемые статьи

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

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

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

Как я отмечал в своей статье, как ускорить сайт на WordPress , по PageSpeed Insight показатель понижения скорости от использования AddThis кода на сайте всего 1%.

Вы можете добавлять разное количество сайтов, по каждому сайту получать статистику и все это на бесплатной основе. Сервис действительно очень удобен. Сайт сервиса www.addthis.com.

Вас могут заинтересовать:

ddr5.ru