Как разместить у себя на сайте ссылки Вконтакте Одноклассники

Вы имели ввиду виджет «Подписаться на группу» для добавления его на сайт. Я пропишу вам шаги, что и как нужно сделать.

Шаг 1. Перейти на ссылку с виджетами https://vk.com/dev/sites

Шаг 2. Выбрать, что именно вам нужно из виджетов:

Комментарии

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

«Запись на стене»

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

Сообщества

Виджет тесно свяжет сайт с группой или официальной страницей ВКонтакте. В виджете отображаются новости сообщества или фотографии участников.

«Мне нравится»

Виджет позволит пользователям выразить отношение к статье одним кликом или поделиться ссылкой на неё с друзьями.

Рекомендации

Виджет позволит посетителям быстро найти самые популярные материалы на Вашем сайте. Используются данные виджета «Мне нравится».

Урок 1. Как разместить реферальную ссылку на своей страничке во Вконтакте.

Опросы

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

Авторизация

Виджет позволит пользователю авторизоваться при помощи кнопки «Войти через ВКонтакте» и покажет его друзей, которые заходили на Ваш сайт.

Публикация ссылок

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

Подписаться на автора

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

Шаг 3. Для вас по вашему вопросу понятно, что вы должны выбрать вкладку «Сообщества»

Шаг 4. Выбираете, что именно вам нужно («в кружках»): новости, подписка или просто название.

Шаг 5. Настраиваете цвета, размеры

Шаг 6. Выделяете и копируете HTML код («КОД ДЛЯ ВСТАВКИ») и вставляете на сайт в нужный вам блок.

Источник: www.bolshoyvopros.ru

Поделись, не будь жадиной: основные рекомендации по оформлению кнопок социальных сетей

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

Помимо аккаунтов в соцсетях, следует добавить на сайт кнопки «Поделиться» (или по-другому share-кнопки, кнопки шеринга), которые позволят пользователям быстро добавить ссылку на ваш сайт у себя на странице или отправить в сообщении другу.

Найти кнопки соцсетей для сайта можно отдельно на страницах сервисов (например, ВКонтакте нужно зайти в раздел «Разработчикам») и последовательно разместить каждую на сайте или использовать готовые панели сторонних сервисов (рассмотрим несколько примеров ниже). Первый способ стоит использовать, если вы хотите разместить развернутые блоки с примерами последних постов, а второй позволит добавить набор кнопок в одно изменение кода.

Как взять ссылки на свои аккаунты: Ютуб, Инстаграм, ВКонтакте, Одноклассники. Бизнес онлайн.

Оформление кнопок

Для начала определимся с внешним видом кнопок. Основные рекомендации:

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

Пример незаметных кнопок:

Компания изменила цвет, но кнопки остались заметны:

Не сразу понятно, что это кнопки и что они ведут на соцсети:

Несмотря на кардинальное изменение внешнего вида, сразу понятны функции данных кнопок:

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

Кнопок не должно быть слишком много. Исследования за прошедший год показывают, что в основном россияне используют Youtube, ВКонтакте, Одноклассники, Facebook и Instagram, а также делятся информацией в WhatsApp и Viber. Обязательно учитывайте особенности аудитории вашего сайта, однако рекомендуем размещать не более 5-7 кнопок.

Ссылки должны быть рабочими. Очевидный пункт, но многие не знают, что Google+ закрыла свою соцсеть и теперь ссылка доступна только для корпоративных клиентов. Также из-за прошедших блокировок соцсети Telegram у пользователей возникают проблемы с доступом.

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

Пример слишком мелких кнопок:

По таким кнопкам сложно не попасть:

Если вы решили не добавлять отдельно каждую кнопку соцсети, а использовать готовое решение сервисов, то рекомендуем несколько из них:

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

Uptolike — не менее хороший конструктор и обилие настроек по дизайну кнопок. Есть отдельные плагины для популярных CMS.

Блок «Поделиться» от Яндекса — если не хочется заморачиваться с оформлением, то Яндекс предлагает самый простой конструктор с минимумом возможностей. Плюс данного сервиса в том, что доступно исследование через Яндекс.Метрику.

Кнопки соцсетей для сайта: где расположить?

1. Главная страница. После обзора товаров и услуг кратко расскажите об аккаунтах в соцсетях. Блок можно сделать крупным, показать последние посты. Пример привлекательного блока (по каждому изображению можно кликнуть и перейти на соответствующий пост в соцсетях): Пример более компактного блока с призывом к действию:
2. Страница о компании. Рассказывая о себе, можно внизу страницы также добавить блок с последними постами и ссылками на соцстети. Или кратко упомянуть аккаунт, как здесь:
3. Страница контактов. Если используете соцсети как один из источников связи, обязательно добавьте кнопки на данную страницу. Пример:
4. Подвал сайта. Достаточно указать только кнопки, чтобы не перегружать блок. Так пользователь сможет на любой странице сайта найти их. Лаконичный пример:

И еще 4 идеи для размещения кнопок шеринга

1. После текста статьи, инфографики, акции, т.е. после полезного материала или информации. У пользователя должно возникнуть желание поделиться важными сведениями. Ссылки лучше выравнивать по левому краю, как в примере: Или пример с призывом к действию:
2. На страницах акции. Про них, кстати, чаще всего забывают.
3. На страницах товаров. Так пользователю будет удобнее отправить ссылку другу или же оповестить всех друзей о желаемом товаре. Ссылки лучше располагать слева, под фотографиями товара:
4. На страницах услуг. Если основной продукт компании — предоставление услуг, то, как и в предыдущем пункте, следует разместить кнопки шеринга. В данном случае кнопку желательно поместить в первом экране: Или внизу страницы:

Где НЕ нужно располагать кнопки

1. В шапке сайта. Таким образом вы мотивируете пользователя уйти с сайта. Лучше показать ссылки ниже, после обзора основных возможностей сайта. Например, в данном случае кнопки привлекают слишком много внимания и выглядят ярче, чем логотип:
2. В боковом меню ссылки соцсетей также будут отображаться «слишком рано». Да и не стоит перегружать боковое меню. Антипример:
3. Закреплять на странице. Данную функцию полезно использовать для онлайн-консультанта или формы обратной связи, а кнопки соцсетей будут только отвлекать внимание пользователя.

Для кнопок репостов в соцсети можно выделить следующие ошибки:

1. Размещение без привязки к контенту. Иногда кнопки располагают так, что не ясно, чем конкретно предлагают поделиться пользователю. Всем сайтом? Такие кнопки выглядят странно:
2. Расположение рядом с контентом, который не интересен. Например, рядом с текстом о компании кнопки совершенно непривлекательны для пользователя. Также далеко не каждым товаром пользователи захотят делиться:
3. Перед полезным материалом, информацией. Чаще всего кнопки репоста размещают после заголовка. Пользователь сконцентрирован на чтении и после просмотра статьи просто забывает поделиться материалом. Лучше размещать кнопку именно после текста, чтобы напомнить пользователю о соцсетях. В данном примере кнопки находятся слишком рано:

Выводы

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

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

Источник: 1ps.ru

Оформление ссылок на социальные сети

Что касается ссылок на профили или группы — там все просто, это обычные ссылки. А вот с ссылками «поделиться» немного посложнее, т.к. там нужно в ней передать адрес текущей страницы.

В этой заметке установка таких ссылок и варианты их оформления.

• Установка ссылок «поделиться» в соц. сетях
• Примеры оформления
• Цвета социальных сетей
• Использование кнопок для пагинации страниц

Установка ссылок «поделиться» в соц. сетях:

ВКонтакте

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

Twitter

Примеры оформления:

Все варианты используют шрифт FontAwesome, но могут использовать и графические иконки (последняя ссылка со смайликом).

Вариант 1

.social-icons-1 <
padding : 0 ;
list-style : none ;
margin : 10px ;
.social-icons-1 li <
display : inline-block ;
position : relative ;
font-size : 24px ;
.social-icons-1 i,
.social-icons-1 img <
color : #fff ;
position : absolute ;
left : 18px ;
width : 24px ;
height : 24px ;
text-align : center ;
transition : all 0.3s ease-out ;
.social-icons-1 a <
display : inline-block ;
.social-icons-1 a:before <
transform : scale ( 1 ) ;
width : 60px ;
height : 60px ;
border-radius : 100% ;
display : block ;
background : linear-gradient ( 45deg, #337AB7, #2d6b9f ) ;
box-shadow : 0 2px 5px rgba ( 0,0,0,0.2 ) , 0 2px 4px rgba ( 0,0,0,0.2 ) ;
transition : all 0.3s ease-out ;
.social-icons-1 a:hover:before <
transform : scale ( 0 ) ;
transition : all 0.3s ease-in ;
.social-icons-1 a:hover i,
.social-icons-1 a:hover img <
transform : scale ( 1.8 ) ;
color : #337AB7 ;
transition : all 0.3s ease-in ;

Вариант 2

• 

.social-icons-2 <
padding : 0 ;
list-style : none ;
margin : 10px ;
.social-icons-2 li <
display : inline-block ;
position : relative ;
.social-icons-2 li a <
width : 60px ;
height : 60px ;
display : inline-block ;
text-align : center ;
margin : 0 4px ;
border-radius : 50% ;
padding : 6px ;
box-sizing : border-box ;
text-decoration : none ;
box-shadow : 0 8px 12px rgba ( 0,0,0,0.3 ) ;
background : linear-gradient ( 0deg, #ddd, #fff ) ;
transition : .5s ;
.social-icons-2 li a:hover <
box-shadow : 0 2px 5px rgba ( 0,0,0,0.3 ) ;
color : #000 ;
.social-icons-2 li a i <
display : block ;
background : linear-gradient ( 0deg, #fff, #ddd ) ;
border-radius : 50% ;
padding : 12px ;
font-size : 24px ;
color : #969696 ;
transition : .5s ;
width : 24px ;
height : 24px ;
position : absolute ;
box-sizing : content-box ;
.social-icons-2 li a:hover i <
color : #337AB7 ;
.social-icons-2 li a img <
width : 24px ;
height : 24px ;

Вариант 3

.social-icons-3 <
padding : 0 ;
list-style : none ;
margin : 10px ;
display : flex ;
justify-content : center ;
.social-icons-3 a i <
font-size : 32px ;
line-height : 64px ;
transition : 0.3s ;
.social-icons-3 a img <
width : 32px ;
height : 32px ;
margin-top : 16px ;
.social-icons-3 a <
text-decoration : none ;
position : relative ;
display : block ;
width : 64px ;
height : 64px ;
background : #BFE2FF ;
text-align : center ;
margin : 0 8px ;
box-shadow : 10px 0 10px rgba ( 0, 0, 0, 0.3 ) ;
transition : 0.3s ;
color : #337AB7 ;
.social-icons-3 a::before <
position : absolute ;
background : rgba ( 51, 122, 183, 0.3 ) ;
height : 10% ;
width : 100% ;
transform : skewX ( -45deg ) ;
transition : 0.3s ;
.social-icons-3 a::after <
position : absolute ;
left : 64px ;
background : rgba ( 51, 122, 183, 0.6 ) ;
height : 100% ;
transform : skewY ( -45deg ) ;
transition : 0.3s ;
.social-icons-3 a:hover <
transform : translate ( -5%, 5% ) ;
box-shadow : 6px 4px 20px rgba ( 0, 0, 0, 0.5 ) ;
.social-icons-3 a:hover <
background : #337AB7 ;
.social-icons-3 a:hover i <
color : #fff ;
.social-icons-3 a:hover::after <
background : #184e7c ;
.social-icons-3 a:hover::before <
background : #2a70aa ;

Вариант 4

.social-icons-4 <
display : flex ;
justify-content : center ;
flex-wrap : wrap ;
list-style : none ;
margin : 10px ;
.social-icons-4 a <
display : inline-block ;
width : 60px ;
height : 60px ;
border-radius : 100% ;
background : #efefef ;
position : relative ;
margin : 5px ;
text-align : center ;
box-shadow : 0 2px 6px #c1c1c1 ;
font-size : 32px ;
color : #337AB7 ;
transition : 0.5s ;
.social-icons-4 a img <
width : 32px ;
height : 32px ;
margin-top : 14px ;
.social-icons-4 a i,
.social-icons-4 a img <
position : relative ;
line-height : 60px ;
.social-icons-4 a:hover <
color : #fff ;
.social-icons-4 a:after <
display : block ;
position : absolute ;
background : #BFE2FF ;
border-radius : 100% ;
transition : 0.3s ;
.social-icons-4 a:hover:after <
width : 60px ;
height : 60px ;
margin-left : -30px ;
background : #337AB7 ;

Вариант 5

.social-icons-5 <
list-style : none ;
margin : 10px ;
padding : 0 ;
display : flex ;
justify-content : center ;
.social-icons-5 a <
text-decoration : none ;
color : #fff ;
width : 60px ;
height : 60px ;
display : flex ;
align-items : center ;
justify-content : center ;
border-radius : 10px ;
margin : 0 6px ;
font-size : 26px ;
background : #337AB7 ;

transition : border-top-left-radius 0.1s linear 0s, border-top-right-radius 0.1s linear 0.1s, border-bottom-right-radius 0.1s linear 0.2s, border-bottom-left-radius 0.1s linear 0.3s ;

transition : transform 0.4s linear 0s, border-top-left-radius 0.1s linear 0s, border-top-right-radius 0.1s linear 0.1s, border-bottom-right-radius 0.1s linear 0.2s, border-bottom-left-radius 0.1s linear 0.3s ;

transition : transform 0.4s linear 0s, border-top-left-radius 0.1s linear 0s, border-top-right-radius 0.1s linear 0.1s, border-bottom-right-radius 0.1s linear 0.2s, border-bottom-left-radius 0.1s linear 0.3s ;

Источник: atuin.ru