Здрастуйте, шановні читачі блогу сайт. Можна, звичайно ж, і плагін для цього завдання використовувати, але зробити самому не так вже й складно, Та й буде менше, тим більше, що їх у мене і так багато працює (див. статтю за наведеною посиланням). Іконки соцмереж я взяв з , про який вже досить докладно писав (сподіваюся, що Дімокс проти цього не заперечуватиме).
А також я вважав за доречне і по Емайлу.
Після того, як усі потрібні групи та сторінки в соцмережах ви створили, а значить отримали всі необхідні посилання, можна спантеличуватися додаванням кнопок на сайт. Можна, звичайно ж, відповідно до мого посту, підібрати для кожної соцмережі відповідну іконку і при необхідності зменшити її розмір до необхідного в і.
Але це не найкращий варіант. Чому? Ну, тому що для підвантаження кожної картинки соцмережі буде здійснюватись окремий запит до вашого сервера. Буде у вас десяток іконок – значить десять запитів, які будь-якими будуть створювати додаткове навантаження на сервер та . Нам таке марнотратство не підходить, тим більше, що вже давно.
Я вирішив не винаходити велосипед (створювати спрайт), а використав той, що створює конструктор Шаре42 (посилання на опис роботи з ним наведено трохи вище). У ньому можна вибрати ті соцмережі, іконки яких вам будуть потрібні, і разом з кодом ви отримаєте спрайт CSS, тобто. фізично один графічний файл, на якому будуть розміщені всі потрібні вам іконки соцмереж та підписки на RSS стрічку (і Емайл, якщо потрібно).
Я вибрав чотири основні мережі та пару іконок для підписки на новини з розміром іконок 24 на 24, тому мій спрайт виглядає так (щоправда, туди ще затесався, але це не біда):
Тепер у нас є всі інгредієнти – посилання на групи або сторінки соцмереж та іконки для їх відображення на сайті. Залишилося це лише правильно приготувати, тобто. верстати. Мій блог працює на WordPress, тому код з кнопками я вставлятиму в один з . У моєму випадку він називається sidebar.php. Html кодпри цьому виходить вкрай простий:
Ну, і найцікавіше. За допомогою ми визначаємо, яка саме область нашого спрайту відображатиметься на даному конкретному місці у вигляді фону (у нашому випадку це підкладається під гіперпосилання). Пояснювати як так виходить дуже довго, тому читайте наведену за посиланням статтю і все стане зрозумілим (там і приклади наводяться). Якщо ліньки, то просто поекспериментуйте з циферками, які, як ви могли помітити, не задарма кратні 24.
Так, файл спрайту залийте ФТП на свій сайт і вкажіть в background до нього шлях (). От і все. Якщо не вийде, що читайте уважніше матеріали за наведеними вище посиланнями, ну, а якщо вже зовсім нічого не вийде, то описуйте вашу ситуацію в коментарях (докладно - для вставки коду на забудьте його в теги PHP укласти з квадратними дужками).
Удачі вам! До швидких зустрічей на сторінках блогу сайт
Вам може бути цікаво
Останнім часом кожен другий (якщо не перший) замовник у вимогах щодо розробки сайту просить неодмінно пов'язати його із соціальними мережами. «Соціальні» кнопки на сайті – засіб номер 1 для залучення цільової аудиторії, поширення контенту та піару загалом. Причому абсолютно безкоштовне!
Соціальні мережі надають коди своїх кнопок та віджетів для розміщення на сайті, та додають інструкції щодо їх встановлення в системі керування сайтом. Встановити їх дозволяють будь-які CMS (операційні системи), головне гармонійно вписати в дизайн вашого сайту.
Якщо ваш сайт орієнтований на людей, які спілкуються популярних соц. мережах, наприклад, Вконтакте, Twitter, Instagramm, Facebook, Google+, Pinterest та інше, і ви хочете охопити їх все, то щоб не встановлювати кнопки кожної з них окремо, враховуючи те, що вони можуть відрізнятися за розмірами та дизайном, радимо скористатися сервісами-агрегаторами. Це прості та зручні інструменти, які дозволять відвідувачам сайту швидко ділитися інформацією зі своїми друзями незалежно від якої соціальної мережі вони користуються. Нижче ми розберемо найпопулярніші сервіси.
Способів додати кнопки соціальних мереж на сайт зараз не мало, вибір є і це тішить. Соціальні кнопки відіграють важливу роль на сторінці, з їх допомогою можна швидко зробити репост будь-якого запису в одній з обраної соціальної мережі. Соціальні кнопки для сайту ставлять зараз будь-де і куди завгодно, але іноді не туди, куди потрібно.
Багато хто вже знає на скільки зараз розвинені соціальні мережі і як чудово, якщо на вашому сайті будуть ось такі кнопки, за допомогою яких можна додати до себе на стінку запис або частину запису, що сподобалася. Такою дією ви не тільки коментуєте або робите репост повідомлення, але й даєте додатковий сигнал для пошукових систем.
Мрія кожного власника сайту, якщо всі його записи будуть репортувати читачі на своїх сторінках в одній із соціальних мереж. Зараз найбільше йде попит на Вконтакті, Facebook, Twitter та Однокласники. Я б ще додати LiveJournal, liveinternet та Blogger. Ось ці кнопки бажано додати на сайт для повної зручності користувача.
Особливо Twitter сьогодні заслуговує на все більшу увагу, з його допомогою ваші нові публікації швидше з'являються в індексі пошукових систем.
Якщо ви власник сайту, у вас швидше за все повинен бути обліковий запис в liveinternet або LiveJournal. Щоб щоразу не додавати нові записи на ці послуги, наявність їх кнопок економить час. На додаток багато народу користуються цими сервісами і можуть захотіти зробити репост вашого запису у своєму щоденнику.
Існує кілька найоптимальніших способів, як швидко додати соціальні кнопки для сайту. Зробити це можна за допомогою онлайн сервісів, які швидко та без проблем допоможуть із цим. Або на пряму через кожну соціальну мережу окремо. Тут уже вибір у кожного свій. У мене раніше кнопки були додані окремо через кожну соціальну мережу, зараз я поставив за допомогою сервісу.
Існує такий подібний сервіс, називається він share42. Про нього багато написано матеріалу, який він хороший і як ним потрібно користуватися. Хороший, але для звичайного користувача, який нічого не розуміє в цьому, буде важко з ним упоратися.
Для такого дрібного заняття копіювати папки на хостинг і потім паритися зі стилями, зараз це вже не кермує. Існують інші варіанти, в яких потрібно скопіювати та вставити вже готовий код без жодних додаткових папок. Тож забудьте про цей сервіс.
Додайте тільки основні кнопки соціальних мереж, якими користується більшість, не варто ліпити десятки непотрібних забутих кнопок.
Чим сьогодні можна скористатися, щоб додати соціальні кнопки для сайту:
Більше нікуди влазити, напевно, не потрібно, кращих способів не знайти. Кожен із цих варіантів за своїм добре. Якщо ви знаєте більш зручний або привабливий спосіб, напиши будь ласка у коментарях.
Кнопки соціальних мереж необхідно вставити в кінці кожної статті, щоб після читання відвідувач сайту зміг за бажанням зробити репост вашого запису. Він не повинен шукати їх десь наприкінці сторінки. Найоптимальніші місця, на мій погляд, де мають бути розміщені такі кнопки, це в сайдбарі і відразу наприкінці кожного запису.
Зараз я сам користуюся цим сервісом, сподобався він мені. Окрім зручності, сервіс uptolike має кілька привілеїв перед іншими собі подібними.
Привілеїв перед іншими такими послугами достатньо, щоб користуватися ним. При цьому додається лише невеликий код у вигляді скрипту та пари рядків зі стилями. Жодного стороннього посилання при цьому немає, перевіряв через сервіс вихідних посилань. Якщо я не правий, можете мене виправити.
Крім цього, що ще може uptolike сервіс.
Найважливіші налаштування. Вибираємо якісь соціальні кнопки для сайту які ви хочете бачити. За потреби можна відкрити список та вибрати ще кілька із більшості. Ставимо галочку на підтримку. Після цього на мобільних телефонах, кнопки соціальних мереж будуть відображатися завжди знизу екрану.
Вибираємо розташування кнопок по горизонталі, розмір та стиль. Оформляємо як вам сподобається та додаємо ефект при наведенні. Більше нічого не потрібно робити. Для генерації коду лічильника, необхідно вказати адресу сайту та поштову скриньку. Відразу після цього з'явиться код для вставки соціальних кнопок на сайт.
Якщо у вас сайт WordPress, відкриваємо файл single.php і вставляємо готовий код відразу після закінчення контенту сторінці. Оновлюємо сторінку та дивимося, що вийшло. Складного немає нічого.
Вибираємо необхідні іконки сервісів. Твіттер є лише у вигляді іконок, без лічильників. Вибираємо зовнішній вигляд блоків та знизу буде готовий код для вставки. Як було сказано раніше, більше нічого Яндекс не додаємо, все скромно та зі смаком.
У цьому способі потрібно відкрити кожну соціальну мережу окремо і налаштувати кожну кнопку репоста окремо. Для додавання кнопки фейсбуку потрібно пройти сюди. Для однокласників та мого світу потрібно додати дані. Для твіттера все відбувається на . Для додавання кнопки Вконтакте переходимо по цій сторінці .
У вас буде готовий код тільки від соціальних мереж, без зайвих скриптів. Це найкращий спосіб для додавання кнопок соціальних мереж для сайту. Складність виникає в тому, що кожну кнопку потрібно пиляти окремо, після цього вставити все в одне місце і за допомогою стилів css вирівнювати в одну колонку. Якщо у вас не виникає з цим труднощів, можете спробувати.
Для додавання кнопки Вконтакте, натискаємо Підключення сайтів та віджети, знизу буде повний перелік усіх можливих додавань. Там само йде можливість додавання коментарів на сторінку, запис на стіні, додавання своєї групи, рекомендації, опитування, підписатися на автора та публікація посилань. У нашому випадку обираємо Публікацію посилань.
Складного нічого немає, вибираємо стиль кнопки (з лічильником чи без нього), пишемо текст на кнопці, варіант логотипу та внизу буде готовий код для вставки. Я сам користувався таким ручним методом додавання, але зараз пробую сторонній сервіс. Подивимося, що з цього вийде. Якщо не буде влаштовувати, одразу повернуся назад до ручного методу.
Ще один спосіб додавання кнопок для сайту, за допомогою сервісу Pluso. Сервіс теж непоганий, у багатьох помічав кнопки саме від нього. Вибір варіантів оформлення великий, на додачу на любителя є великі розміри зображень. Можливість додавання мереж нічим не поступається порівняно з іншими подібними сервісами. Для встановлення не потрібно жодних файлів, тільки код.
Вибираємо будь-який стиль оформлення та додаємо потрібні сервіси. Трохи нижче буде показаний готовий приклад, як це буде виглядати на сторінці. Розмір іконок можна вибрати великий, середній чи маленький. Також квадратні іконки для сайту або круглі, в один рядок або в два рядки, горизонтальні або вертикальні. З лічильником або без нього, без фону або встановити фон для оформлення дизайну вашого сайту.
Після всіх цих дій знизу буде готовий код для вставки на сторінку. Якщо потрібно вставити на головну сторінку, колупаємося у файлі index.php, якщо у всі ваші записи додаємо код у файл single.php відразу після закінчення запису.
Якщо ви нічого не розумієте в цьому коді, що куди потрібно копіювати і як це все працює, вихід є. Якщо у вас движок WordPress, можна встановити плагін, за допомогою якого у вас з'являться кнопки соціальних мереж. Сьогодні таких плагінів є просто великою кількістю. Заходь до адмінки — Плагіни. Можна відразу написати в пошуку плагінів "соціальні кнопки", "social" або "вконтакте". Я впевнений, ви щось знайдете.
Серед більшості таких плагінів для WordPress, подивившись на рейтинг, найбільше ставлять саме такі:
Насправді таких плагінів дуже багато, потрібно встановлювати і перебирати, який вам більше сподобається, правильно працює, що показує і як його можна налаштувати під себе. Розберемо з прикладу перший такий плагін Social Share Buttons for WordPress.
Сам плагін російською мовою, проблем із цим не буде. Після встановлення зліва в меню з'явиться нова кнопка «Share Buttons». У головних налаштуваннях ставимо логотип сайту та пишемо текст перед соціальними кнопками.
Обов'язково включаємо генерацію мета даних, включатиметься заголовок та опис сторінки. Вирівнювання кнопок по горизонталі і вибираємо, де вони будуть. Вибираємо лише у постах. За бажанням можна виключити потрібні сторінки. У самому низу потрібно вказати нік у тритері.
На наступній вкладці Share налаштування вибираємо стиль оформлення кнопок. Нижче можна ввімкнути або вимкнути непотрібні соціальні мережі та додати відступи для всього блоку зверху або знизу. Зайвого коду нікуди ставити не потрібно, плагін все зробить замість вас.
Вибір залишається вже за вами, яким способом користуватиметеся. Додавати іконки соціальних мереж через uptolike, Pluso чи через Яндекс. Не варто встановлювати плагін на WordPress, спробуйте зробити все ручним методом або за допомогою сервісу.
Якщо ви знаєте ще якийсь хороший сервіс або спосіб додати соціальні кнопки для сайту, буду вдячний за коментар.
Огляд вітчизняних конструкторів та скриптів кнопок соціальних мереж для сайтів, а також зарубіжних аналогів. Коротко, зрозуміло та наочно.
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. Отримайте код кнопок.
| о 8:00 | Змінити повідомлення | 6 коментарів |
Здрастуйте, шановні друзі. Сьогоднішню статтю буде присвячено створенню блоку соціальних кнопок без сервісів та плагінів. А ще до цього блоку увійдуть кнопки, що дозволяють відвідувачам сайту роздрукувати сторінку, надіслати посилання статті на електронну пошту та зробити заклад на вашу статтю. Такі кнопки сьогодні можна зустріти на кожному сайті. Тільки ось вони реалізовані за допомогою сервісів або плагінів. А я ж покажу, як це зробити самостійно.
Сервіси, які я використав на сайтах клієнтів та на своєму блозі - і . Ці послуги дозволяють досить легко реалізувати поставлене завдання.
На цьому блоці використовуються лише необхідні зображення соціальних кнопок, об'єднані в . Усі стилі зведені до мінімуму. Плюс простий каркас html.
Ми розглянемо класичний варіант, коли кнопки розташовані після статті.
Зробити це можна або відкривши файл, що відповідає за виведення статей (single.php) і до вихідного коду додати блок соціальних кнопок. Або це можна зробити через файл функції теми (functions.php).
Я покажу обидва варіанти, а ви для себе виберіть потрібний.
Попередження: Перед початком дій зробіть резервну копію файлу single.php!
Відкриваємо адміністративну панель Вордпрес – "Зовнішній вигляд" — «Редактор» — "Один запис (single.php)".
У вихідному коді шукайте місце, де закінчується виведення статті, і починаються коментарі або навігація. Саме це місце потрібно буде вставити html код блоку соціальних кнопок.
Уважно дивіться на скріншот, орієнтуйтесь на коди, які відповідають за виведення статтіта коментарів. І вставляйте наведений нижче код.
Звичайно, у ваших шаблонах будуть деякі відмінності, але впевнений, що ви розберетеся, складного в цьому нічого немає. До того ж у вас є резервна копія, боятися нема чого.
А ось і сам html код блоку соціальних кнопок:
Пояснення за кодом:це один блок ДІВ із класом.share, в якому містяться посилання на соціальні мережі. Посилання відкривається в окремому спливаючому вікні, за це відповідає ця функція onClick=window.open . Підстановка посилання на статтю здійснюється ось цим кодом. Кожне посилання має свій клас, через який надається зображення кнопки.
На цьому вставку через вихідний код закінчено. І далі необхідно підключити css стилі.
Попередження: перед початком робіт, зробіть резервну копію файлу functions.php!
Для того, щоб використовувати цей варіант, потрібно відкрити файл functions.php і в кінці додати цей код:
/* Вставка соцкнопок*/ add_action("comments_template", "soc_button"); function soc_button() (?> І будьте уважні після вставки коду у вас не повинно бути пробілів та інших символів. Або тільки закриття PHP коду?>. В іншому випадку сайт перестане працювати.Пояснення за кодом:місце, де буде виставлено кнопки соціальних мереж, визначається через API ключ comments_template . За цим ключем визначається місце перед коментарями. Сам код соцкнопок укладено у зворотні теги відкриття та закриття php. У коді я їх позначив червоним кольором. у цьому вся хитрість вставки html коду у php, через функції теми.
На цьому і цей спосіб закінчено, переходимо до завантаження зображень на сайт.
Наприклад, я підготував кілька спрайтів із зображеннями соціальних кнопок. Завантажити їх можете.
Спрайт, який я використовую як приклад, важить лише 3,97 кб і містить лише необхідні кнопки. А якщо це спрайт, то і запит до бази лише одні, а не для кожної кнопки окремо.
Завантажуєте зображення або готуєте свої та завантажуєте їх на свій сайт. Думаю із цим проблем виникнути не повинно. Далі посилання на цей спрайт буде потрібно для оформлення кнопок через стилі css.
Цей крок можна звичайно, виконати найпершим, але я віддаю перевагу спочатку виконати всю складну технічну роботу, а вже після приступити до приємних дрібниць із css стилями.
Отже, відкриваємо файл style.css, який відповідає за дизайн вашого сайту. І вставляємо ось ці стилі:
Share a ( display: inline-block; vertical-align: inherit; margin: 5px 0 0 2px; padding: 0px; font-size: 0px; width: 40px; height: 40px; background: url("http://test ..png ") no-repeat scroll 0px 0px transparent;) .share a.vkontakte ( background: url("http://test..png ") no-repeat scroll -168px 0px transparent; ) .share a.google ( background: url("http://test..png ") no-repeat scroll -252px 0px transparent; ) .share a.livejournal ( background: url("http://test..png ") no-repeat scroll -336px 0px transparent; ) .share a.twitter ( background: url("http://test..png ") no-repeat scroll -42px 0px transparent; ) .share a.mail ( background: url("http http://test..png ") no-repeat scroll -294px 0px transparent; ) .share a.odnoklassniki ( background: url("http://test..png ") no-repeat scroll -126px 0px transparent; ) .share a.pinterest ( background: url("http://test..png ") no-repeat scroll -210px 0px transparent; ) .share a.liveinternet ( background: url("http://test..png ") no-repeat scroll -378px 0px transparent; ) .share a.evernote ( background: url("http://test..png ") no-repeat scroll -420px 0px transparent; ) .share a.bookmark ( background: url("http://test.. png ") no-repeat scroll -462px 0px transparent; ) .share a.email ( background: url("http://test..png ") no-repeat scroll -504px 0px transparent; ) .share a.print ( background: url("http://test..png ") no-repeat scroll -546px 0px transparent; ) .share a.digg ( background: url("http://test..png ") no-repeat scroll -588px 0px transparent; ) .share a.spring ( background: url("http://test..png ") no-repeat scroll -630px 0px transparent; )
Пояснення за кодом:клас.share визначає загальний вигляд блоку, розміри кожної кнопки, відступи та задає єдиний фон. А далі кожне посилання має свій клас і кожному такому засланню, через властивість background присвоюється вигляд кнопки. Кнопки виконані як css спрайт, і кожна кнопка має ширину та висоту 40px, а між ними відступ 2px, що дозволяє з точністю визначити зображення для кожної кнопки. Тобто перша кнопка вказана як 0, а друга як 42 і так далі. У коді ці значення позначені помаранчевим кольором. Посилання на спрайт теж виділено помаранчевим кольором, його ви змінюєте на шлях до свого спрайту.
На цьому весь процес створення свого блоку соціальних кнопок закінчено. Можна сміливо переходити до перевірки.
А ще я маю відеоурок, в якому весь процес показаний наочно, полюс показано роботу самих кнопок. Дивіться та впроваджуйте на своїх сайтах та блогах.
Ось тепер все. З поставленим завданням упорався. Всім бажаю успіху і до зустрічі у нових статтях та відеоуроках.
