Как сделать ссылку на соцсети
Кнопки соцсетей для сайта на чистом CSS
Социальные сети стали неотъемлемой частью современного интернета. Своим понятным функционалом они массово завлекли пользователей вызвав у них зависимость.
Хочу поделиться с достопочтенной аудиторий кнопками социальных сетей для сайта на чистом CSS и Font Awesome, которые я делал подгоняя стили целый день.
Кнопки социальных сетей
Набор круглых кнопок
Посидел денёк подбирая тени и стили для кнопок соцсетей. Теперь вот хочу поделиться с вами своим вариантом круглых кнопочек соцсетей:
Чтобы вставить кнопки на сайт, добавьте через HTML код нужных вам соцсетей.
Для тех кто плохо разбирается в HTML, подскажу что код одной кнопки соцсети состоит из трёх строк.
В классе открывающегося тега div есть названия соцсетей на английском. Ненужные кнопки можно удалить, а нужные отсортировать в том порядке который вас устраивает.
Надеюсь с вставкой HTML-кода кнопок разберётесь.
Ссылка на соц сеть
Так же обязательно добавьте CSS, чтобы ваши кнопки работали так же как в моём примере.
Код CSS
CSS кнопок добавляется в файл CSS темы или шаблона вашего сайта. Место для вставки кода CSS не принципиально. Можете вставлять код в самый низ файла css с новой строки.
Начиная со строки 15 идут стили для кнопок. Можете удалить ненужные вам соцсети.
Например:
Набор квадратных кнопок
Так же если вам не нравятся круглые кнопки, предложу вариант квадратных кнопок:
Как сделать ссылку в соц. сети «Вконтакте»
Можно пойти простым путем – скопировать нужный адрес из навигационной строки браузера и вставить в текст. Гиперссылка будет иметь стандартный вид.
Хотите придать тексту презентабельный вид, замените адрес каким-либо словом. Для этого надо запомнить шаблоны, которые используют в соц. сети «Вконтакте». Чтобы сделать ссылку на страничку пользователя, воспользуйтесь форматом [id |текст ссылки]. Этот шаблон позволяет сделать ссылку на человека либо группу.
Id адрес посмотрите в адресной строке. Также определить свой Id можете, открыв настройки или просмотрев код страницы. Для этого поставьте курсор в любое место страницы, кликните правой кнопкой мыши, в выпадающем окне выберите строчку «просмотреть код». Вставьте в поле сообщения, например, такой текст [id15396726|Виктор Иванов], нажмите кнопку «отправить». В тексте получите ссылку со словом «Виктор Иванов».
Если не знаете Id пользователя, на которого хотите сослаться, можете заменить названием страницы. Если ссылаетесь на страницу группы, замените Id идентификатором сообщества, например, [club23238945|Релевант Медиа]. В тексте появится кликабельная ссылка на страницу этой группы.
Делать анкорные ссылки на внутренние страницы «Вконтакте» можно и по таким шаблонам: *id (текст); @id***(текст) – результат будет тот же. Текст можете разбавить или заменить смайликом, введя в скобочки его код. Его узнать легко, просто введите запрос в поисковую строку браузера.
Сделать анкорную ссылку на сторонний сайт может администратор группы. Пользователю личного аккаунта эта функция недоступна. 
Чтобы сослаться на внешний ресурс, вставьте в текст сообщения или поста адрес сайта. Если он слишком длинный и делает текст нечитабельным, сделайте анкорную ссылку в поле заметки. Заметку прикрепите к сообщению.
Что такое ссылка на страницу и где ее брать
В статье мы расскажем:
Довольно часто при регистрации в каком либо сервисе, при восстановлении доступа к аккаунту, при запуске рекламы и в других случаях просят указать ссылку на страницу ВК, других соцсетей или отдельной записи сайта.
Вопрос вроде простой, если знаешь, о чем речь. Рассмотрим его на примерах для тех, кто здесь испытывает трудности.
Что такое ссылка Вашу на страницу.
Чаще всего требуется указать ссылку на:
Социальные сети
Пример моего профиля (у Вас в URL после vk.com будет числовой идентификатор, если Вы его не поменяли в настройках аккаунта на что-то поинтереснее).
Сообщества и сайты
Посты в соцсетях
Видеохостинги
На скриншоте показано, как при размещении видеоролика требуется указать его адрес.
В Youtube это делается в три клика:
Под окном просмотра кликаем «Поделиться».
Копируем конструкцию во всплывшем окне.
Из адресной строки копируйте URL открывающихся страниц.
Некоторые тонкости установки на сайт кнопок «Поделиться» (share) социальных сетей
Сегодня, в эпоху социальных медиа, принято давать посетителям сайта возможность поделиться с друзьями. Мы делали промо-страницу к Дню Рождения интернет-магазина Allsoft и нам нужно было установить кнопки «Поделиться» от Facebook, Twitter, Одноклассников, Вконтакте и Мой мир.
С первого взгляда показалось — что может быть тут особенного — поставил готовый html/js код и готово? Но тонкости оказались в деталях: что если для одной соц. сети нужно передавать один текст, а для другой — другой? Как правильно передать картинку и описание во все сети? А если несколько разных вариантов текста и картинок на одной странице? Как почистить уже закешированную информацию о ссылке в соц.сети? На все эти вопросы нам пришлось найти ответы, которые и вы сможете узнать из этой статьи.
Самый простой вариант:
Чтобы поставить блок «Поделиться» на страницу своего сайта, достаточно зайти наhttp://api.yandex.ru/share/ и через мастер сформировать нужный вид виджета с кнопками — получится код типа
С помощью этого кода пользователь на сайте сможет поделиться в сети ссылкой на него, которая будет выглядеть примерно так:
Здесь фраза «Кто хочет купить софт со скидкой 8% по акции?» написана самим пользователем, а ниже — то, как ссылка на сайт выглядит в соц.сети. Не сильно красиво, правда?
Передача в социальную сеть картинки, заголовка и описания.
Сделать это можно с помощью мета-тегов, например:
тогда ссылка в соц.сети будет выглядеть так:
Здесь «Сегодня день Рождения allsoft.ru — 8 лет :)» — текст написанный пользователем, остальное — информация из мета-тегов. Подробнее об этих мета-тегах можно прочитать на странице Facebook developers.facebook.com/docs/share, остальные соц.сети тоже их вполне понимают.
Как вообще работает этот механизм:
1. Когда пользователь нажимает кнопку, виджет передает серверу соц.сети ссылку на страницу.
2. Сервер соц. сети сам обращается по этой ссылке и считывает информацию о странице — заголовок, описание, картинку.
3. Сервер соц. сети кеширует на своей стороне информацию о странице и отображает на страницах соц.сети
Какие в связи с этим могут возникнуть проблемы во время разработки:
1. Если вы разрабатываете сайт на сервере, недоступном извне, закрытом http-авторизацией, или локально — соц. сеть не сможет получить информацию о странице, либо вообще не позволит поделиться ссылкой (например, так работает «Одноклассники»), либо отобразит ее без заголовка и описания (как на картинке в первом, самом простом варианте)
2. После того как сервер соц.сети уже один раз обратился к странице, он закешировал информацию о ней — следовательно, если вы захотите изменить заголовок и описание и измените на стороне своего сайта, то в соц.сети оно уже не поменяется — она будет использовать ранее закешированную информацию. (Как это исправить — смотрим ниже.)
Как передавать разные описания для одной страницы.
Например, при создании промо-страницы на allsoft.ru с шуточным тестом потребовалось для разного количества баллов, набранных пользователем в тесте, передать в соц.сети разные описания. Так как описание страницы соц.сеть получает заходя по ссылке, то для разных описаний нужны разные ссылки. Кроме того, Twitter позволяет вставлять только 140 символов, поэтому для него нужно отдельное, более короткое, описание.
Для этого:
1. Для разных результатов теста мы должны передать в API блока «Поделиться» Яндекса разные ссылки. В нашем случае это были:http://allsoft.ru/promo/allsoft8let/?share=normal, allsoft.ru/promo/allsoft8let/?share=high, allsoft.ru/promo/allsoft8let/?share=low иhttp://allsoft.ru/promo/allsoft8let/ для блока вне теста.
2. Соответственно, в зависимости от переданных скрипту страницы параметров в url, страница должна формироваться с разными мета-тегами.
3. Для того, чтобы передавать отдельное описание для Twitter, нужно уже использовать другой формат API блока «Поделиться» Яндекса — не теги, а js-код:
1. Здесь ya_share_normal — id элемента на странице (), в котором будет появляться блок с социальными кнопками, link — ссылка, плюс в serviceSpecific для твиттера указываем title, отличающийся от того, что находится в мета-теге og:title.
Таким образом, для задачи «3 разных результата теста плюс общая ссылка на страницу вне теста» у нас будет 4 тега:
и 4 блока кода в JavaScript, как указано выше.
При передаче через API другого title и description соц.сети обновляют закешированную ранее из мета-тегов информацию (за исключением Facebook — но для него есть способ 1)
Также, наверное, можно передавать и image для изменения картинки.
Ну вот, кажется, и все. Добро пожаловать на allsoft.ru/promo/allsoft8let и торопитесь делиться этой ссылкой с друзьями – сегодня последний день акции!
Автор: Владимир Хворостов — Веб-разработчик Softline
Как создать кнопки соц.сетей в HTML/CSS
Это ещё одна статья, в которой мы предоставляем вам отличные примеры создания уникальных элементов дизайна. Сегодня мы поговорим о такой вещи как кнопки социальных сетей для сайта.
Вообще социальные сети являются неотъемлемой частью для каждого сайта, особенно для продающих landing-page. Именно они обеспечивают сайт основной клиентской базой и чаще всего являются основной формой связи с администрацией сайта.
Данный элемент, при правильном размещении на интернет-ресурсе, позволит вам привлечь много клиентов и других пользователей.
HTML и CSS код
В нашей рубрике произошло небольшое обновление. Теперь перед предоставлением исходников и элементов кода мы будем разбирать с вами свойства и теги, которые лежат в основе исходников.
Это поможет вам «не потеряться» в коде и примерно понять о чем идет речь. А для знатоков HTML и CSS это прекрасная возможность освежить знания.
HTML теги
Все наши кнопки будут располагаться в основном блоке div, который будет соединять их в единую панель. Для него мы присвоим класс, который будет использоваться для стилизации, с помощью атрибута class.
В основе панели будет использоваться немаркированный список, который создается при помощи тега ul. Для него также присваивается класс.
Каждая отдельная кнопка будет находиться в теге списка li и содержать в себе ссылки на социальные сети(тег a), а также классы для стилизации.
Чтобы указать ссылку и создать селекторы для стилизации, создадим атрибуты href и a. Классов нужно будет создавать много, для каждой кнопки отдельный.
Можно конечно использовать и id, но мы воспользуемся классами.
CSS стили
Теперь самая увлекательная часть работы.
Для начала нам нужно вписать все селекторы — класс общего контейнера, тега ul и классы кнопок.
Сначала мы создадим тени для кнопок. Для этого используем атрибут box-shadow.
После этого будем использовать свойства создания фона — background. В качестве фона будут использоваться как обычные цвета, так и градиенты.
Осталось задать размер фона и анимацию. Для этого используем свойства animation и background.
Создание кнопок социальных сетей. CSS3 & HTML5
Первое что нам нужно сделать — разместить кнопки в HTML документе. Создаем общий контейнер div, в который размещаем наш список с кнопками.
Внутри списка кнопок мы создаем теги ссылок, которые будут осуществлять переход на социальные сети.
В исходниках вы сможете найти 4 списка, они используются для демонстрации различных вариантов стилизации. Не обязательно брать их все, можете выбрать тот, который вам больше нравится.
Мы разместили наши кнопки, теперь приступаем к стилизации.
Сначала создадим стили для наведения. Создадим тени, фон и анимацию. Для селектора класса вводим псевдоселектор :hover.
box-shadow:0 5px 8px rgba(26,35,126,0.25);
background:-webkit-linear-gradient(left,#3949AB 0%,#2196F3 100%);
background:linear-gradient(to right,#3949AB 0%,#2196F3 100%);
-webkit-animation:Gradient 1s ease infinite;
animation:Gradient 1s ease infinite
Внимание! На примере показана отдельная часть кода для одной кнопки. То же самое вам нужно будет повторить для каждой из них.
После этого в нашем CSS документе создаем отдельные свойства для темных и светлых кнопок. Сначала создадим нужно создать общие стили для каждого вида кнопок.
Теперь сделаем стилизацию для каждого списка.
Заключение
Поздравляем, у нас получились кнопки социальных сетей, с шикарной стилизацией. Вы можете выбрать любой блок из этого списка для вашего сайта.