<Proger/> Про мене
ProProger

Просування сайту > Кнопки "Поширити у соціальних мережах" зі своїм дизайном

Автор: / Час публікації: 20/08/2017 23:36

Всім привіт! Сьогодні я вирішив розказати, як зробити кнопки для поширення сторінки у соціальних мережах з своїм дизайном. Соціальні мережі пропонують свої кнопки для поширення, але не завжди вони вписуються у дизайн сайту. На моєму сайті є ось такі кнопки(Не забудьте ними скористатись!):

Соціальні кнопки

Іконки для цих кнопок я брав з сайту fontello.com. Але ви можете створити кнопки з картинок чи просто з тексту. Але не про це сьогодні стаття. Отож переходимо до створення цих кнопок!

HTML-частина

У файлі, де ви хочете зробити ці кнопки, потрібно додати посилання з подією "click", в якій буде функція для відкриття вікна з посиланням для поширення нашої статті! Ось як це все має бути реалізовано:

<a href="https://www.facebook.com/sharer.php?u=https://pproger.com/" target="_blank" onclick="SocShare(this);return false;">Facebook</a>

У події "click" ми повертаємо "false", щоб сторінку не перекидало у поточному вікні на сторінку для поширення. А атрибут "target" додано для того, щоб, коли не включений у користувача JavaScript, хочаби, перекидало у іншій вкладці. У атрибут "href" потрібно додати посилання для поширення.

Посилання для поширення в соціальних мережах:

  1. Facebook - https://www.facebook.com/sharer.php?u=_url_
  2. VK - https://vk.com/share.php?url=_url_
  3. Google + - https://plus.google.com/share?url=_url_
  4. Twitter - https://twitter.com/intent/tweet?url=_url_
  5. Telegram - https://telegram.me/share/url?url=_url_
  6. OK - https://connect.ok.ru/dk?st.cmd=WidgetSharePreview&st.shareUrl=_url_

Замість "_url_" потрібно вставити посилання на сторінку, яку Ви хочете поширити!

JavaScript-частина

Тепер Вам потрібно додати цю функцію до свого JS-коду:

function SocShare(el){//створюємо функцію SocShare
    var url = el.getAttribute('href');// Взнаємо посилання 
    var winpar='width=640,height=360,left=' + ((window.innerWidth - 640)/2) + ',top=' + ((window.innerHeight - 360)/2) ;// записуємо у змінну параметри нового вікна
    window.open(url,'Share window',winpar);//створюємо нове вікно
}

Ось і все! Тепер Вам потрібно лиш це все реалізувати на своєму сайті, ну звісно, якщо ще не реалізували))). До нових зустріч!

Не забувай написати коментар і поширити посилання в соц. мережах за допомогою кнопок нижче! Дякую за увагу!

Коментарі(2)

Administrator
21/08/2017 10:36
Ех! Якось автоматично то пишеться)))
Мишко
21/08/2017 01:46
О! Дякую, мені це знадобиться. І....ну не "силка", а "посилання"! :)