Sfera-perm.ru

Сфера Пермь
0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Кнопки соцсетей для сайта со счетчиком

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

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

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

Социальные ссылки на чистом Css с анимации

ul <
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
margin:0;
padding:0;
display:flex;
>
ul li <
list-style:none;
>
ul li a <
display:block;
position:relative;
width:85px;
height:85px;
line-height:85px;
font-size:40px;
text-align:center;
text-decoration:none;
color:#383434;
margin: 0 25px;
transition:.5s;
>
ul li a span <
position:absolute;
transition: transform .5s;
>
ul li a span:nth-child(1),
ul li a span:nth-child(3) <
width:100%;
height:3px;
background:#383434;
>
ul li a span:nth-child(1) <
top:0;
left:0;
transform-origin: right;
>
ul li a:hover span:nth-child(1) <
transform: scaleX(0);
transform-origin: left;
transition:transform .5s;
>

ul li a span:nth-child(3) <
bottom:0;
left:0;
transform-origin: left;
>
ul li a:hover span:nth-child(3) <
transform: scaleX(0);
transform-origin: right;
transition:transform .5s;
>

ul li a span:nth-child(2),
ul li a span:nth-child(4) <
width:3px;
height:100%;
background:#383434;
>
ul li a span:nth-child(2) <
top:0;
left:0;
transform:scale(0);
transform-origin: bottom;
>
ul li a:hover span:nth-child(2) <
transform: scale(1);
transform-origin: top;
transition:transform .5s;
>
ul li a span:nth-child(4) <
top:0;
right:0;
transform:scale(0);
transform-origin: top;
>
ul li a:hover span:nth-child(4) <
transform: scale(1);
transform-origin: bottom;
transition:transform .5s;
>

.facebook:hover <
color: #2f4b86;
>
.facebook:hover span <
background: #2f4b86;
>
.twitter:hover <
color: #188fd8;
>
.twitter:hover span <
background: #188fd8;
>
.instagram:hover <
color: #bf1f9e;
>
.instagram:hover span <
background: #bf1f9e;
>
.google:hover <
color: #c33827;
>
.google:hover span <
background: #c33827;
>
ul li a .twitter <
color: #188cd4;
>
ul li a:hover:nth-child(3) <
color: #b31c93;
>
ul li a:hover:nth-child(4) <
color: #ca3c2b;
>

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

Плавающие иконки социальных медиа

ul <
position:absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
margin:0;
padding:0;
display:flex;
>

ul li <
list-style: none;
>

ul li a <
position: relative;
width: 55px;
height: 55px;
display: block;
text-align: center;
margin: 0 8px;
border-radius: 100%;
padding: 5px;
box-sizing: border-box;
text-decoration: none;
box-shadow: 0 10px 15px rgba(25, 24, 24, 0.3);
background: linear-gradient(0deg, #cecbcb, #f7f5f5);
transition: .5s;
>

ul li a:hover <
box-shadow: 0 2px 5px rgba(43, 41, 41, 0.3);
>

ul li a .fa <
widht: 100%;
height: 100%;
display: block;
background: linear-gradient(0deg, #f7f0f0, #bdbcbc);
border-radius: 50%;
line-height: calc(60px — 12px);
font-size: 25px;
color: #545050;
transition: .5s;
>

ul li:nth-child(1) a:hover .fa <
color: #3b5998;
>

ul li:nth-child(2) a:hover .fa <
color: #00aced;
>

ul li:nth-child(3) a:hover .fa <
color: #dd4b39;
>

ul li:nth-child(4) a:hover .fa <
color: #007bb6;
>

ul li:nth-child(5) a:hover .fa <
color: #e4405f;
>

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

Кнопки с оригинальным свечения

ul <
margin:0;
padding:0;
display:flex;
position: absolute;
top: 50%;
left:50%;
transform: translate(-50%, -50%);
>

ul li <
list-style:none;
margin: 0 15px;
>

ul li a <
position: relative;
display: block;
width: 58px;
height: 58px;
text-align: center;
line-height: 58px;
background: #131212;
border-radius: 50%;
font-size: 30px;
color: #b1acac;
transition: .5s;
>

ul li a:before <
content: »;
position: absolute;
top:0;
left:0;
width:100%;
height:100%;
border-radius:50%;
background: #d35400;
transition: .5s;
transform: scale(.9);
z-index: -1;
>

ul li a:hover:before <
transform: scale(1.2);
box-shadow: 0 0 15px #d35400;
filter: blur(3px);
>

ul li a:hover <
color: #f5ba4e;
box-shadow: 0 0 15px #ce841f;
text-shadow: 0 0 15px #c55e19;
>

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

Иконки с эффектом при наведении

.sanspecen-abakecton <
position: absolute;
left: 50%;
top:50%;
transform: translate(-50%, -50%);
>

.sanspecen-abakecton a <
display: inline-flex;
height: 75px;
width: 75px;
background: #eae6e6;
color: #eaeaea;
margin: 0 0px;
border-radius: 50%;
justify-content: center;
align-items: center;
transition: 0.1s;
font-size: 32px;
-webkit-box-shadow: 3px 2px 4px 0px rgba(21, 20, 20, 0.75);
-moz-box-shadow: 5px 3px 5px 0px rgba(0,0,0,0.75);
box-shadow: 3px 3px 3px 0px rgba(23, 22, 22, 0.75);
>

.sanspecen-abakecton a:nth-child(1) <
color: #4971c3;
>

.sanspecen-abakecton a:nth-child(2) <
color: #148fda;
>

.sanspecen-abakecton a:nth-child(3) <
color: #d23a2d;
>

.sanspecen-abakecton a:nth-child(4) <
color: #b52196;
>

.sanspecen-abakecton a:hover:nth-child(1) <
color:#fff;
background: #3b5998;
>

.sanspecen-abakecton a:hover:nth-child(2) <
color:#fbfbfb;
background: #1da1f2;
>

.sanspecen-abakecton a:hover:nth-child(3) <
color:#fbfbfb;
background: #db4437;
>

.sanspecen-abakecton a:hover:nth-child(4) <
color:#fbfbfb;
background: #c32aa3;
>

.sanspecen-abakecton a i <
transition: 0.4s;
>

.sanspecen-abakecton a <
transition: 0.4s;
>

.sanspecen-abakecton a:hover <
-webkit-box-shadow: 0px 0px 5px 0px rgba(31, 31, 31, 0.75);
-moz-box-shadow: 0px 0px 5px 0px rgba(31, 31, 31, 0.75);
box-shadow: 0px 0px 5px 0px rgba(31, 31, 31, 0.75);
>

.sanspecen-abakecton a:hover > i <
transform:scale(1.4) rotate(360deg);
>

При наведение происходит полный круговорот кнопки с увеличением шрифтового знака.

Светлые кнопки с красивым эффектом

Собственные социальные кнопки

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

Зачем нужны такие кнопки? Главная задача — возможность оформить их так, как необходимо под конкретный дизайн. Существуют разные сервисы для создания кнопок социального шаринга — типа pluso.ru, блок «Поделиться» от Яндекс и многие другие. Количество достаточное. Но их главный минус — дизайн. Я не говорю, что их дизайн плох, даже наоборот — сделаны они универсальны и подойдут почти под все проекты. Но их внешний вид поменять практически невозможно, а все попытки сводятся к построению костыльно-велосипедной системы, что не есть хорошо. К тому же зачастую ресурсы (типа скрипта и изображений) подгружается с сервера сервиса — сейчас всё работает достаточно стабильно, но раз в год и Google падает (но это не точно).

Предлагаемый мной вариант лишен этих недостатков — все файлы будут на вашем сервере (то есть упадёт вместе с сайтом), ничего не подгружая извне, и к тому же очень хорошо кастомизируется. Кроме того, у нас будет небольшой плюс — обыкновенно в состав социальных кнопок входит большая тройка (ВКонтакте, Facebook и Twitter). В нашем случае в обойме присутствует Mail.Ru, Одноклассники и Telegram, чтобы никто не ушёл с нашего сайта нерасшаренным.

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

Впервые вопрос о собственных кнопках соц.сетей меня посетил в тот момент, когда для страницы на сайте социальный шаринг был очень нужен, но все ресурсы не подходили по дизайну. И не меня одного — сама идея кастомных кнопок далеко не новая. Самое интересное решение, на мой взгляд, было мной обнаружено на Хабре и после непродолжительных поисков привела на GitHub . Я взял за основу логику работы таких кнопок шаринга и творчески их доработал.

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

Но у этого скрипта есть один недостаток — скрипт, который обрабатывал поведение браузера при нажатии на одну из кнопок. Привожу его часть, в которой вы сами легко увидите две проблемы:

Первая проблема небольшая и многие могут сказать мне: “Эй, чувак написал это в 2012 году! Просто поменяй строчку и всё”. И я с вами соглашусь, что можно просто поменять vkontakte.ru на vk.com и просто закрыть вопрос.

Вторая — под каждый сервис нужно писать новый блок. Который тоже сделать не очень-то проблемно, просто скопипастив и убрав/добавив нужные параметры.

Но что делает этот скрипт в итоге? Он просто создаёт всплывающее окно, в которое передаёт перечисленные параметры. Вот эти строчки:

Вот именно работу этого скрипта я немного видоизменил. Но об этом чуть ниже. Рассмотрим сами кнопки и принцип их работы.

Вначале нам необходимо иметь несколько переменных для кнопок шаринга:

  • $Title — Заголовок (название) страницы
  • $Description — Описание страницы
  • $ImageUrl — путь к изображению страницы
  • $Link — прямая ссылка на страницу

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

  • $Title — это
  • $Description
  • $ImageUrl
  • $Link

Теперь в нужном нам месте вставляем следующий код, где на место переменных подставляем нужные значения (если необходимо):

Кнопку для каждой социальной сети я подписал.

Готово. Код уже рабочий и его можно использовать — при нажатии на ссылку открывается новая вкладка социальной сети. А теперь давайте сделаем так, чтобы он не плодил вкладок, а открывал небольшое окошко поверх браузера. Чуть ниже добавим следующего кода:

Вот и всё! Результат работы вы можете увидеть в конце этой статьи.

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

Автор блога, веб-разработчик

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

Я снова рад видеть Вас! Сегодня Вы узнаете, как сделать и установить красивые кнопки социальных сетей для сайта (блога).

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

А может для тотального контроля над сознанием людей

Как работают кнопки, я думаю, Вы знаете. Прочитав интересную и полезную статью или посмотрев прикольный видеоролик, возникает желание поделиться с друзьями интересным материалом. Тогда мы жмем кнопку любимой социальной сети и все. Ссылка с краткой информацией опубликована на Вашей странице. Удобно, не правда ли?

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

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

Воспользуемся одним из простых способов, обратившись за помощью к сервису share42.com/ru

Второй способ как сделать социальные кнопки для сайта — опубликован недавно!

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

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

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

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

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

Определите свой тип сайта, у меня WP.

Смотрим, как будет выглядеть панель, если Вас все устраивает – качаем скрипт. Полученный скрипт перенесем на свой хостинг в корневую папку httpdocs (у меня) у Вас возможно public_html – зависит от хостинга.

Переходим к самой установке кода вывода панели иконок. Идем в wp-content/themes/тема Вашего блога/single.php

Важно! Если не уверены в своих действиях скачайте изменяемый файл single.php себе на компьютер. В случае неудачи всегда можно восстановить предыдущее состояние блога (сайта).

В файле single.php необходимо вставить код, но спрашивается куда. откройте на своем блоге любую статью, пролистайте весь текст до конца. На примере, у меня последней является картинка ( 2 ) и я хотел бы вставить кнопки после нее! Выделяю мышью слово «Рубрика» — жму Ctrl+C. Открываю исходный код страницы – Ctrl+U. Вызываю функцию поиска Ctrl+F, вставляю выделенное мною слово «рубрика» — Ctrl+V.

Мне поиск выдает месторасположение искомого слова, смотрите скриншот. У меня это div class postcat. Готово!

Идем обратно к single.php, вводим в поиске Ctrl+F cлово “postcat” и вуаля – готово! Этим делом мы обозначаем месторасположение объекта в самом коде файла single.php, следовательно рядышком и «притулим» готовый код из пункта 5 (смотрите ниже скрин)

Только наш код с сервиса Share.ru нужно ставить после закрывающих тегов/div. По крайней мере так у меня. Вот и все!

Совет начинающим, чтобы найти место где правильно разместить код: для начала вместо кода можно использовать набор букв или цифр, например (rrr) – без скобок… Вставляете в single.php, в предполагаемом месте – сохраняете и смотрите у себя на блоге в статье где эти буквы вылезли, если не там где надо, тогда легко удаляете их и вставляете в другое место (метод тыка). Ага, если буквы появились там, где надо – можно смело размещать сам код. Думаю понятно…

Не обязательно конечно, но можно вставить еще один код в стили CSS. Это даст нам затуманенное состояние кнопок, а если провести курсором по ним, то кнопки оживают.

Как это сделать? Вообще легко, не надо ковыряться нигде, просто копируем код, (на картинке выше под № 6 ) открываем: …/wp-content/themes/Ваша тема/style CSS и в самом низу размещаем код. Сохраняем. Можно проверять!

Теперь Вы знаете все про кнопки социальных сетей для сайта. Установка кнопок социальных сетей дело не такое сложное, скорее познавательное.

Скоро будет ну очень интересная статья — подпишитесь по e-mail, чтобы не пропустить!

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

Привет, ребят! На связи Артем Губтор и я сегодня расскажу где взять, как настроить и установить кнопки социальных сетей на сайт.

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

Искать как установить на сайт кнопку каждой отдельной соцсети тоже нудно и трудно.

Наконец нашел для себя оптимальный вариант установки кнопок соцсетей без плагинов и с минимальной нагрузкой на сайт. Это подойдет как для сайтов на простом HTML, так и для CMS Joomla, WordPress
Поделюсь этим способом с вами.

Зачем нужны кнопки соцсетей

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

Часто после нажатия на кнопку социальной сети ссылка на вашу статью автоматически попадает в ленту новостей человека, который нажал на кнопку. Разве это не чудо? Больше ссылок на статью – больше шансов, что ее будут просматривать.

Где взять кнопки соц сетей

Есть несколько вариантов для установки кнопок на сайт.

  1. Плагин.
  2. Соцсети сами предоставляют инструкцию по установке своей кнопки. Читайте и делайте.
  3. Использовать сервис, который автоматизирует установку кнопок.

Я уже писал про список самых нужных плагинов для wordpress. Но заводить отдельный плагин на сайте для социальных кнопок – это слишком.

Гуляю по интернету, наткнулся на очень интересный сервис Pluso

Чем он мне понравился?

  • Прост в использовании.
  • Настраиваемый дизайн: цвет, размер, расположение.
  • Возможность выбора самых популярных социальных сетей.

Остановимся на этом сервисе и разберемся пошагово, как установить кнопки на сайт.

Устанавливаем социальные кнопки для сайта

Первым делом перенесите мышкой из правого столбца “Доступны к выбору” в средний столбец “Выбранные сети”, те социальные сети, которые вы хотите разместить на сайте.

Далее настройте внешний вид кнопок – Размер, форму, расположение, с счетчиком или без, фон.

Последний шаг. Копируем код.

Открываем редактор темы wordpress и в файле comments.php вставляем код в самом верху и сохраняем изменения. Проверяем результат. У меня вот так:

Все. Ожидали больше шагов? Простите за разочарование.

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

При желании можно перед вставленным кодом написать типа: “Поделись интересной статьей с друзьями”.

Вот так мы с вами очень просто установили кнопки социальных сетей на сайт. Все получилось? Надеюсь, что да.

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

голоса
Рейтинг статьи
Читайте так же:
Мтс ноль без границ счетчик минут
Ссылка на основную публикацию
Adblock
detector