Кнопки поділитися в соціальних мережах для сайту: сервіси і ручна установка
- Переваги та недоліки сервісів
- Огляд сервісів кнопок соціальних мереж
- Яндекс кнопки соціальних мереж
- Pluso
- Uptolike
- Share42
- Sharethis
- Addthis
- Social-Likes
- Odnaknopka.ru
- Pip.Qip.ru
- Додавання кнопок соціальних мереж вручну
- Кнопка поділитися Вконтакте
- Кнопка поділитися Facebook
- Кнопка поділитися Однокласники
- Кнопка поділитися Google+
- Кнопка поділитися від Твіттер
- Кнопка поділитися від Mail.ru
- Додавання іконок на профілі і групи в соціальних мережах на сайт
- Легкі і кастомниє кнопки розшарювання
У сучасному інтернет-просторі немає нічого більш популярного, ніж соціальні мережі. Різні майданчика зосередили мільйони людей, які щодня гортають стрічку, роблять репости, ставлять лайки і ведуть активну онлайн-життя. Так чому б не скористатися цією системою для безкоштовного просування власного сайту в даному середовищі?
Відвідуваність одного тільки Facebook - близько 2 млрд. Чоловік в місяць!
зміст:
Немає ніякої таємниці в тому, що вже багато років існують особливі кнопки соціальних мереж, установка яких на сайті дозволяє побачити приріст трафіку, а заодно сприяє розвитку PR-кампанії свого ресурсу. Расшаріваніє матеріалів забезпечує охоплення гігантської аудиторії, яка складається з потенційних клієнтів, читачів і передплатників.
Наша стаття розповість, як вибрати, правильно встановити і додати на свій сайт зручні і красиві соціальні кнопки; які сервіси пропонують свої послуги і в чому їх переваги; як самостійно додати код і кастомизировать кнопки соціальних мереж.
Расшаріваніє за допомогою соц. кнопок дозволяє збільшити відвідуваність сайту до 20%!
Переваги та недоліки сервісів
Ефективні інструменти для шаринга можуть бути додані двома способами:
- Вручну (за допомогою скриптів і плагінів, утворених API самих мереж);
- За допомогою популярних сервісів для додавання кнопок «поділитися в соціальних мережах».
Множинні багатофункціональні сервіси пропонують користувачам широкі можливості в налаштуванні і оформленні, не вимагають наявності спеціальних навичок, мають інтуїтивно зрозумілий інтерфейс для створення красивих елементів.
Всі послуги є майданчики, де після введення даних генерується код, який ви хочете утримувати веб-сайті.
До основних переваг цих «помічників» можна віднести:
- Простоту інтеграції і легкість в освоєнні;
- Можливість охопити відразу всі актуальні соц. мережі «одним махом»;
- А ось варіативність у виборі зовнішнього вигляду кнопок і їх естетична привабливість;
- Витримування загальної стилістики і геометрії блоку, незалежно від обраних соціальних мереж.
Статистика переходів комфортно відстежується в Яндекс.Метрика і Google Analytics.
І все ж нічого ідеального не буває. Сервіси соціальних кнопок, на відміну від офіційних рішень, мають ряд недоліків:
- Зниження швидкості завантаження сторінки, що може негативно позначитися і на позиціях сайту при його ранжируванні в пошуковій видачі, і на обсязі продажів;
- Збої і помилки в роботі серверів, що ведуть до тривалої завантаженні кнопок або їх тимчасової недоступності;
- Періодична поява реклами;
- Відсутність стабільного алгоритму роботи через AJAX;
- Можливе використання пам'яті браузерів;
- Наявність сумнівної трафіку;
- Неподання гарантій безпеки даних користувачів.
При додаванні кнопок соцмереж «вручну» таких проблем можна уникнути, але це не абсолютна панацея:
- Модулі різних платформ можуть відрізнятися по дизайну і розмірам, що ускладнює їх гармонійне співіснування на одній сторінці;
- Процес займає більше часу, вимагає деяких підготовчих дій та початкових знань html.
І все ж ці способи - найбільш затребувані і зручні варіанти для швидкої установки скриптів кнопок «поділитися в соціальних мережах».
Огляд сервісів кнопок соціальних мереж
В інтернеті представлена велика кількість сервісів, кожен з яких має свої особливості і постійно радує користувачів поліпшеннями в системі настройки кнопок соціальних мереж і їх впровадження на сайт. Розглянемо найпопулярніші конструктори.
Яндекс кнопки соціальних мереж
Вітчизняний пошуковий гігант пропонує зручний сервіс установки кнопок соціальних мереж від Яндекса - блок «Поділитися». Представлений інструментарій дозволяє в лічені хвилини створити «панель» з потрібних елементів і зробити її базове налаштування.
Варіанти зовнішнього вигляду:
- З лічильником расшаріваніє;
- З випадає меню;
- Дрібні іконки в стилі мінімалізму.
Список доступних для шаринга мереж:
Первинна настройка відображення кнопок соціальних мереж від Яндекса і готовий код:
Для установки блоку необхідно вставити згенерований код в потрібне місце html-коду сайту. Можлива більш точна робота з атрибутами, установка асинхронної завантаження скрипта і т.д. (Див. документацію ).
Pluso
Відомий в російському сегменті аналог знаменитого сервісу. конструктор виділяється привабливим дизайном елементів, зручний функціонал і наявністю корисних налаштувань.
Доступні стилі і соціальні мережі:
Вікно попереднього перегляду і додаткових опцій:
Зробивши нехитрі маніпуляції з вибору потрібних соц. мереж, іконок і їх налаштувань, можна побачити код:
<Script type = "text / javascript"> (function () {if (window.pluso) if (typeof window.pluso.start == "function") return; if (window.ifpluso == undefined) {window.ifpluso = 1; var d = document, s = d.createElement ( 'script'), g = 'getElementsByTagName'; s.type = 'text / javascript'; s.charset = 'UTF-8'; s.async = true ; s.src = ( 'https:' == window.location.protocol? 'https': 'http') + ': //share.pluso.ru/pluso-like.js'; var h = d [g ] ( 'body') [0]; h.appendChild (s);}}) (); </ script> <div class = "pluso" data-background = "# ebebeb" data-options = "big, round , line, horizontal, counter, theme = 03 "data-services =" vkontakte, facebook, twitter, google "> </ div>
Для коректного відображення сервісу отриманий скрипт з додаються даними достатньо скопіювати і встановити в верстку сайту в обраному місці.
Поряд з інструментами для шаринга дає можливість встановити спеціальні службові елементи: «друк», «в закладки» і т.д.
Uptolike
якісний конструктор , Що має зручні опції для моментальної генерації коду, обширні налаштування (зі статистикою) і навіть «спецефекти».
Готові іконки можуть мати такий вигляд:
"Спливаюче вікно:
Можна вибрати всі значущі сучасні мережі:
Для індивідуалізації використовується ряд параметрів, серед яких важлива адаптація для мобільних платформ:
Після виконання всіх процедур з вибору і регулюванню параметрів слід натиснути «Згенерувати код», після чого буде запропоновано ввести свій e-mail для подальшої відправки на нього коду для установки.
Отриманий скрипт і всі інші дані розміщуються в html-коді сайту.
Share42
Share42 - зрозумілий покроковий генератор створення красивих кнопок соціальних мереж.
Сервіс пропонує швидке формування блоків, яке включає:
- Вибір необхідних соцмереж і розміру іконок;
- Первинну настройку панелі і інші опції;
- Функції попереднього перегляду та скачування;
- Установку блоку на свій ресурс: необхідно завантажити архів (зі скриптом), розпакувати його, завантажити папку «share42» на свій сайт і вказати шлях до неї (http://site.name/share42/). Далі потрібно вибрати тип ресурсу і вставити в шаблон отриманий в останньому вікні код:
Sharethis
англомовна платформа з приємним оформленням і всіма необхідними опціями для впровадження кнопок соц. мереж на веб-сайт. Сервіс дозволяє створити «фіксовані» або «ковзаючі» блоки, що складаються з безлічі іконок популярних мереж ( «Вконтакте» присутній).
Функціонал конструктора - все, що потрібно для швидкого створення панелей. Принцип роботи:
- Після визначення типу блоків ( «inline» або «sticky») здійснюється перехід до вибору самих іконок (методом кліка);
- Обрання розташування;
- Додаткові настройки (розмір, вид, наявність лічильника, тип обрамлення);
- Фінальне отримання коду (вимагає реєстрації).
Addthis
Найвідоміший іноземний сервіс з послугами для розміщення кнопок соціальних мереж на сайті. Для доступу до повного функціоналу необхідно пройти процедуру швидкої реєстрації. І воно того варте!
Addthis перетворюється в потужний і повний корисних «фішок» наочний конструктор з превью в режимі онлайн.
Кнопки соц. мереж на сайті можуть бути:
- Легкими (floating);
- Зафіксованими на сторінці (inline);
- Розкриваються при наведенні (expanding);
- Банерами і слайдерами.
Всі варіації повністю адаптовані для мобільних пристроїв.
Після вибору типу блоку і натискання «Continue» ліва панель вікна приймає наступний вигляд:
Тут можна вибрати лічильник (share counters), подивитися список всіх доступних кнопок шаринга соціальних мереж (select your own + add more services), налаштувати дизайн (design) і додаткові функції (приховування блоків і т.д.)
Для отримання коду досить натиснути «Save & Continue». На наступній сторінці з'явиться скрипт виду
<Script type = "text / javascript" src = "// s7.addthis.com/js/300/addthis_widget.js#pubid=ra-59a54bda17a98a6a"> </ script>
код самого блоку
<Div class = "addthis_inline_share_toolbox"> </ div>
і докладна інструкція по установці скрипта для різних шаблонів (включаючи доступні плагіни).
Social-Likes
Social-likes - компактний і простий скрипт соціальних кнопок «лайк» з лічильником. На сторінці можна вибрати потрібні мережі, тип і розташування іконок, їх скін і зовнішній вигляд.
Подальші дії для установки:
- Натиснути «скачати кнопки»;
- Зберегти архів на ПК;
- У шаблоні сайту створити папку «social» і вкласти в неї розпаковані файли архіву;
- Перед </ head> прописати: <link rel = "stylesheet" href = "шлях-до-папки-social / social / social-likes_classic.css"> <script src = "шлях-до-папки-social / social / social -likes.min.js "> </ script>
Назва файлу .css може мати інше значення (залежить від вибору, зробленого на сайті).
- Використовувати іншу частину коду і вставити її в шаблон для розміщення кнопок:
<Div class = "social-likes social-likes_light"> <div class = "facebook" title = "Поділитися посиланням на Фейсбуці"> Facebook </ div> <div class = "twitter" title = "Поділитися посиланням в Твіттері"> Twitter </ div> <div class = "mailru" title = "Поділитися посиланням в Моєму світі"> Мій світ </ div> <div class = "vkontakte" title = "Поділитися посиланням в Вконтакте"> Вконтакте </ div> < div class = "odnoklassniki" title = "Поділитися посиланням в Однокласниках"> Однокласники </ div> <div class = "plusone" title = "Поділитися посиланням в Гугл-плюсі"> Google + </ div> </ div>
Odnaknopka.ru
Сервіс від російських розробників з максимально спрощеною системою установки кнопок для соціальних мереж.
До недоліків можна віднести убогий функціонал, але він компенсується високою швидкістю роботи скрипта « одна Кнопка ».
Відвідувачі можуть вибрати 4 види кнопки, один з яких - віджет (з різним положенням щодо сторінки).
Скрипт соціальних кнопок виглядає так:
<Script src = "http://odnaknopka.ru/ok2.js" type = "text / javascript"> </ script>
Для роботи з віджетом код складніше:
<Script language = "javascript"> window.informerPosition = {vert: "top", hor: "left"} </ script> <script language = "javascript" src = "http://odnaknopka.ru/ok4.js "> </ script>
Для установки досить помістити дані в шаблон.
Pip.Qip.ru
Представник «моментальних» сервісів генерації кодів для установки соціальних кнопок - Pip.Qip . Простота тут лише підкреслює комфорт.
Для отримання заповітного коду потрібно:
- Вказати тип майданчика для розміщення;
- Вибрати стиль зі списку;
- Натиснути «Уже хочу!» - і споглядати готовий код внизу сторінки.
<Script src = "// pip.qip.ru/js/pip_button.js" type = "text / javascript" charset = "utf-8" data-type = "1"> </ script>
Залишиться лише помістити його в код сайту.
Рекомендуємо почитати: 16 корисних плагінів для інтернет-маркетолога в Google Chrome
Додавання кнопок соціальних мереж вручну
Альтернативою безумовно зручним, але не завжди прийнятним сервісів соціальних кнопок є самі соц. мережі, які дають можливість вручну додати кнопки на веб-сайт, використовуючи плагіни і API.
Кнопка поділитися Вконтакте
Знаменитий «Вконтакте» генерує коди кнопок розшарювання по цій адресі.
За допомогою віджета можна вибрати вид майбутньої кнопки і «прикрутити» лічильник (пункт «стиль»), придумати оригінальну назву ( «текст») і отримати заповітний код.
Першу частину коду слід помістити всередині тега <head>:
<Script type = "text / javascript" src = "https://vk.com/js/api/share.js?95" charset = "windows-1251"> </ script>
Другу - в місце безпосереднього розташування кнопки:
<Script type = "text / javascript"> <! - document.write (VK.Share.button (false, {type: "round", text: "Зберегти"})); -> </ script>
Кнопка поділитися Facebook
Методика отримання офіційних кнопок Facebook ще більш проста і зрозуміла. На сайті можна скористатися конфігуратором кнопки «Поділитися» і в одну мить отримати код.
Як вибрати дії обмежується розміром самої кнопки і трьома варіантами її «композиції» (дизайну).
Після натискання кнопки «Отримати код» на екрані з'явиться вікно з двома «кроками»:
Крок 2 - Додаємо Javascript.
<Div id = "fb-root"> </ div> <script> (function (d, s, id) {var js, fjs = d.getElementsByTagName (s) [0]; if (d.getElementById (id) ) return; js = d.createElement (s); js.id = id; js.src = "//connect.facebook.net/ru_RU/sdk.js#xfbml=1&version=v2.10"; fjs.parentNode. insertBefore (js, fjs);} (document, 'script', 'facebook-jssdk')); </ script>
Вбудовується в html-код сторінки одного разу. Найкраще місце - відразу після тега <body>.
Крок 3 - сам код кнопки і його розміщення.
<Div class = "fb-share-button" data-href = "https://developers.facebook.com/docs/plugins/" data-layout = "button_count" data-size = "small" data-mobile-iframe = "true"> <a class = "fb-xfbml-parse-ignore" target = "_ blank" href = "https://www.facebook.com/sharer/sharer.php?u=https%3A%2F% 2Fdevelopers.facebook.com% 2Fdocs% 2Fplugins% 2F & amp; src = sdkpreparse "> Поділитися </a> </ div>
Кнопка поділитися Однокласники
Розробники сайту «Однокласники» представили оновлену кнопку «Клас / Поділитися», яка працює значно швидше минулого зразка.
тут знаходиться сторінка конструктора.
За допомогою інтуїтивно зрозумілого інтерфейсу параметри підганяються швидко і легко. Коли настройка завершена і вид елемента в блоці «Результат» влаштовує, можна «перегорнути екран» вниз і помітити код, який потрібно вбудувати в html сторінки в обраному місці.
<Div id = "ok_shareWidget"> </ div> <script>! Function (d, id, did, st, title, description, image) {var js = d.createElement ( "script"); js.src = "https://connect.ok.ru/connect.js"; js.onload = js.onreadystatechange = function () {if (! this.readyState || this.readyState == "loaded" || this.readyState == "complete") {if (! this.executed) {this. executed = true; setTimeout (function () {OK.CONNECT.insertShareWidget (id, did, st, title, description, image);}, 0); }}}; d.documentElement.appendChild (js); } (Document, "ok_shareWidget", document.URL, '{ "sz": 30, "st": "straight", "ck": 2}', "", "", ""); </ Script>
Кнопка поділитися Google+
Такий гігант, як Google, не міг залишитися осторонь, тому для соц. мережі googleplus теж є своя кнопка розшарювання. На відміну від віджета того ж «ВКонтакте», кнопка «+1» не веде до публікації матеріалів на сторінках натиснути на неї людини і не має впливу на ранжування. «Тоді навіщо вона потрібна?» - запитаєте ви. «+1» є частиною ефективної PR-кампанії вашого ресурсу, в ході якої матеріали рекламуються друзями друзів через профілі Гугл, а рекомендації можна побачити прямо у видачі пошукової системи!
Офіційна сторінка відкриває простий спосіб установки «+1» за допомогою коду:
<Script src = "https://apis.google.com/js/platform.js" async defer> </ script> <g: plusone> </ g: plusone>
Кнопка поділитися від Твіттер
«Твитнуть або НЕ Твитнуть?». Щоб у відвідувачів з'явилися такі муки вибору, необхідно створити елемент для розшарювання від Twitter в офіційному конструкторі .
З вирішенням цього завдання впорається навіть початківець. Інтерфейс включає в себе вибір самої кнопки, настройку згадок і # хештега , Можливість прописати власний текст замість стандартного заголовка сторінки.
Код для розміщення буде знаходитися в правому вікні.
Кнопка поділитися від Mail.ru
Плагін для шаринга від соціальної мережі. - кнопка «Подобається». Комфортне і швидке створення доступно за посиланням .
Можна внести зміни в параметри розміру та виду кнопки, вмикати та вимикати лічильник, вибрати тип тексту.
Налаштування супроводжується наочним відображенням внесених змін і автоматичною генерацією коду.
<A target = "_ blank" class = "mrc__plugin_like_button" href = "https://connect.mail.ru/share" data-mrc-config = "{ 'cm': '1', 'sz': '30' , 'st': '1', 'tp': 'mm'} "> Подобається </a> <script src =" https://connect.mail.ru/js/loader.js "type =" text / javascript "charset =" UTF-8 "> </ script>
Додавання іконок на профілі і групи в соціальних мережах на сайт
Іноді виникає необхідність оформити на сайті посилання з красивою іконкою соц. мережі. В інтернеті чекають своєї години сотні і тисячі значків різного стилю. Беріть і користуйтеся.
Використовуючи тег <img>, можна вивести зображення сподобалася іконки в html.
<Img scr = "адреса-зображення">
Поєднавши його з тегом посилання <a>, ми отримаємо іконку, яка буде клікабельно посиланням
<a href="адрес-ссилкі"> <img src = "адреса-зображення> </a>
Або винести іконку в CSS і для кожної соціалки створити свій клас. Приклад в Vk.com:
a.vk-share {display: block; overflow: hidden; background: url ( 'шлях-до-картінкі.png') no-repeat; width: 30px; height: 30px; }
html-код в такому випадку буде:
<a href="адрес-ссилкі" class="vk-share"> </a>
Легкі і кастомниє кнопки розшарювання
Деякі ентузіасти і просто талановиті люди повністю відмовляються від сервісів, плагінів і інших доступних рішень. Їх мета - використання самостійно написаного & коду & для розшарювання. Вагома перевага таких «кастомних» кнопок - чистий код, який передбачає завантаження лише CSS, скрипта і шрифтів (картинок).
Плюси такого підходу:
- Немає зайвого трафіку;
- Немає реклами;
- Коректна робота;
- Немає проблем із залежністю від сервісу (який може часто тупити і не завантажуватися);
- Немає проблем з поїданням пам'яті браузера.
Список посилань на шашірнг в популярних соціальних мережах:
https://twitter.com/intent/tweet?text=YOUR-TITLE&url=YOUR-URL&via=TWITTER-HANDLE Facebook https://www.facebook.com/sharer/sharer.php?u=YOUR-URL Google plus https://plus.google.com/share?url=YOUR-URL LinkedIn https://www.linkedin.com/shareArticle?mini=true&url=YOUR-URL&title=YOUR-TITLE&summary=YOUR-SUMMARY&source=YOUR-URL Pinterest https://pinterest.com/pin/create/button/?url=YOUR-URL&description=YOUR-DESCRIPTION&media=YOUR-IMAGE-SRC VK https://vk.com/share.php?url=YOUR-URL&title=YOUR -TITLE & description = YOUR-DESCRIPTION & image = YOUR-IMAGE-SRC & noparse = true Tumblr https://www.tumblr.com/share/link?url=YOUR-URL&description=YOUR-DESCRIPTION Reddit https://www.reddit.com/submit ? url = YOUR_URL & title = YOUR_TITLE Odnoklassniki https://www.odnoklassniki.ru/dk?st.cmd=addShare&st.s=1&st._surl=YOUR_URL&st.comments=YOUR-DESCRIPTION
Далі потрібно додати їм потрібний вид за допомогою CSS. У нашому випадку html-код кнопки розшарювання в ВК виглядає так:
<Div id = "vk_sharer" class = "post-share-social vkontakte pop_up"> <img src = "/ manager / templates / acades / img / social / vk-01.svg"> <span data-social = "vkontakte "> </ span> </ div>
Ну і стилізація кнопки в CSS:
.post-share {position: absolute; right: -webkit-calc (78% + 155px); right: calc (78% + 155px); width: 75px; text-align: center; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .Post-share-social {padding: 0 10px 0 5px; height: 32px; cursor: pointer; -webkit-transition: all .4s; transition: all .4s; } .Post-share-social: after {content: ''; display: table; clear: both; } .Post-share-social.vkontakte {background-color: # 4c79a7; }
Вам залишиться тільки додати все це справа в модальне вікно і реалізувати коректний парсинг тегів з вашої розмітки OpenGraph і подставноку в url'и для шаринга, які наведені вище.
Protocol?Js?
Php?
«Тоді навіщо вона потрібна?
Com/intent/tweet?
Php?
Com/share?
Com/shareArticle?
Com/pin/create/button/?
Php?