Скрипт красивих кнопок соціальних мереж. Власні соціальні кнопки. Завантаження зображення кнопок на сервер

Але у цього скрипта є один недолік - скрипт, який обробляв поведінку браузера при натисканні на одну з кнопок. Наводжу його частина, в якій ви самі легко побачите дві проблеми:

Vkontakte: function (purl, ptitle, pimg, text) (url = "http://vkontakte.ru/share.php?"; Url + = "url =" + encodeURIComponent (purl); url + = "& title =" (! LANG: + encodeURIComponent (ptitle); url + ="&description=" + encodeURIComponent(text); url += "&image=" + encodeURIComponent(pimg); url += "&noparse=true"; Share.popup(url); }, !}

Перша проблема невелика і багато хто може сказати мені: "Гей, чувак написав це в 2012 році! Просто поміняй рядок і все ". І я з вами погоджуся, що можна просто помінятиvkontakte.ru на vk.com і просто закрити питання.

Друга - під кожен сервіс потрібно писати новий блок. Який теж зробити не дуже-то проблемно, просто скопіпастів і прибравши / додавши потрібні параметри.

Але що робить цей скрипт в результаті? Він просто створює спливаюче вікно, в яке передає перераховані параметри. Ось ці рядки:

Popup: function (url) (window.open (url, "", "toolbar = 0, status = 0, width = 626, height = 436");)

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

Спочатку нам необхідно мати кілька змінних для кнопок шаринга:

• $ Title- Тема (назва) сторінки
• $ Description- Опис сторінки
• $ ImageUrl - шлях до зображення сторінки
• $ Link - пряме посилання на сторінку

Я назвав їх умовно, щоб було наочно зрозуміло, скільки їх необхідно і що вони з себе представляють. Яким способом вони будуть братися на вашому сайті - вручну або автоматично - залежить тільки від додатка, на якому це буде виконано. Наприклад, в CMS WordPress це буде виглядати так:

• $ Title- це
• $ Description —
• $ ImageUrl —
• $ Link —

Тепер в потрібному нам місці вставляємо наступний код, де на місце змінних підставляємо потрібні значення (якщо необхідно):

От і все! Результат роботи ви можете побачити в кінці цієї статті.

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

Конструктори кнопок соціальних мереж для сайту

2. Легкий спосіб отримати посилання на сайт - QIP.RU
Додайте кнопку на сайті та дайте відвідувачам можливість додавати вподобані матеріали сайту в закладки, блоги та соцмережі. Три кроки: де розмітити кнопку (сайт, Blogger або WordPress), стиль кнопок (готові варіанти) і отримати кнопку.

3. Кнопки для додавання контенту в соцмережі - Pluso
Додайте кнопки і дайте відвідувачам можливість ділитися сподобалися сторінками в соцмережах, а також друкувати, відправляти лист і додавати закладки.

4. Сервіс соціальної активності - UpToLike
Кастомізовані кнопки соцмереж з можливістю задати колір, форму, розмір і спецефекти. Додаткові фішки - віджет розшарювання картинок PicShare, функція «Цитування» і кастомизировать функція Following.

5. Одна кнопка! - для всіх сервісів закладок і соцмереж
Виберіть вид кнопку. Де буде встановлена ​​кнопка: сайт, Blogger або WordPress. Додайте кнопку.

Скрипти кнопок соціальних мереж для сайту

1. Красиві соціальні кнопки для сайту - goodshare.js
Відображення кнопок практично на будь-якому пристрої. Чистий код. Коротка документація. SEO friendly.

2. Скрипт кнопок соціальних закладок і мереж - Share42
Виберіть розмір і відзначте іконки сервісів, які хочете використовувати на сайті. Виберіть потрібні опції. Подивіться, як це буде виглядати і / або скачайте готовий скрипт. Встановіть скрипт на сайт WordPress, Drupal, інше.

3. Красиві кнопки «лайків» соцмереж з використанням jQuery - Social Likes
Скрипт кнопок «лайків» з лічильниками в єдиному стилі для соцмереж: Facebook, Twitter, ВКонтакте, Однокласники, Мій світ, Google+ і Pinterest.

Зарубіжні аналоги кнопок соціальних мереж для сайту

1. Share Buttons - AddThis
Кнопки шаринга допоможуть вам збільшити аудиторія сайту, шляхом залучення відвідувачів з інших ресурсів і соцмереж, через який поширюється контент.

4. Social Sharing - Po.st
Отримати більше користі від шаринга в соцмережах. Сервіс дозволить полегшити процес шаринга в соцмережах для відвідувачів, що дозволить збільшити органічний трафік сайту.

5. Share Buttons for Any Website - AddToAny
Отримайте код кнопок соціальних мереж для будь-якого сайту. Виберіть тип і стиль кнопок, вкажіть e-mail і інші опції або виберіть одну з платформ: WordPress, Drupal, Tumblr, Joomla, Elgg, WordPress.com, Blogger, TypePad або FeedFlare. Отримайте код кнопок.

Останнім часом кожен другий (якщо не перший) замовник у вимогах по розробці сайту просить неодмінно зв'язати його з соціальними мережами. «Соціальні» кнопки на сайті - засіб номер 1 для залучення цільової аудиторії, поширення контенту та піару в цілому. Причому абсолютно безкоштовне!

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

Які можливості та функції?

Якщо ваш сайт орієнтований на людей які спілкуються популярних соц. мережах, наприклад, Вконтакте, Twitter, Instagramm, Facebook, Google+, Pinterest та інше, і ви хочете охопити їх усі, то щоб не встановлювати кнопки кожної з них окремо, з огляду на те, що вони можуть відрізнятися за розмірами і дизайну, радимо скористатися сервісами-агрегаторами. Це прості і зручні інструменти, які дозволять відвідувачам сайту швидко ділитися інформацією зі своїми друзями незалежно який соціальною мережею вони користуються. Нижче ми розберемо найбільш популярні сервіси.

Кнопки соціальних мереж Share Pluso

«Навіщо вона потрібна?» - запитаєте ви. Напевно, намагаюся йти в ногу з часом - ми пасемо задніх буржунете, а у них розкрутка сайту дещо відрізняється від нашої поточної дійсності.

Якщо подивитися на блоги в буржунете, то практично поголовно на них встановлені різні плаваючі панельки, що дозволяють додати анонс статті в найбільш популярні соціальні мережі і закладки. У буржуїв зараз досить складно просуватися покупкою посилань і значення соцсігналов стало неймовірно рости.

Панелька дозволяє збільшити кількість расшаріваніє статей, а значить і вплинути на. Ну, а раз щось подібне чекає і нас, то буде правильним трохи випередити події.

Навіщо потрібна панель Share42, її гідності

Я хотів мати панель з кнопками саме цих чотирьох соціалок, які найбільш актуальні для рунета. Цілком можливо, що соціальні сигналиу нас ще не так всемогутні як у буржуїв через те, що їх просто-напросто поки ще не досить для здійснення релевантної вибірки.

Але краще зараз починати їх збирати і бути під всеооружіі, коли в рунет прийде глобальний армагедец для в нашому спотвореному розумінні - істотне зниження впливу і посилення покарання за маніпулювання посиланнями.

Взагалі, вводячи різні запити на і Гугла, при пошуку відповідного варіанту панелі я натрапив на сайт Dimox.name, але побачивши там красиву панельку не вважав за необхідне шукати на його ресурсі опис її установки.

Просто знаю, що такі речі він робить сам (без плагінів), а мені сьогодні копатися в нюансах і настройках жах як не хотілося. Хотілося взяти кілька шматків коду і отримати чудовий, з естетичної точки зору, і працюючий варіант плаваючих кнопочок соцмереж.

Потім вже я натрапив на сервіс Шаре42 і, побачивши на ньому ті ж самі кнопки соціальних мереж, був трохи здивований - Dimox використовує штампування. Це ніби як майстерний швець буде ходити в ширвжитку. Однак, трохи покопавшись в мережі, натрапив на, де він пише про запуск безкоштовного сервісу за самостійним підбору, налаштування та отриманню готового коду скрипта соціальних кнопок.

Набридли йому прохання про допомогу в створенні кнопочок для сайту, ось він і відкрив окремий проект, який, на мій погляд, зараз є найкращим з усіх пропозицій на ринку. Давайте я просто перерахую ті плюси, Які впали в око:

Тепер про мінуси:

1. Потрібно мати хоча б базове уявлення про і. Не думаю, що ви відразу ж кинетеся читати мої публікації, але все ж сподіваюся на ваше намір зробити це в майбутньому (адже я намагався, писав, а поява цих статей викликало тільки бурхливий відтік абонентів - сумно).

Також потрібно буде представляти хоча б приблизно, як влаштована використовувана вами. В, наприклад, не обов'язково копатися в коді - можна використовувати (правда, для цього скрипта не пробував).

Якщо мінуси для вас не істотні (або ви готові потоптатися на місці в пошуку істини), а плюси є значущими, то ласкаво прошу читати цю статтю далі. Що називається - не перемикайтеся. Я розповім про дуже просту настройку і перегляд створеної панелі кнопок соцмереж на Share42, а також про її установку на. Вибачайте, але саме на цьому движку працює мій блог.

Налаштування Share42 і установка скрипта на сайт

Я кинув цю папку в директорію з плагінами WordPress, тому на четвертому кроці майстра мені довелося вказати саме цей шлях:

А також я змушений був поставити галочку навпроти WordPress, бо саме цей движок використовує мій блог. Все, з настройками Share покінчено, залишилося тільки вставити запропонований на п'ятому і шостому кроці майстра Html і CSS код. Власне, тут зазвичай і виникають серйозні проблеми у непідготовлених користувачів.

Зверніть увагу, що вміст цього коду миттєво змінюється при внесенні змін до ваші настройки (Аякс, очевидно, великий і жахливий). Тому, при виборі вертикальної плаваючою панелі, вам доведеться вставляти два фрагмента CSS коду замість одного (при виборі горизонтальній панелі). Але це все деталі, хоча і дуже навіть вражаючі і приємні (слався Дімокс).

Давайте спочатку поговоримо про просте - вставку CSS коду. Скопіюйте один або два фрагмента з правилами і знайдіть той файл таблиць каскадних стилів, який використовує ваш шаблон або тема оформлення.

У WordPress він зазвичай називається Style.css, живе в папці з використовуваної вами темою оформлення (/ wp-content / themes / назва теми). В Joomla файл стилів потрібно шукати в папці з використовуваним вами зараз шаблоном (/ templates / назва шаблону)

Просто відкриваєте цей файл на редагування, наприклад, в і додаєте в самий кінець скопійовані вами фрагменти саме стильового коду (Html ​​код будемо вставляти в інше місце). Зберігаєте зміни і не забуваєте, зайшовши в Файлзілу, ці зміни застосувати, погодившись з спливаючих пропозицією.

Ну, а тепер прийшла пора розібратися з трьома рядками Html коду скрипта Share42. Автор радить вставити їх перед або після статей. У WordPress зробити це не просто, а дуже просто. Відкриваєте на редагування файл single.php з папки з вашою темою оформлення (пам'ятаєте, вона живе за адресою / wp-content / themes / назва теми WordPress).

Можна вставити код відразу після статей. Для цього знайдіть рядок з функцією the_content і вставте запропонований фрагмент відразу після неї, наприклад, так: