Социальные кнопки без плагина. Плавающий блок Css и Html
Главная » Создание WordPress блога » Настройка WordPress блога » Социальные кнопки без плагина. Плавающий блок Css и Html
8 июня | Автор З. Владимир | 18 комментариев
Доброго времени суток всем, кто горит желанием установить социальные кнопки для сайта без плагина. Не буду здесь «лить воду» о значимости социальных сетей в продвижении сайтов, об их огромной популярности среди интернет-пользователей и так далее, и тому подобное. Мне кажется, это и так все понимают, а особенно должны понимать и использовать начинающие вебмастера.
В данной статье, будет рассмотрен простой способ установить на сайте плавающий блок с кнопками «g+1» от Google, «Нравится» от Fasebook и «Твитнуть» от Twitter. А показываться он будет в левой от контента стороне сайта и передвигаться вместе с прокруткой страницы вверх или вниз.
Этот вариант плавающей панели, я уверен, пригодится не только для размещения социальных иконок, но и для других целей в оформлении статей или дизайна сайта.
И, что самое главное, этот код будет работать во всех популярных браузерах. Даже в Internet Explorer. Слышали такое слово как Кроссбраузерность? Если нет — почитайте здесь.
♦ Как создать плавающий блок HTML
Открывайте ваш любимый текстовый редактор для работы с кодом, (у меня это Notepad++), скопируйте и вставьте в него HTML код представленный в следующем примере:
<div>
<div>
<!-- Twitter: -->
<!-- End Twitter: -->
</div>
<div>
<!-- Facebook: -->
<!-- End Facebook: -->
</div>
<div>
<!-- Google +1: -->
<!-- End Google +1: -->
</div>
</div>
<!--end socialbar div -->
Сделали? Этот и будет служить нам основной структурой плавающего блока, куда, впоследствии, добавим кнопки для сайта.
Идем дальше.
♦ Как добавить кнопки Twitter, Facebook и Google+ на сайт WordPress
Теперь нам нужны кнопки социальных сетей, а для этого необходимо перейти на соответствующий сайт и скопировать код кнопки.
Вот простая инструкция как это делал я:
1. Переходите по этому адресу https://about.twitter.com/ru/resources/buttons#tweet, выбираете настройки показанные на скриншоте, копируете код и вставляете его в только что созданный Html между <!— Twitter: —> и <!— End Twitter: —>
Рекомендую выбрать кнопку «Твитнуть» (поделиться ссылкой), так как она по размерам соответствует той вертикальной боковой панели которую мы создаем. Если выберите другую кнопку, скорее всего, придется сделать Html блок шире, чем предлагаю я.
2. Наступила очередь Facebook. Идем сюда https://developers.facebook.com/docs/reference/plugins/like/ и получаем код Facebook кнопки.
Но перед тем как нажимать на «Get Code» (получить код), нужно немножко поработать с настройками. Я выбрал вариант отраженный на картинке ниже.
Теперь постараюсь объяснить свои действия:
∗ В поле «URL to like», адрес который стоит там по умолчанию я удалил, иначе при нажатии посетителем на кнопку «Нравится», лайки будут ставиться на плагин Facebook (мое мнение) .
При пустом же поле, будет автоматически подставляться адрес именно той страницы, на которой находится посетитель и которая ему понравилась. Я считаю, это оптимальный вариант.
Если же указать адрес главной страницы своего сайта, то и лайкать будут только ее, даже если посетитель нажмет кнопку на других страницах. В принципе, используя такой вариант, можно увеличить популярность важной для вас статьи или страницы. А что, неплохая ИДЕЯ!
∗ В поле «Layout» выбрал «button count» так как размер картинки со счетчиком подходят по ширине создаваемого блока.
∗ В поле «Action Type» оставил «Like» — нравится, так как от длины слова зависит ширина кнопки.
∗ Галочки в полях, «Show Friends Faces» (показать фото ваших друзей) и «Include Share Button» (включить кнопку «поделиться»), отключил.
Мне эти функции не нужны, а вы, при желании, можете поэкспериментировать с ними.
∗ Теперь осталось нажать «Get Code» и увидеть следующее:
Здесь тоже не обойтись без комментариев:
FB советует первый код вставлять после открывающегося тега body, а второй в нужное место на странице. Но мы поступим по другому и оба кода, один за другим, вставим между тегами комментариев <!— Facebook: —> и <!— End Facebook: —>.
На этом шаге с Фейсбуком пока все. Идем дальше.
3. А дальше у нас Google+. Переходим сюда https://developers.google.com/+/plugins/+1button/, прокручиваем страницу немного вниз и находим там то, что отображено на картинке:
Копируете фрагмент кода и вставляете между <!— Google +1: —> и <!— End Google +1: —>. Сохраняете изменения.
Все, с получением кодов кнопок мы закончили и теперь нам предстоит поработать со стилями CSS.
♦ CSS стили для плавающего блока HTML
Здесь мудрить много не надо. Просто скопируйте ниже представленный стиль CSS и вставьте его перед HTML кодом. Cохраните файл и назовите его, например socialblok.html, или же придумайте свое название.
<style>
#socialbar {
position: fixed;
left: 10px;
bottom: 45%;
width: 105px;
height: 93px;
padding: 10px 5px;
text-align: center;
background-color: #d1d6e8;
border: 3px solid #999999;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
z-index:9999999;
}
.share-twitter {
height: 32px;
margin-bottom: 3px;
margin-right: 8px;
}
.share-facebook {
height: 32px;
margin-bottom: 3px;
}
.share-plusone {
height: 20px;
}
</style>
И так, мы подошли к завершающему этапу. Файл с кодами Html и CSS для плавающего блока у нас есть и теперь это «счастье» нужно как-то «присобачить» на свой сайт WordPress.
Предлагаю, на данном этапе, пойти самым простым способом и разместить код на блоге с помощью виджета «Текст».
Для этого нужно выполнить три простых шага:
1) Войдите в админ-панель WordPress.
2) Нажмите «Внешний вид» ⇒ «Виджеты»
3) Из имеющихся виджетов в левой колонке, выберите, а затем нажмите и перетащите виджет «Текст» в правую колонку Сайдбара. Теперь скопируйте все, что находится в созданном вами файле socialbox.html, вставьте в виджет и сохраните изменения.
И только теперь у нас все готово! Переходите на свой сайт и проверяйте как выглядит сделанная вами боковая панель социальных кнопок. Все должно работать отлично, если только не допустили где-то ошибок.
А вот результат который получился у меня:
Заключение:
Конечно, всегда можно добавить другие кнопки и отредактировать CSS стили на свое усмотрение. Например, разместить плавающий блок не в левой стороне сайта, а в правой, заменив в стиле CSS лишь одну строчку — right: 10px; на left: 10px;.
Также, социальные иконки можно расположить горизонтально под каждой статьей, но для этого код Html блока нужно будет вставить в Single.php, а код CSS переместить вниз файла Style.css и обязательно подкорректировать под новое место расположения.
В общем, пробуйте, экспериментируйте, творите и у вас обязательно все получится.
На этом пока и удачи всем!
С огромным Уважением, Vladimir Zadorozhnyuk
Понравилась статья? Подпишитесь на новости блога или поделитесь в социальных сетях, а я отвечу вам ВЗАИМНОСТЬЮ
tweet
FB
G+
VK
OK
Прокомментировать (+)
Ваш комментарий (Спам не пройдет!!!)
Создаем дизайн кнопок социальных сетей в виде ленточек
/ Сергей Нуйкин / Уроки по фотошопу
Друзья всем привет! Сегодня на сайте у нас новый урок по фотошопу посвященный созданию элементов для сайта. Если быть точнее, то сегодня мы создадим необычный дизайн кнопок в виде ленточек.
Данные кнопки вы сможете применить для любых своих нужд, возможно в дизайне сайта, возможно еще где-то. Урок будет основан на примере кнопок для соц. сетей.
В уроке я покажу как создать кнопку для вконтакте, а уже на ее примере можно легко по подобию создать все необходимые кнопки (кнопку фейсбука, кнопку одноклассников и т.д.).
Итак, приступим к реализации нашего урока и создадим дизайн кнопок.
Для начала, как и полагается, создаем новый документ с параметрами:
- высота: 80 пикс.;
- ширина: 300 пикс..
Далее нам потребуются вспомогательные элементы для разметки, ими будут направляющие и линейки. Если у вас линейки не активны, нажмите
Теперь нам необходимо сделать разметку, для этого выбираем инструмент перемещение (V), и зажав левую кнопку мыши на линейке тянем в сторону холста на нужную нам позицию.
Ставим направляющие на расстояние от края холста:
- сверху и снизу: 20 пикс.;
- центр: 40 пикс.;
- справа и слева: 25, 35 пикс..
Выберем цвет #3c78a1 и создадим прямоугольник инструментом прямоугольник (U).
Далее выбираем инструмент перо
(добавить опорную точку) и на прямоугольнике по торцам в месте пересечения центральной направляющей с прямоугольником добавляем опорные точки по обеим сторонам.Сдвигаем созданные точки внутрь до следующей направляющей. И производим их деформацию согласно схеме указанной ниже. Для перетаскивания опорных точек и коррекции необходимо использовать инструмент стрелка.
Далее нам необходимо создать узор, для этого создадим новый документ ширина 2 пикселя и высота 1 пиксель.
Один пиксель закрасим черным цветом другой белым, и сохраним узор. Подробно по создания узоров читайте статью: как сделать узор в фотошопе? Применим наш узор к созданной форме ленточки при помощи стиля слоя.
Далее инструментом горизонтальный текст создадим пунктирные линии на краях цветом #2c4e66 и напишем текст (вконтакте) белым цветом.
В заключение создания дизайна кнопки вконтакте нам необходимо создать объем для текста и объем для линий. Для текста создадим стиль слоя тень, и применим следующие настройки.
Создадим блик у пунктира по краям.
На этом все, остается показать результат нашего урока по созданию дизайна кнопок. Я для наглядности сделал еще несколько кнопок соц. сетей: кнопка вконтакте, кнопка одноклассники, и кнопка фейсбук.
Также рекомендую посмотреть урок по созданию кнопок для сайта
Включите бесплатные кнопки «Поделиться» и другие инструменты на вашем веб-сайте
Встроенные кнопки «Поделиться»
Прикрепленные кнопки «Поделиться»
Кнопки «Поделиться изображением»
Кнопки «Поделиться видео»
Кнопки реакции 90
Платформа управления согласием
Генератор политики конфиденциальности
Социальная лента
Всплывающее окно
Конструктор форм
Отмена Далее
ShareThis очень упростил эксперименты с кнопками обмена в социальных сетях.
Панель аналитики проста, и команда тесно сотрудничает. Cerelle Centeno
Директор
Крис Пирроне
Генеральный менеджер
Уже есть учетная запись? Войдите здесь
Создайте учетную запись, чтобы продолжить
Электронная почта*
Пароль*
Просмотров страниц в месяц (необязательно) Выберите один 0 — 25k 25k — 100k 100k — 500k 500k — 1MM 1MM +
Продолжить с 050005
Зарегистрироваться 050005
Google Войти через Apple
Благодарим за регистрацию для встроенных кнопок общего доступа!
По умолчанию мы также включили нашу платформу управления согласием 9.0033, который позволяет:
- Получать согласие пользователей от посетителей вашего веб-сайта
- Соблюдать правила конфиденциальности данных, такие как GDPR
- Избегать потенциальных штрафов со стороны регулирующих органов
Отключать CMP
WordPress
Shopify
Скопируйте код головы
Вот ваш персональный код головы, нажмите на код копирования, чтобы скопировать его в буфер обмена.
Скопируйте код
Вставьте код головы
Теперь перейдите на свой сайт и вставьте код. Это должно выглядеть примерно так:
Готово!
После того, как вы поместили код в свою голову, все готово!
Выберите «Добавить новый» на вкладке плагинов
Нажмите «Загрузить плагин», «Установить сейчас», а затем «Активировать плагин».
Выберите встроенные или прикрепленные кнопки общего доступа.
Кнопки дизайна
Настройка параметров WordPress
Загрузите плагин для начала работы: https://wordpress.org/plugins/sharethis-share-buttons/
Выберите «Установить приложение»
Выберите встроенные или прикрепленные кнопки общего доступа
Создайте учетную запись
Настройте кнопки общего доступа.
Для встроенных кнопок общего доступа скопируйте и вставьте код div туда, где вы хотите, чтобы они отображались на вашем веб-сайте. Для начала установите приложение: https://apps.shopify.com/sharethis-share-buttons
Выберите платформу
Выберите платформу, на которой размещен ваш домен
Нужна помощь? Ознакомьтесь с нашими руководствами по поддержке
НАПОМИНАНИЕ
Завершите настройку платформы управления согласием (CMP)
Начните собирать согласие с посетителей вашего веб-сайта и избегайте возможных штрафов. Всего за 5 минут вы можете настроить CMP в соответствии с вашими потребностями в использовании данных.
- Сохраняйте информирование
- Понимание вашего пользователя
- Соберите данные
Полная конфигурация
11 Лучшие бесплатные ассоциации социального общего обмена для веб -сайтов 2022
1.
Вот лучшие виджеты для социальных сетей, которые увеличат ваш охват.
Социальные сети заново изобрели маркетинговую среду, то, как мы продвигаем себя и наш контент для миллиардов активных пользователей сети. Социальные сети позволяют нам общаться с группами единомышленников и потреблять контент, который резонирует с нашими личностями, интересами и стремлениями в нашей жизни. Facebook и Twitter — две ведущие социальные сети. Обеспечение того, чтобы наши читатели могли связаться с нами через эти сети, имеет решающее значение для успеха в Интернете.
Помимо всего прочего, социальные сети — это способ номер один привлечь подписчиков без каких-либо денежных вложений. Мы должны быть уверены, что предоставляем нашим читателям возможность продвигать нашу работу, не задумываясь об этом дважды. Лучший способ — использовать специально созданные виджеты и инструменты для обмена в социальных сетях. Лучшие веб-сайты в мире полагаются на такие виджеты, чтобы охватить новую аудиторию с помощью существующей, и сегодня мы рассмотрим лучшие виджеты для обмена в социальных сетях, установка которых занимает всего несколько минут, но которые предоставляют широкий выбор современных веб-функций для максимальная экспозиция и взлом роста.
1. AddToAny
AddToAny — один из первых виджетов для обмена в социальных сетях. Миллионы пользователей WordPress полагаются на AddToAny для своих потребностей в социальных сетях, в то время как десятки других миллионов веб-мастеров используют AddToAny на своих веб-сайтах. Рост списка функций AddToAny — это то, что заставляет многих возвращаться, понимая, что дело не в дизайне (который, как мы его знаем, великолепен), а в реальной функциональности, которую может предложить такой плагин.
AddToAny поддерживает сотни служб закладок, что позволяет вам и вашим посетителям легко делиться своим контентом одним щелчком мыши на той же странице, с которой они его читают. Виджет поддерживает мобильные устройства, использует SVG для доставки современного визуального контента и полностью оптимизирован для обеспечения быстрой загрузки и работы веб-сайтов с активным виджетом обмена на страницах. Те, кто хочет отслеживать социальные показатели, могут легко интегрировать виджет в свою панель инструментов Google Analytics для получения дополнительных отчетов.
Загрузить
2. AddThis
AddThis — еще одна известная платформа для обмена в социальных сетях, которая предоставляет множество возможностей для продвижения вашего контента с помощью простого автономного виджета. Это обеспечивает традиционные кнопки обмена, которые можно настроить для отображения в любом месте на странице, есть новая функция для отображения кнопок социальных сетей; также где угодно.
Две другие важные функции более сложны и больше сосредоточены на содержательных аспектах онлайнового мира. У первого есть целевые всплывающие окна, основанные на ваших спецификациях; теперь вы можете легко отображать адаптированный контент для читателей, которые посещают определенные страницы или разделы сайта. Предположим, вы хотите узнать больше о своей аудитории и ее привычках, особенно в социальных сетях. В этом случае нет лучшей платформы, чем AddThis, которая предлагает сложную платформу для анализа данных, чтобы научить вас всему, что нужно знать об аудитории, которую вы обслуживаете.
Платформа выросла из крошечной компании в полноценное корпоративное решение для малых и больших веб-сайтов.
Загрузить
3. SumoMe
SumoMe по-прежнему считается новичком в области социального обмена и социальных тенденций, но популярность этой компании резко возросла всего за несколько коротких лет. Основные области функциональности SumoMe — продвижение в социальных сетях, создание списков для электронной почты и анализ контента с помощью таких методов, как тепловые карты. SumoMe предоставляет выдающийся список функций, которые помогают веб-мастерам продвигать свой контент, не требуя дополнительных усилий.
Приложение Content Analytics позволяет вам по-настоящему понять, как, когда и где ваши пользователи читают контент и реагируют на него. Загрузите SumoMe и установите специальные инструменты, такие как Discover, чтобы рекламировать себя в блогах, которые продвигают другие пользователи Discover. Scroll Box собирает подписчиков электронной почты по мере того, как пользователь углубляется на каждую страницу контента, но если вы хотите собирать подписки, используйте Welcome Mat — виджет приветствия на всю страницу, который продвигает ваш список адресов электронной почты, как только кто-то заходит на сайт.
Но мы здесь не для того, чтобы обсуждать все эти замечательные функции, мы здесь, чтобы узнать больше об аспекте обмена в социальных сетях, который предлагает SumoMe. Платформа предоставляет настраиваемый и очень привлекательный виджет для обмена в социальных сетях, который можно использовать в качестве плавающей панели обмена сбоку на страницах или интегрировать в страницы фактического контента в качестве отдельного виджета. Он работает для большинства ведущих сайтов социальных сетей. Он отлично работает на настольных и мобильных устройствах с краткими параметрами настройки. Премиум-версия даст вам более глубокое понимание социальных привычек посетителей вашего сайта.
Загрузить
4. Buffer
Buffer (также известный как Buffer App) — еще один чрезвычайно успешный виджет/приложение для обмена в социальных сетях. Он по-прежнему помогает миллионам пользователей сети более эффективно обмениваться контентом. Он предоставляет услуги более удобно, когда основное внимание уделяется контенту, а не обмену опытом.
В этом случае оба являются очень привлекательными и профессиональным опытом. Проще говоря, Buffer предоставляет своим пользователям лучший виджет для обмена в социальных сетях. Пользователи могут использовать его для простого обмена контентом во множестве социальных сетей одновременно. Он идеально подходит для веб-мастеров, потребителей контента, журналистов, дизайнеров и творческих людей в социальных сетях.
Buffer предоставляет аналитические отчеты о наилучшем времени для публикации твитов и наиболее привлекательных пользователях и твитах. Он предлагает больше данных, которые навсегда изменят ваше отношение к публикациям и продвижению в социальных сетях. Все виджеты в нашем списке уже так или иначе имеют кнопку общего доступа к буферу. Но также вы можете получить его для своего мобильного телефона или браузеров Mozilla и Chrome.
Скачать
ShareThis существует уже довольно давно. Компания применила несколько новых и современных подходов к обмену в социальных сетях, помимо музыки на своей домашней странице.
Платформа ShareThis привлекательна для всех, кто разделяет интерес к плавающим панелям обмена в социальных сетях. Кроме того, его социальная аналитика позволяет пользователям больше узнать о привычках и моделях своей аудитории. Новый внешний вид современный, гладкий, чистый и будет хорошо работать с большим набором дизайнов. Виджет поддерживает более 100 социальных закладок и платформ обмена, на которые ваши пользователи могут отправлять контент.
Скачать
6. Elfsight
Добавление социальных сетей на ваш веб-сайт или в блог никогда не было таким простым. Вам нужен только надежный виджет для обмена в социальных сетях, и все. Наряду со всеми остальными в этом списке, Elfsight является впечатляющей альтернативой, которая поможет вам двигаться в правильном направлении без особых усилий. К вашему сведению, вам не нужно знать, как программировать, чтобы использовать Elfsight. Кроме того, кнопки социальных сетей, которые вы планируете добавить на свой сайт, соответствуют всем последним тенденциям и правилам и без проблем отображаются на всех устройствах и в веб-браузерах.
Согласно официальному заявлению, вам нужно потратить всего одну минуту на активацию Elfsight. Начните с облегченной версии и переходите оттуда — вы можете обновить ее в любое время. Каждый может поделиться вашим контентом или веб-сайтом одним щелчком мыши, что означает увеличение трафика на ваш сайт.
Загрузить
Social9 — потрясающий бесплатный виджет с кнопками обмена в социальных сетях, который каждый может применить на практике. Независимо от того, являетесь ли вы новичком в области создания веб-сайтов или опытным веб-разработчиком, Social9для всех. Это отличная альтернатива, умеющая сочетать стиль с функциональностью. Для Social9 нет ничего невозможного. Инструмент легко обрабатывает как самые маленькие блоги, так и крупнейшие веб-сайты, помогая вам привлечь еще больше трафика благодаря возможностям социальных сетей.
Social9 предоставляет вам предопределенные кнопки, которые вы можете оформить и настроить в соответствии со своими потребностями и правилами брендинга.
Кроме того, Social9 также предоставляет точную статистику, которая поможет вам отслеживать влияние социальных сетей на ваш контент и сайт в целом. Если вы готовы продолжить, начните с Social9сейчас и увидеть его в полной мере вскоре после этого.
Скачать
Social Warfare — это эксклюзивный для WordPress плагин для обмена в социальных сетях, который вы можете добавить в приложение совершенно бесплатно. Вместо того, чтобы создавать свои собственные, теперь вы можете использовать Social Warfare в полной мере и сэкономить массу времени и усилий. Вам потребуется совсем немного времени, чтобы настроить плагин и сделать так, чтобы на вашем веб-сайте или в блоге появился социальный обмен. Стоит отметить, что Social Warfare гарантирует, что ваш сайт не замедлит работу, сохраняя высокую производительность.
Вы можете выбрать из лучших социальных сетей, решить, где вы хотите, чтобы кнопки отображались, и даже сделать их плавающими липкими. С помощью счетчика обмена Social Warfare помогает вам с социальным доказательством, демонстрируя популярность вашего контента.
Но если вам когда-нибудь понадобится еще больше вкусностей, вы всегда можете обновить и перейти на премиум.
Дополнительные инструменты, подобные этому, см. в этих плагинах WordPress для обмена в социальных сетях.
Загрузить
С сотнями тысяч активных установок вы знаете, что следующий плагин для обмена в социальных сетях — это реальное дело. Инструмент не только прост в использовании, результат также будет очень привлекательным для глаз, гарантируя, что кнопки обмена не будут отвлекать. Кроме того, вы можете использовать бесплатную версию, не платя никаких комиссий навсегда.
В этот превосходный комплект входит колоссальная коллекция из шестнадцати дизайнов, так что вы сможете гораздо быстрее найти тот стиль, который лучше всего соответствует вашей теме. Вы можете указать несколько действий для каждого значка, активировать анимацию, сделать значки плавающими, добавить счетчик и даже создать всплывающее окно. Несмотря на то, что это бесплатное решение, возможностей и функций по-прежнему очень много, чтобы вы могли извлечь из него максимальную пользу.
Скачать
Shareaholic долгое время была платформой, о которой мало кто знал. В основном это нишевые сайты, разбросанные по всем направлениям планеты. Сегодня миллионы веб-мастеров, разработчиков и дизайнеров по всему миру по-прежнему используют плагин Shareaholic. Все они пользуются огромными преимуществами использования современного виджета обмена, который выполняет свои обещания. Shareaholic обещает более высокую вовлеченность пользователей, больше социальных сетей и, в конечном итоге, больше трафика на сайт.
Shareaholic позволяет рекламодателям и издателям персонализировать способы обнаружения, потребления, взаимодействия и совместного использования соответствующего контента. Его проприетарное окно приводит его в действие в интересах пользователей. Специально для маркетологов, Shareaholic повышает эффективность нативной рекламы, используя возможности активных интернет-энтузиастов и влиятельных лиц. Для владельцев сайтов Shareaholic создает продукты, которые помогают им эффективно привлекать и расширять свою онлайн-аудиторию.