Создание блока «поделиться» для сайта
Содержание:
- Кнопки социальных сетей от uSocial.pro
- Плагины для социальных кнопок
- Код JavaScript для шарингов
- Кнопки социальных сервисов
- Разновидности кнопок соцсетей для сайта
- Как добавить/установить кнопки соцсетей на сайт WordPress без плагина?
- Добавление каждой кнопки соц сети по отдельности
- Добавление иконок на профили и группы в социальных сетях на сайт
- ФОРМЫ
- ЕЩЁ
- Плагины
Кнопки социальных сетей от uSocial.pro
Быстро глянул исходный код, погуглил и обнаружил авторский сайт — https://usocial.pro, на котором можно было бесплатно залогиниться через соцсети и сгенерировать кнопки основных соцсетей: Вконтакте, Google+, Твиттер, Одноклассники и т.п.
Интерфейс отличный: все на русском, интуитивный, разберется даже школьник. Приятно, когда все продумали до тебя — нет ничего лишнего, в то же время все что требуется 99% сайтам, присутствует и настраивается в два клика.
Особенно порадовала возможность делать именно «плавающие» кнопки соцсетей и при этом выбирать их положение: слева, справа и т.п.
Размещается код стандартно на сайте перед закрывающим тегом </body>, для этого понадобится доступ по FTP и знать, в каком файле у вас находится «подвал сайта», в WordPress это обычно footer.php в папке с шаблоном, уверен, что никаких проблем с добавлением возникнуть ни у кого не должно.
Плагины для социальных кнопок
Если не учитывать все минусы плагинов, которые связаны с производительностью сайта, можно смело заявить – что это лучший метод установки социальных кнопок на сайте WordPress. Разнообразный список параметров и расширенный функционал. Подробная статистика и удобство в использовании. Пройдемся по самым популярным приложениям.
К плагину – (Easy Social Share Buttons)
Один из лучших плагинов для быстрой интеграции кнопок социальных сервисов. Предоставляет более 28 мест размещений (определяет автоматически), хорошо оптимизирован, что значительно снижает нагрузку на сервер. Имеет более 55 различных тем оформления, что позволит подобрать внешний вид кнопок к любому дизайну. Для замены традиционных статичных кнопок имеется более 30 видов анимаций.
К тому же, система позволяет использовать социальные кнопки во всплывающих окнах, виджетах, интегрировать в различные элементы сайта. Самое интересное – доступно сплит-тестирование, для определения наиболее эффективного оформления блоков. Имеется полноценная статистика по количеству репостов и подписок. Плагин совместим с любыми темами, системами электронной коммерции и позволяет использовать Visual Composer для более детальной настройки.
Стоимость продукта – $19. Более 22000 продаж и средний рейтинг 4,66 показывают, что заявленная стоимость оправдана.
Social Warfare
К плагину – (Social Warfare)
Плагин является не таким функциональным и универсальным, как предыдущий. Его ценность – предоставление доступа к различным настройкам по оформлению иконок (более 5000 стилей). Также отмечается высокая производительность расширения, поскольку оно не использует излишних функций и эффектов. Максимально эффективный при минимальном функционале. При этом имеет необходимую для аналитики статистику, возможность защиты контента и использование шорткодов. Благодаря открытому коду, разработчики могут вносить все необходимые изменения и модернизации.
На основе отметок «Нравится» можно добавить виджет с самыми популярными постами на основе голосов посетителей. Стоимость продукта – $29. Он попал в список благодаря своей производительности и стилистическому минимализму.
К плагину – (Up To Like Share Buttons)
Популярный бесплатный плагин, который может посостязаться с некоторыми платными по функциональности и оформлению. Вебмастерам доступна полная настройка социальных кнопок на сайте WordPress – их внешний вид, анимации, наличие счетчиков и размер блоков. Любое место для размещения (автоматическая установка или посредством вставки кода в требуемую часть сайта). Панель управления содержит все необходимое: основное окно настроек, внешний вид, статистика и инструкции.
Плагин является универсальным решением для любых сайтов. Он позволяет воспользоваться всеми необходимыми функциями без потерь в производительности. Для тех, кто не хочет загружать лишними плагинами, имеется веб-версия программы с немного урезанным функционалом.
К плагину – (AddToAny Share Buttons)
Более 400 тысяч установок, регулярные обновления и потрясающая производительность. Позволяет устанавливать социальные кнопки всех популярных сервисов. Имеются следующие возможности настроек:
- установка счетчика;
- изменение положения блока;
- возможность поделится через почтовые сервисы;
- установка плавающих блоков;
- детальная настройка оформления.
Также имеется отдельный алгоритм работы для мобильных версий страницы, который максимально ускоряет работу плагина. Все это можно получить бесплатно, скачав с официального сайта WordPress.
Итог
Использование плагинов – самый простой метод, который позволяет выполнить множество настроек оформления и размещения кнопок. Использование сторонних сервисов тоже не вызывает особых затруднений, но иногда имеет место ограничение некоторых функций, а также могут содержаться лишние ссылки от разработчиков. Собственные кнопки – наиболее простой вариант, не влияющий на производительность, но достаточно сложен в создании, редактировании и ведении статистики.
Код JavaScript для шарингов
С теорией закончили, осталось только написать небольшой js для реализации появления окна, в котором пользователь сможет сделать репост на свою страницу.
Чтобы код был более универсальным, я добавил возможность задавать для шеринга любую ссылку. То есть пользователь сможет, находясь на одной странице, сделать репост другой ссылки.
Кнопки являются обычными html-элементами, это позволит стилизовать их как угодно. Пример кнопок в html:
<input value="ВКонтакте" type="button" class="share_btn" data-social="vk"> <input value="Facebook" type="button" class="share_btn" data-social="fb"> <input value="Одноклассники" type="button" class="share_btn" data-social="ok"> <input value="Twitter" type="button" class="share_btn" data-social="tw"> <input value="Google+" type="button" class="share_btn" data-social="gp"> <hr> <input value="ВКонтакте c data-url" type="button" class="share_btn" data-social="vk" data-url="https://vk-book.ru/"> <input value="Facebook c data-url" type="button" class="share_btn" data-social="fb" data-url="https://vk-book.ru/"> <input value="Одноклассники c data-url" type="button" class="share_btn" data-social="ok" data-url="https://vk-book.ru/"> <input value="Twitter c data-url" type="button" class="share_btn" data-social="tw" data-url="https://vk-book.ru/"> <input value="Google+ c data-url" type="button" class="share_btn" data-social="gp" data-url="https://vk-book.ru/">
В атрибутах data-social хранится название соц.сети, в которую будет сделан репост. А в атрибуте data-url прописана ссылка для репоста. Если data-url отсутствует, то по умолчанию будет использована текущая страница.
И теперь сам js. Для его работы необходима библиотеке jQuery.
$(function(){
// клик по кнопке шаринга
$(".share_btn").click(function(){
var social = $(this).data("social");
// урл текущей страницы
var url_share = location.href;
// если задан атрибут data-url, то берем урл из него
if (typeof $(this).attr("data-url") !== typeof undefined && $(this).attr("data-url") !== false) {
url_share = $(this).data("url");
}
// открываем окно для репоста
share(social, url_share);
});
});
/**
* Создание нового окна браузера для репоста в соц.сеть
*
* @param string social - социальная сеть, в которую будет сделан репост
* @param string url_share - url страницы, которая будет опубликована в соц.сети
*/
function share(social, url_share){
// определяем ссылку для нужной соц.сети
var url_soc = false;
switch (social) {
case "vk":
url_soc = "https://vk.com/share.php?url="+url_share;
break;
case "fb":
url_soc = "https://www.facebook.com/sharer/sharer.php?u="+url_share;
break;
case "ok":
url_soc = "https://connect.ok.ru/offer?url="+url_share;
break;
case "tw":
url_soc = "https://twitter.com/intent/tweet?url="+url_share;
break;
case "gp":
url_soc = "https://plus.google.com/share?url="+url_share;
break;
}
// открытие нового окна для шаринга
if(url_soc){
// размеры окна
var width = 800, height = 500;
// центруем окно
var left = (window.screen.width - width) / 2;
var top = (window.screen.height - height) / 2;
// открываем окно
social_window = window.open(url_soc, "share_window", "height=" + height + ",width=" + width + ",top=" + top + ",left=" + left);
// устанавливаем на окно фокус
social_window.focus();
}
}
Кнопки социальных сервисов
Половина дела сделана — иконочный шрифт подключен к сайту, осталось создать кнопки и вывести через них иконки социальных сервисов.
HTML разметка кнопок социальных сервисов
/*Кнопка Яндекс*/ <a href="#" class="social-button ico-yandex"></a> /*Кнопка Google+*/ <a href="#" class="social-button ico-googleplus"></a> /*Кнопка "Одноклассники"*/ <a href="#" class="social-button ico-ok"></a> /*Кнопка Мейл.ру*/ <a href="#" class="social-button ico-mail"></a> /*Кнопка Вконтакте (малый логотип)*/ <a href="#" class="social-button ico-vk-B"></a> /*Кнопка Вконтакте (международный логотип)*/ <a href="#" class="social-button ico-vk-vk"></a> /*Кнопка Facebook*/ <a href="#" class="social-button ico-facebook"></a> /*Кнопка Twitter*/ <a href="#" class="social-button ico-twitter"></a> /*Кнопка Instagram*/ <a href="#" class="social-button ico-instagram"></a> /*Кнопка Youtube*/ <a href="#" class="social-button ico-youtube-3"></a> /*Кнопка Youtube (значок)*/ <a href="#" class="social-button ico-youtube"></a> /*Кнопка Vimeo*/ <a href="#" class="social-button ico-vimeo"></a> /*Кнопка Twich*/ <a href="#" class="social-button ico-twitch"></a> /*Кнопка Whatsapp*/ <a href="#" class="social-button ico-whatsapp"></a> /*Кнопка Skype*/ <a href="#" class="social-button ico-skype"></a>
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
}
Разновидности кнопок соцсетей для сайта
На сайте размещаются социальные кнопки двух типов.
- Поделиться (share buttons). Данная разновидность кнопок работает как бесплатная реклама веб-ресурса. Виджет разрешает посетителям делиться с друзьями из соцсетей контентом с сайта, размещая ссылки на него в своем профиле. Новые пользователи проходят по этим ссылкам и таким образом увеличивают входящий трафик на сайт.
- Подписаться (follow buttons). Эти кнопки выведут посетителей на группы в соцсетях, где они смогут оформить подписку на новости сайта. То есть соцсети в этом случае являются еще одной площадкой для информирования подписчиков о статьях, продуктах, предложениях веб-ресурса.
Подробнее
Как добавить/установить кнопки соцсетей на сайт WordPress без плагина?
Зайдите на страницу конструктора блока Поделиться — https://tech.yandex.ru/share/. Выберите сервисы социальных сетей (их довольно много), иконки которых будут отображаться на вашем веб-ресурсе и внешний вид блока:
Затем, копируете код и заходите в админпанели Внешний вид — Редактор тем. Открываете файл Отдельная запись (single.php) или в зависимости от вашей темы файл loop-single.php, content.php. Находим строчку <?php the_content(); ?> или похожею на неё и чуть ниже вставляем код соцкнопок. Обновляем файл. Кнопки будут расположены под каждым сообщением. Если не получается, то можно ориентироваться на код <?php comments_template(); ?> (форма комментариев) в файле Одна запись. Выше данной строчки добавляем скрипт соцкнопок.
Для того, чтобы иконки кнопок выравнять по центру, то оберните скрипт в теги <center>….</center>. Получится вот так:
Блок Поделиться после статьи
Таким же методом, можно добавить после статьи код рекламы РСЯ, ADSENSE или Рекомедуемый контент адсенсе
Обратите внимание что, после обновления вашей темы вам придётся вставлять код кнопок заново. Если у вас, друзья, не получается вывести блок кнопок на станицах записей, то советую воспользоваться плагином автоматического вывода блока «Яндекс.Поделиться» в WordPress
Во, вспомнил. У Рамблер тоже есть конструктор кнопок соцсетей и там больше настроек. Кнопки подходят для десктопной и мобильной версии сайта. Как выглядят соцкнопки, вы решаете сами. Настраивайте цвет, форму, размер и шрифт текста и иконок на кнопках или установите стандартный набор.
Конструктор кнопок соцсетей для сайта
Читайте о Рамблер / лайки здесь.
Вы можете настроить и добавить блок Поделиться на свой сайт с помощью Yandex Share.
Плагин Яндекс. Поделиться
Установка плагина стандартная, через админку. Плагины — Добавить новый. В поле поиска вводим Easy Yandex Share, устанавливаем и активируем. А далее переходим к его настройке. Продвинутый вывод блока Яндекс.Поделиться с кучей дополнительных настроек.
После того, как вы активируйте плагин в разделе Настройки появится новый пункт — Easy Yandex Share. Нажимаете на него и приступаете к настройкам блока Поделится в соцсетях. Модуль на русском языке, всё будет вам понятно. Здесь, больше настроек, чем в конструкторе Яндекс:
Настройки плагина Easy Yandex Share
Также выбираете соцсети (есть предпросмотр), внешний вид. Вывод блока соцкнопок до или после записи. Даже возможен вывод иконок соцсетей вертикально. Ещё хорошо — надпись к кнопкам можно свою написать. Так выглядит блок после статьи:
Блок Поделиться Яндекс после записи
Добавление каждой кнопки соц сети по отдельности
Кнопка поделиться Вконтакте
Первым идет Вконтакте, по этому адресу можно перейти к настройке кнопки. Предложенных параметров вполне достаточно для решения индивидуальных задач:
Вы сможете выбрать стиль кнопки, текст, вариант лого, и даже написать самостоятельно текст для кнопки.
Кнопка поделиться Facebook
По аналогии с предыдущим примером даю ссылку для получения кнопки и привожу скриншот настроек:
Настройки не сложные, но написано на более профессиональном уровне. Главное подберите стиль и скопируйте код для вставки на сайт.
Все аналогично, переходим на сайт, подбираем кнопку, копируем код.
Кнопка поделиться Google+
Продвинутые настройки от Google+ немного отличаются от остальных, но разобраться можно. Ссылка для получения кода тут.
Твиттер так же предоставляет широкие настройки для кнопок. Ссылка тут, скрин ниже:
Добавление иконок на профили и группы в социальных сетях на сайт
Итак, что нам нужно:
- Определиться с будущим местонахождением иконок;
- минимальные знания html и CSS, как не крути, а предсказать все варианты, которые могут вам понадобиться я не смогу.
- готовые картинки-иконки соц сетей, скачанные с интернета. Их можно найти очень много используя поиск.
- доступ к файлам шаблона.
Первым делом покажу небольшой код, для 2-х соц сетей, VK и G+, а так же иконку ленты FeedBurner. По аналогии вы можете добавить сколько угодно иконок.
<div class="head-icon"> <a href="http://feeds.feedburner.com/yrokiwp"> <img title="Подписка RSS" alt="Подписка RSS" src="https://feedburner.google.com/fb/images/pub/feed-icon32x32.png"/></a> </div> <div class="head-icon"> <a href="https://vk.com/yrokiwpru"> <img title="Группа Вконтакте" alt="Группа Вконтакте" src="<?php bloginfo('template_url') ?>/images/vk.png"/></a> </div> <div class="head-icon"> <a href="https://plus.google.com/u/0/communities/112307833797572900957"> <img title="Сообщество G+" alt="Сообщество G+" src="https://yrokiwp.ru/wp-content/themes/first_2015/images/gplus.png"/></a> </div>
В этом примере я показал сразу три варианта добавления иконок, первый с использованием картинок с другого сайта, второй WordPress-совский используя функцию bloginfo(), третий, более правильный и оптимальный, указание абсолютного пути к картинке на сервере.
Что касается CSS, тут я вам навряд сильно помогу, могу лишь дать несколько советов по примеру ниже:
.head-icon{ float:right; /*или left*/ margin:5px;} /*отступы по всем сторонам*/
ФОРМЫ
Форма входаФорма регистрацииФорма оформления заказаКонтактная формаФорма входа в соц сетиРегистрацияФорма с иконкамиРассылка по почтеСложенная формаАдаптивная формаФорма всплывающаяФорма линейнаяОчистить поле вводаКопирование текста в буфер обменаАнимированный поискКнопка поискаПолноэкранный поискПоле ввода в менюФорма входа в менюПользовательский флажок/радиоПользовательский выборТумблер перключательУстановить флажокОпределить Caps LockКнопка запуска на EnterПроверка пароляПереключение видимости пароляМногоступенчатая формаФункция автозаполнения
ЕЩЁ
Полноэкранное видеоМодальное окноШкала времениИндикатор прокрутки Индикатор выполненияПанель навыковПолзунок диапазонаПодсказки при наведенииВсплывающие окнаСкладная секцияКалендарьВключить HTMLСписок делЗагрузчикиЗвездный рейтингПользовательский рейтингНаложениеКонтактные чипыКарточкиФлип-картаКарточка профиляКарточка товараОкно тревогиВыноска сообщенияПримечаниеМеткиКругиHR Горизонтальная линияКупонГруппа списковОтзывчивый текстВырезанный текстСветящийся текстФиксированный подвалЛипкий элементРавная высота столбцовОчистка поплавкаОтзывчивые поплавкиСнэк-бар/тостПолноэкранное режимЧертеж при прокруткеПлавная прокруткаГрадиент фонаЛипкий заголовокИзменить заголовок при прокруткеОтзывчивые столбцы ценПараллаксСоотношение сторонПереключатель нравится/не нравитсяПереключатель скрыть/показатьПереключаель текстаПереключатель классаДобавить классУдалить классАктивный классДревовидное представлениеУдалить свойствоАвтономный режим обнаруженияСделать скрытый элементПеренаправление веб страницыУвеличить при наведенииФлип-боксЭлемент вертикально по центруПереход при наведении курсораСтрелкиФигурыСсылка для скачиванияПолная высота элементаОкно браузераПользовательская полоса прокруткиРазличные устройстваЦвет заполнителяЦвет выделения текстаЦвет макераВертикальная линияАнимированные иконкиТаймер обратного отсчетаПишущая машинкаСтраница заставкиСообщение чатаВсплывающее окно чатаРазделенный экранРекомендацииСчетчик разделаСлайд-шоу цитатЗакрываемые злементы спискаТипичные точки прерыванияПеретаскиваемый HTML элементМедиа запросы JSПодсветка синтаксисаJS анимацииПолучить элементы Iframe
Плагины
Это наиболее простой и в то же время действенный вариант, который подойдет большинству вебмастеров. Вам нужно всего лишь установить расширение и минимально настроить его, все остальное уже продумано за вас. Далее я приведу список наиболее популярных плагинов социальных кнопок для ВордПресс.
Также я советую перед любыми изменениями делать резервную копию всех файлов сайта. Потом вы сможете легко восстановить его в прежнее состояние.
Один из самых популярных плагинов для размещения кнопок “Поделиться” на страницах сайта с ВП. Расширение имеет интуитивно понятный интерфейс и множество вариантов этих самых кнопок. Базовую версию можно установить прямо из каталога, за расширенную придется заплатить.
Тем не менее бесплатной версии вам должно хватить. На скриншоте выше представлена лишь одна вариация этих кнопок. На самом же деле в расширении их намного больше, вы убедитесь в этом сами, когда установите его и перейдете в настройки.
Все иконки можно настраивать, выбирать их размер и порядок размещения. Также можно выбрать места, где эти самые иконки будут отображаться. Как правило, их размещают внутри статей и страниц после материала. Но вы можете поставить их в любое другое место, нужно просто изменить параметр “Placement” в настройках.
Также можно менять текст, который будет отображаться при наведении на кнопки. Для этого есть отдельный пункт в настройках. Они поддерживают русский язык, но качество перевода оставляет желать лучшего. Но вы можете не беспокоиться насчет этого – настройки интуитивно понятные и простые, вы точно разберетесь.
Установить это расширение можно прямо из каталога WordPress. Просто перейдите в “Плагины” – “Добавить новый”, введите название в поле поиска и кликните на кнопку “Установить”, а после на “Активировать”. Параметры плагина можно найти в меню “Настройки” – “СоцЗакладки”.
Отличный модуль с длинным названием, который имеет лучший рейтинг среди плагинов социальных кнопок в ВордПресс. На второе место я его поставил только потому, что русскоязычные пользователи, особенно новички, могут испытывать проблемы с настройкой.
К сожалению, там нет поддержки русского языка, да и само расширение выглядит достаточно громоздким и страшным. Но это не мешает ему выполнять свою главную функцию – добавлять кнопки социальных сетей на ваш сайт.
Поэтому при желании вы можете разобраться по всех параметрах плагина. Труда это не составит, интерфейс, хоть и англоязычный, но все равно достаточно понятный.
Выбор кнопок представлен в виде картинок с пояснениями. С помощью галочек можно легко отметить те, которые вы хотите использовать. Но, к сожалению, для русскоязычного сегмента базовой версии будет недостаточно. Кнопка “ВКонтакте” доступна только в премиум-версии.
В базовой же из более-менее популярных вариантов для пользователей из СНГ есть Твиттер, Ютуб, Инстаграм. Но не спешите расстраиваться, вы можете сделать кастомную кнопку и добавить туда любую соцсеть. Правда, для этого придется потрудиться – найти иконку в хорошем качестве, самостоятельно добавить ссылку.
Установить базовую версию модуля можно прямо из каталога. После активации вы можете выполнить поэтапную настройку. Как заявляют разработчики плагина, при каких-то проблемах вы можете обращаться на их форум (уведомление со ссылкой появится в админке) прямо на русском языке. Они постараются помочь.
В каталоге есть очень похожее расширение, но с кривым русским переводом. Вы можете установить его, если уж совсем не дружите с английским.
Простенький с виду модуль, который позволяет разместить кнопки на сайте с WordPress. Этот плагин – интеграция известного сервиса AddThis, с его помощью вы можете создать кнопку “Поделиться” почти для любой социальной сети. Сам модуль тоже очень универсален и позволяет работать с большим количеством сервисов из разных стран.
Чтобы пользоваться всеми благами, придется создать аккаунт в сервисе и авторизоваться в нем через окно, которое будет доступно прямо в панели управления ВордПресс. С этим сложностей возникнуть не должно, зато после регистрации и авторизации вы сможете добавлять кнопку почти любой социальной сети на свой сайт.
Иконки можно размещать в любой части сайта. Настройки, конечно, там не очень понятные. Многие новички просто не поймут значение той или иной переменной.
Также вы можете пользоваться шорткодами, настраивая отображение того или иного набора иконок для каждой статьи или страницы. То же самое можно делать при помощи специального окна “AddThis Tools”, которое появится в каждой таксономии.
