Кнопки в контакте html

Кнопки «поделиться» для сайта

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

.share-buttons < display: flex; flex-wrap: wrap; >.share-buttons a < margin-bottom: 5px; width: 40px; height: 40px; >.share-buttons a:not(:last-child) < margin-right: 5px; >.share-buttons .facebook < background: url("../img/share-btns.png") no-repeat left top; >.share-buttons .vkontakte < background: url("../img/share-btns.png") no-repeat -168px top; >.share-buttons .ok < background: url("../img/share-btns.png") no-repeat -126px top; >.share-buttons .twitter < background: url("../img/share-btns.png") no-repeat -42px top; >.share-buttons .pinterest < background: url("../img/share-btns.png") no-repeat -210px top; >.share-buttons .mail < background: url("../img/share-btns.png") no-repeat -294px top; >.share-buttons .telegram < background: url("../img/share-btns.png") no-repeat -672px top; >

Так просто можно добавить кнопки «поделиться» на ваш сайт.

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

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

Поделиться в фейсбук

https://www.facebook.com/sharer.php?u=ПОЛНЫЙ_АДРЕС_ТЕКУЩЕЙ_СТРАНИЦЫ

Поделиться вконтакте

https://vkontakte.ru/share.php?url=ПОЛНЫЙ_АДРЕС_ТЕКУЩЕЙ_СТРАНИЦЫ

Поделиться в ok

https://www.odnoklassniki.ru/dk?st.cmd=addShare&st.s=1&st._surl=ПОЛНЫЙ_АДРЕС_ТЕКУЩЕЙ_СТРАНИЦЫ&st.comments=ОПИСАНИЕ

Поделиться в телеграм

https://telegram.me/share/url?url=ПОЛНЫЙ_АДРЕС_ТЕКУЩЕЙ_СТРАНИЦЫ

Поделиться в pinterest

https://ru.pinterest.com/pin/create/button/?url=ПОЛНЫЙ_АДРЕС_ТЕКУЩЕЙ_СТРАНИЦЫ

Для pinterest необходимо так же добавить изображение записи (страницы)

data-media="АДРЕС_ИЗОБРАЖЕНИЯ"

Поделиться в twitter

https://twitter.com/intent/tweet?text=ТАЙТЛ_СТАТЬИ(ЗАГОЛОВОК). Описание. Ссылка

Поделиться в @Мой мир mail.ru

https://connect.mail.ru/share?url=ПОЛНЫЙ_АДРЕС_ТЕКУЩЕЙ_СТРАНИЦЫ

Для @Мой мир необходимо так же добавить изображение записи (страницы).

data-media="АДРЕС_ИЗОБРАЖЕНИЯ"

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

И далее добавлять необходимые стили.

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

Поделиться в Linkedin

Чтобы поделиться в Linkedin используйте следующий код.

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

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

Надеюсь, вам понравилась данная информация. Если вам интересна тема web-разработки, то можете следить за выходом новых статей в Telegram.

Статьи из данной категории:

Комментарии ( 5 )

Подскажите пожалуйста, как быть, если я пишу сайт на локальном сервере Open Server, какой полный адресс указывать? https://www.facebook.com/sharer.php?u=ПОЛНЫЙ_АДРЕС_ТЕКУЩЕЙ_СТРАНИЦЫ на типо: /roads/road_1.php?

А зачем вам указывать локальный адрес? Вы же его не будите расшаривать. Вам нужно указывать глобальный адрес (адрес сайта, который будет на хостинге).

Спасибо! Но, не совсем понял, можете объяснить если не сложно? Или показать хотя бы как пример как записать адресс в моем случае? Ведь домена у меня еще нет. Просто пишется код в open server. И где мне тогда в моем случае взять глобальный адресс?

Источник

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

Узнать, как стилизовать кнопки социальных сетей с помощью CSS.

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

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

Шаг 1) Добавить HTML:

Пример

Шаг 2) Добавить CSS:

Square Пример

/* Стиль все шрифты иконок */
.fa padding: 20px;
font-size: 30px;
width: 50px;
text-align: center;
text-decoration: none;
>

/* Добавить эффект наведения, если вы хотите */
.fa:hover opacity: 0.7;
>

/* Установите определенный цвет для каждого бренда */

/* Facebook */
.fa-facebook background: #3B5998;
color: white;
>

/* Twitter */
.fa-twitter background: #55ACEE;
color: white;
>

Круглая кнопка

Совет: Добавить border-radius:50% для создания круглых кнопок и уменьшения width :

Rounded Пример

.fa <
padding: 20px;
font-size: 30px;
width: 30px;
text-align: center;
text-decoration: none;
border-radius: 50%;
>

Совет: Зайдите на наш учебник Иконки, чтобы узнать больше о значках.

Зайдите на наш учебник CSS Кнопки, чтобы узнать больше о том, как стилизовать кнопки.

Мы только что запустили
SchoolsW3 видео

ВЫБОР ЦВЕТА

Сообщить об ошибке

Если вы хотите сообщить об ошибке или внести предложение, не стесняйтесь отправлять на электронное письмо:

Ваше предложение:

Спасибо Вам за то, что помогаете!

Ваше сообщение было отправлено в SchoolsW3.

ТОП Учебники

ТОП Справочники

ТОП Примеры

Получить сертификат

SchoolsW3 оптимизирован для бесплатного обучения, проверки и подготовки знаний. Примеры в редакторе упрощают и улучшают чтение и базовое понимание. Учебники, ссылки, примеры постоянно пересматриваются, чтобы избежать ошибок, но не возможно гарантировать полную правильность всего содержания. Некоторые страницы сайта могут быть не переведены на РУССКИЙ язык, можно отправить страницу как ошибку, так же можете самостоятельно заняться переводом. Используя данный сайт, вы соглашаетесь прочитать и принять Условия к использованию, Cookies и политика конфиденциальности.

Источник

CSS3 кнопки социальных сервисов

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

Иконки созданы при помощи иконочного шрифта, сгенерированного в сервисе IcoMoon.io, подробнее об этом Вы можете ознакомиться в данной статье.

Пример CSS3 кнопок различных социальных сервисов

Иконки социальных сервисов

Для того, чтобы подключить к сайту иконки социальных сервисов, необходимо скачать приложенный архив и распаковать его содержимое в следующую директорию Вашего сайта: /templates/шаблон/fonts . В итоге получается 4 файла иконочного шрифта и 1 css файл, размещающий в себе код вывода иконок.

В исполняемом файле шаблона, который в большинстве случаев находится по следующему пути: /templates/шаблон/index.php , прописываем между тегами . код подключения css файла:

Если Вы используете шаблон от студии Yootheme, то исполняемый файл шаблона и путь к нему будут следующими: /templates/шаблон/layouts/theme.php

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

Половина дела сделана — иконочный шрифт подключен к сайту, осталось создать кнопки и вывести через них иконки социальных сервисов.

HTML разметка кнопок социальных сервисов

/*Кнопка Яндекс*/ /*Кнопка Google+*/ /*Кнопка "Одноклассники"*/ /*Кнопка Мейл.ру*/ /*Кнопка Вконтакте (малый логотип)*/ /*Кнопка Вконтакте (международный логотип)*/ /*Кнопка Facebook*/ /*Кнопка Twitter*/ /*Кнопка Instagram*/ /*Кнопка Youtube*/ /*Кнопка Youtube (значок)*/ /*Кнопка Vimeo*/ /*Кнопка Twich*/ /*Кнопка Whatsapp*/ /*Кнопка Skype*/

CSS стили кнопок социальных сервисов

.social-button < -moz-box-sizing: border-box; box-sizing: border-box; display: inline-block; border-radius: 50%; //скругление углов кнопки width: 54px; //размер кнопки по ширине height: 54px; //размер кнопки по высоте background: #118EC7; //цвет кнопки в статичном виде border: none; line-height: 54px; color: #fff; //цвет иконки в статичном виде font-size: 27px; //размер иконки text-align: center; /* Скорость анимации */ -webkit-transition: box-shadow .2s ease-out, background-color .2s ease-out; -moz-transition: box-shadow .2s ease-out, background-color .2s ease-out; transition: box-shadow .2s ease-out, background-color .2s ease-out; margin-bottom: 10px; -webkit-user-select: none; >.social-button:hover, .social-button:focus < text-decoration: none!important; background-color: rgba(255, 255, 255, 0); //фон кнопки при наведении курсора color: #118EC7; //цвет иконки при наведении курсора text-decoration: none; outline: none; box-shadow: 0 0 0 3px #118EC7; //цвет рамки при наведении курсора border: none >

Изменение внешнего вида кнопок

За счет CSS свойств border-radius (скругление углов), background (цвет фона), color (цвет текста), box-shadow (тень, в данном случае рамка при наведении) и width/height (ширина/высота кнопки) можно визуально преобразить внешний вид кнопки. Рассмотрим пару наглядных примеров.

Пример №1

Цвет фона оранжевый background: #F2720C; , иконка белого цвета в статике color: #fff; , квадратный вид кнопки border-radius: 0%; , иконка черного цвета при наведении color: #000; , рамка черного цвета при наведении box-shadow: 0 0 0 3px #000;

Пример №2

Цвет фона зеленый background: #34AF23; , иконка белого цвета в статике color: #fff; , кнопка в виде листочка border-radius: 50% 0%; , ширина по горизонтали 64 пикселя width: 64px; , иконка желтоватого цвета при наведении color: #EFE86A; , фон кнопки при наведении, как и рамка, красноватого оттенка background-color: #D84A2E; и box-shadow: 0 0 0 3px #EA5234;

Источник