Власні соціальні кнопки

Як просто і швидко додати кнопки для соціальних мереж

19.04.2015

Після прочитання цієї статті ви дізнаєтесь, як додати такі кнопки як під цією статтею: - і це доволі просто і зручно.
І не треба підключати нічого зовні.
І якщо виникне потреба додати, ще один сервіс — ви завжди зможете це зробити.

Для чого

Навіть, якщо у вас є супер-пупер сайт/сервіс/блог/програма, то його ніхто не оцінить аж до поки не дізнається чи побачить.
Cаме для цієї мети вам необхідні методи поширення вашої творчості.
Коли всі почали користуватись соц.мережами — стало ясно як розповідати. І коли сервісів було не так багато, то цей процес був тривіальний. Але коли хтось "сидить" вконтакті, хтось в Facebook, LinkedIn і т.д., то треба мати різні кнопки.
Є чимало сервісів, які дозволяють ставити лайки, поширювати посилання, коментувати і т.д.

Реалізація

Ціль мінімум для мене була — кнопка "Share" для VK, Facebook, Twitter, Google , LinkedIn.
Враховуючи, що мій сервер поки-що на початках на безкоштовному тарифі, то не сильно хотілось нагружати його якимись зовнішніми бібліотеками типу:

  • pluso.ru
  • addthis.com
Через зайвий трафік, рекламу, пожирання ресурсів браузера тощо.
Навіть готові рішення типу: не дуже підходили.

Все, що треба було мені це:

Facebook - <a href="https://www.facebook.com/sharer/sharer.php?u=YOUR-URL" rel="nofollow" target="_blank"></a><br> VK - <a href="https://vk.com/share.php?url=YOUR-URL&title=YOUR-TITLE&description=YOUR-DESCRIPTION&image=YOUR-IMAGE-SRC&noparse=true" target="_blank" rel="nofollow"></a><br> LinkedIn - <a href="https://www.linkedin.com/shareArticle?mini=true&url=YOUR-URL&title=YOUR-TITLE&summary=YOUR-SUMMARY&source=YOUR-URL" rel="nofollow"></a><br> Google plus - <a href="https://plus.google.com/share?url=YOUR-URL" rel="nofollow"></a><br> Twitter - <a href="https://twitter.com/intent/tweet?text=YOUR-TITLE&url=YOUR-URL&via=TWITTER-HANDLE" rel="nofollow" target="_blank"></a><br> Pinterest - <a href="https://pinterest.com/pin/create/button/?url=YOUR-URL&description=YOUR-DESCRIPTION&media=YOUR-IMAGE-SRC" rel="nofollow"></a><br> Xing - <a href="https://www.xing-share.com/app/user?op=share;sc_p=xing-share;url=YOUR-URL" rel="nofollow"></a><br> Tumblr - <a href="http://www.tumblr.com/share/link?url=YOUR-URL&description=YOUR-DESCRIPTION" rel="nofollow"></a><br> Reddit - <a href="http://www.reddit.com/submit?url=YOUR_URL&title=YOUR_TITLE" rel="nofollow"></a><br> Odnoklassniki - <a href="http://www.odnoklassniki.ru/dk?st.cmd=addShare&st.s=1&st._surl=YOUR_URL&st.comments=YOUR-DESCRIPTION" rel="nofollow"></a> А недавно надибав статтю, де хлопці з компанії CubeCamp розповідали про своє рішення. Його можна подивитись та потестувати тут. Враховуючи, що jQuery в мене все-одно використовувався для Bootstrap, і були вже іконки, то це рішення мені цілком підходило.
Все, що треба - це:
  • підключити їхній share.js (а бажано навіть скачати собі)
  • та вставити в HTML-коді наступний блок <div class="share-btn" data-url="{{ data_url }}" data-title="{{ data_title }}" data-desc="{{ data_desc }}">   <a class="btn btn-social-icon btn-sm btn-vk" data-id="vk"><i class="ccon-vkontakte"></i></a>   <a class="btn btn-social-icon btn-sm btn-facebook" data-id="fb"><i class="ccon-facebook"></i></a>   <a class="btn btn-social-icon btn-sm btn-twitter" data-id="tw"><i class="ccon-twitter"></i></a>   <a class="btn btn-social-icon btn-sm btn-google-plus" data-id="gp"><i class="ccon-google"></i></a>   <a class="btn btn-social-icon btn-sm btn-linkedin" data-id="in"><i class="ccon-linkedin"></i></a>  </div> Де data_url, data_title та data_desc - необхідно замінити своїми значеннями.
  • та використовувати...

От і все... Так просто)

Статистика і висновки

  • Addthis — приблизно 11 запитів на сервіс і приблизно 200кб трафіку (з кешем приблизно 2.6 кб)
  • Pluso — приблизно 9 запитів на сервіс і приблизно 45кб трафіку (з кешем приблизно 1.4 кб)
  • Розглянуте у статті рішення — 3.5 кб сам скрипт (з кешем приблизно 200б) + іконки на ваш розсуд.


Якщо вам сподобалась стаття — поділіться з друзями:  


Коментарі: