Здрастуйте, шановні читачі блогу . Можна, звичайно ж, і плагін для цієї задачі використовувати, але зробити самому не так вже й складно, так і одним плагіном в WordPress буде менше, тим більше, що їх у мене і так досить багато працює (див. статтю за наведеною посиланням). Іконки соцмереж я взяв з безкоштовного конструктора кнопок Share42, про який вже досить докладно писав (сподіваюся, що Димокс проти цього заперечувати не буде).
Тепер залишиться тільки скопіювати посилання (адреси ваших сторінок в соцмережах, якщо ви вже створили). Читайте про це в наступних постах:
- Створення бізнес-сторінки у Facebook
- Створення брендового сторінки в Гугл+
- Додавання своєї групи під Вконтакте
- Реєстрація і вхід в Твіттер
А також я вважав доречним додати кнопку підписки на RSS-стрічку і кнопку Feedburner для підписки на новини сайту по Емайлу.
Створюємо спрайт з кнопок і вставляємо Html код на сайт
Після того, як всі потрібні групи та сторінки у соцмережах ви створили, а значить отримали всі необхідні посилання, можна перейматися додаванням кнопок на сайт. Можна, звичайно ж, згідно з моїм постом про іконки та значки для сайту, підібрати для кожної соцмережі відповідну іконку і при необхідності зменшити її розмір до необхідного в простенькій програмі FastStone Image Viewer і безкоштовному онлайн-фотошопі.
Але це не є кращий варіант. Чому? Ну, тому що для завантаження кожної картинки соцмережі буде здійснюватися окремий запит до вашого сервера. Буде у вас десяток іконок — значить десять запитів, які по-любому будуть створювати додаткове навантаження на сервер і знижувати швидкість завантаження сторінок. Нам таке марнотратство не підходить, тим більше, що вже давно винайшли CSS спрайт.
Я вирішив не винаходити велосипед (створювати спрайт), а використовував той, що створює конструктор Шаре42 (посилання на опис роботи з ним наведена трохи вище). У ньому можна вибрати ті соцмережі, іконки яких вам будуть потрібні, і разом з кодом ви отримаєте CSS спрайт, тобто фізично один графічний файл, на якому будуть розміщені усі потрібні вам іконки соцмереж і підписки на RSS стрічку (і Емайл, якщо буде потрібно).
Я вибрав чотири основних мережі і пару іконок для підписки на новини з розміром іконок 24 на 24 пікселя, тому мій спрайт виглядає так (FriendFeed, правда, туди затесався ще, але це не біда):
Тепер у нас є всі інгредієнти — посилання на групи чи сторінки соцмереж і іконки для їх відображення на сайті. Залишилося все це тільки правильно приготувати, тобто зверстати. Мій блог працює на WordPress, тому код з кнопками я буду вставляти в один із шаблонів, з яких складається використовувана мною тема оформлення. У моєму випадку він називається sidebar.php. Html-код при цьому виходить украй простий:
На всякий випадок я додав rel=»nofollow», щоб посилання не враховували пошуковики при розподілі ваг на сайті. Атрибут Title в теге гіперпосилання A служить для відображення укладеного в нього тексту при підведенні курсору миші до іконки. Я не став ним нехтувати, бо не для всіх відвідувачів сайту іконки можуть представляти вичерпну інформацію. Виглядати це буде приблизно так:
Прив’язуємо спрайт до Html-коду і оформляємо кнопки в CSS
Однак очевидно, що для описаного вище коду потрібно буде ще кілька рядків у файлі стилів додати (у мене він називається style.css і живе в папці з використовуваної темою оформлення — читайте про них по наведеній трохи вище лінком). У мене вийшло приблизно так (може бути і корявенько, але працює):
.twit {display:inline-block;vertical-align:bottom;width:24px;height:24px;margin:0 20px 0px 0;padding:0;outline:none;background:url(шлях до файлу зі спрайтом/icons.png) -0px 0 no-repeat;}
.vkon {display:inline-block;vertical-align:bottom;width:24px;height:24px;margin:18px 20px 0px 0;padding:0;outline:none;background:url(шлях до файлу зі спрайтом/icons.png) -24px 0 no-repeat;}
.face {display:inline-block;vertical-align:bottom;width:24px;height:24px;margin:0 20px 0px 0;padding:0;outline:none;background:url(шлях до файлу зі спрайтом/icons.png) -48px 0 no-repeat}
.goog {display:inline-block;vertical-align:bottom;width:24px;height:24px;margin:0 20px 0px 0;padding:0;outline:none;background:url(шлях до файлу зі спрайтом/icons.png) -96px 0 no-repeat}
.rsskt {display:inline-block;vertical-align:bottom;width:24px;height:24px;margin:0 20px 0px 55px;padding:0;outline:none;background:url(шлях до файлу зі спрайтом/icons.png) -120px 0 no-repeat}
.emailkt {display:inline-block;vertical-align:bottom;width:24px;height:24px;margin:0 20px 0px 0;padding:0;outline:none;background:url(шлях до файлу зі спрайтом/icons.png) -144px 0 no-repeat}
CSS властивість display:inline-block дозволяє надати тегу гіперпосилання A одночасно властивості рядкового і блокового елемента. По відношенню до зовнішніх і сусіднім тегах він буде вести себе як рядковий (тобто поряд з ним можуть розташовуватися й інші малі елементи), а ось по відношенню до вкладених в нього тегам він буде вести себе як блочний (тобто можна буде ставити його розміри, як по ширині, так і по висоті, а ще задавати відступи за допомогою марджинов і педдингов).
CSS властивість vertical-align:bottom зачеплений вирівнювання по вертикалі, що напевно зрозуміло з його назви. Практично для всіх елементів в Html коді воно означає вирівнювання між собою рядкових елементів з текстом щодо їх базової лінії. Просто спробуйте і зрозумієте його призначення.
З допомогою width і height ми задаємо розміри відображуваного блоку, який повинен збігатися з розміром іконки соцмережі. Властивість outline:none використовується, щоб в деяких браузерах при кліку на посилання навколо неї не з’являлася рамка. З допомогою margin я задав відступи від верху і від сусідніх іконок, якщо не помиляюся (роки три тому робив, коли CSS активно вивчав).
Ну і найцікавіше. З допомогою збірного правила background ми визначаємо, яка саме область нашого спрайту буде відображатися на даному конкретному місці у вигляді фону (в нашому випадку цей фон підкладається під гіперпосилання). Пояснювати як так виходить дуже довго, тому читайте наведену за посиланням статтю і все стане зрозуміло (там і наочні приклади наводяться). Якщо лінь, то просто поекспериментуйте з циферками, які, як ви могли помітити, не дарма кратні 24.
Так, файл спрайту залийте по ФТП на свій сайт і вкажіть у background до нього шлях (у відносному чи абсолютному вигляді). От і все. Якщо не вийде, читайте уважніше матеріали з наведеним вище посиланням, ну, а якщо зовсім вже нічого не вийде, то опишіть вашу ситуацію в коментарях (подробненько — для вставки коду на забудьте його в теги PHP укласти з квадратними дужками).
Удачі вам! До зустрічей на сторінках блогу
