Здрастуйте, шановні читачі блогу сайт. Можна, звичайно ж, і плагін для цього завдання використовувати, але зробити самому не так вже й складно, Та й буде менше, тим більше, що їх у мене і так багато працює (див. статтю за наведеною посиланням). Іконки соцмереж я взяв з , про який вже досить докладно писав (сподіваюся, що Дімокс проти цього не заперечуватиме).
А також я вважав за доречне і по Емайлу.
Створюємо спрайт із кнопок і вставляємо Html код на сайт
Після того, як усі потрібні групи та сторінки в соцмережах ви створили, а значить отримали всі необхідні посилання, можна спантеличуватися додаванням кнопок на сайт. Можна, звичайно ж, відповідно до мого посту, підібрати для кожної соцмережі відповідну іконку і при необхідності зменшити її розмір до необхідного в і.
Але це не найкращий варіант. Чому? Ну, тому що для підвантаження кожної картинки соцмережі буде здійснюватись окремий запит до вашого сервера. Буде у вас десяток іконок – значить десять запитів, які будь-якими будуть створювати додаткове навантаження на сервер та . Нам таке марнотратство не підходить, тим більше, що вже давно.
Я вирішив не винаходити велосипед (створювати спрайт), а використав той, що створює конструктор Шаре42 (посилання на опис роботи з ним наведено трохи вище). У ньому можна вибрати ті соцмережі, іконки яких вам будуть потрібні, і разом з кодом ви отримаєте спрайт CSS, тобто. фізично один графічний файл, на якому будуть розміщені всі потрібні вам іконки соцмереж та підписки на RSS стрічку (і Емайл, якщо потрібно).
Я вибрав чотири основні мережі та пару іконок для підписки на новини з розміром іконок 24 на 24, тому мій спрайт виглядає так (щоправда, туди ще затесався, але це не біда):
Тепер у нас є всі інгредієнти – посилання на групи або сторінки соцмереж та іконки для їх відображення на сайті. Залишилося це лише правильно приготувати, тобто. верстати. Мій блог працює на WordPress, тому код з кнопками я вставлятиму в один з . У моєму випадку він називається sidebar.php. Html кодпри цьому виходить вкрай простий:
Ну, і найцікавіше. За допомогою ми визначаємо, яка саме область нашого спрайту відображатиметься на даному конкретному місці у вигляді фону (у нашому випадку це підкладається під гіперпосилання). Пояснювати як так виходить дуже довго, тому читайте наведену за посиланням статтю і все стане зрозумілим (там і приклади наводяться). Якщо ліньки, то просто поекспериментуйте з циферками, які, як ви могли помітити, не задарма кратні 24.
Так, файл спрайту залийте ФТП на свій сайт і вкажіть в background до нього шлях (). От і все. Якщо не вийде, що читайте уважніше матеріали за наведеними вище посиланнями, ну, а якщо вже зовсім нічого не вийде, то описуйте вашу ситуацію в коментарях (докладно - для вставки коду на забудьте його в теги PHP укласти з квадратними дужками).
Удачі вам! До швидких зустрічей на сторінках блогу сайт
Вам може бути цікаво
Ідея організувати інтернет майданчик для об'єднання людей із спільними інтересами, щоб згодом отримати хороший трафік та впровадити систему платної підписки, приваблює багатьох. Для реалізації цієї мети в короткі терміни підійде соціальна мережа, побудована на шаблоні WordPress, сумісному з плагінами BuddyPress і bbPress. Саме вони забезпечують повний функціонал соцмережі: створення профілів, обмін повідомленнями, додавання до друзів, спілкування на форумі, спільна робота над файлами та інші опції.
10 шаблонів для сайту соціальної мережі на WordPress + BuddyPress
1. Sweet Date
Шаблон для соцмережі, що пропонує 2 демо для сайту знайомств та 1 для сайту пошуку попутників. Сайт на Sweet Date може використовувати систему платної підписки та контроль доступу до контенту. Повністю чуйний дизайн теми гарантує, що, відкриваючи сайт на будь-якому пристрої, відвідувач отримує однаковий досвід користувача.
2. Thrive
Шаблон для інтранет та інтернет спільнот. Він є універсальною платформою, що об'єднала в собі функціонал соціальної мережі, форуму, систем обміну повідомленнями, організації заходів, управління проектами та обміну файлами, e-commerce та e-learning (при купівлі плагіна Learndash).
3. Buddy
Тема, розроблена під Buddypress та bbPress, допомагає створити соцмережу із сучасним дизайном. Buddy використовує чуйну Retina Ready верстку та бібліотеку іконкових шрифтів Font Awesome. Шаблон дозволяє легко додати на сайт такі віджети, як: "Нові/популярні/активні користувачі", "Нові/популярні групи", "Календар", "Останні теми на форумі", "Статистика", "Користувачі онлайн".
4. Socialize
Шаблон максимально використовує можливості Buddypress, завдяки чому є гарною основою під співтовариство або соцмережа. Socialize повністю змінив дизайн bbPress, зовні наблизивши його до класичного стилю форуму. Щоб веб-майстер міг досягти потрібного виду відображення контенту, шаблон містить 4 варіанти розкладки для головної сторінки, 9 — для категорій, 6 — для постів.
5. Klein
Інноваційна тема, призначена для роботи з BuddyPress та bbPress, виконана з особливою увагою до деталей. Підійде тим, кому потрібна інтернет-спільнота чи соціальна мережа, що працюють на WordPress. Ідеальна для сайтів із великою кількістю зареєстрованих користувачів. Підключивши до учасників спільноти.
6. KLEO
KLEO заслужила звання найбільш продається BuddyPress теми поточного року, тому що вона справді виправдовує очікування. Шаблон пропонує простий із вивіреними другорядними елементами. Тема використовує вбудований пошук, який не включений в жодний інший шаблон, і дозволяє уникнути встановлення спеціальних плагінів, що сприятливо позначається на швидкості роботи сайту.
7. Monstroid2
Універсальний темплейт, послідовник легендарної теми Monstroid, повністю переписаний із нуля. Завдяки сумісності з плагіном BuddyPress шаблон дозволяє веб-майстрам без зайвих зусиль створити сайт соціальна мережа або тематичне онлайн-спільнота. У шаблоні передбачено 7 стилів для хедера, що настроюються, є підтримка мега меню. Покупець може використати картинки з демо на своєму сайті.
Перша за популярністю WordPress тема для інтранет/екстранет спільнот. Woffice може бути під корпоративні та урядові інтранет/екстранет мережі, звичайні інтернет спільноти та соціальні мережі, шкільну або іншу приватну соцмережу.
Звернемо увагу на деякі теми WordPress, зроблені спеціально для соціальних мереж.
1. Mingle – Multi-Purpose WordPress Theme
Якщо ви створюєте свою соціальну мережу за допомогою BuddyPress, вам потрібна Mingle з її функціями та дизайном. Розроблена елітною командою Parallelus, Mingle спеціально зроблена для платформи BuddyPress та має велику кількість чудових функцій.
Особливості цієї теми:
- редактор контактних полів
- генератор сайдбарів
- підтримка HTML5 + CSS3
- SEO-дружній код
- блоги
- портфоліо
- слайд шоу
- шорткоди
- безліч інших особливостей.
2. Salutation Responsive WordPress + BuddyPress Theme
Після виходу Salutation можна сміливо сказати, що Parallelus чудово розуміє, що потрібне для створення гарного дизайну. Насамперед варто відзначити, що Salutation є 100% чуйним продуктом – ваша соціальна мережа відмінно працюватиме на різних мобільних пристроях з будь-яким розміром екрану.
Крім того, Salutation має деякі цікаві функції:
- слайдер Revolution
- можливість перетягування drag and drop
- необмежений вибір кольорів
- спливаючі поля входу
- легкі налаштування
- блоги
- віджети
- інтуїтивно зрозуміла адмінка
- генератор сайдбарів
- портфоліо
- сумісність із BuddyPress
- шорткоди
- багато іншого.
3. Woffice – Intranet/Extranet WordPress Theme
Ця тема має безліч можливостей, широкий набір функцій, серед яких можна згадати високі стандарти кодування, регулярні оновлення та відмінну підтримку. Ви можете використовувати Woffice для створення соціальних мереж, внутрішніх та зовнішніх мереж або спільнот для шкіл, робочих місць, бізнесу та державних органів.
Особливості цієї теми:
- підтримка функцій BuddyPress
- менеджер файлів
- іконки
- чат та обмін повідомленнями
- форуми
- шрифти Google
- чуйний дизайн
- демо версія
- документація
- відео уроки
- календар
- шорткоди
- bbPress
- підтримка WMPL
- чистий код
- необмежену кількість сайдбарів
- користувальницькі віджети
- сторінки входу користувачів
- інтернет магазин.
4. Serpent – Responsive Social Network Theme
Ця тема має такі широкі можливості, що, можливо, деякі з них вам ніколи не знадобляться. Serpent - єдина у своєму роді тема WordPress, яка може підняти ваш сайт на новий рівень. Із нею просто неможливо щось зробити неправильно.
Розробники цієї теми – респектабельна команда Cosmothemes.
Основні характеристики теми:
Ціна включає майбутні оновлення і 6-місячну підтримку.
5. UnitedCommunity – BuddyPress Theme
UnitedCommunity – багатофункціональна тема WordPress для соціальних мереж від респектабельної команди Diabolique. Це нова тема, що вийшла 2 вересня 2015 року.
Її чудові особливості:
- ефектний, унікальний та чуйний дизайн
- понад 40 внутрішніх сторінок
- віджети на головній сторінці
- простота встановлення та налаштування
- сумісність із WooCommerce
- користувальницькі віджети
- спливаючі повідомлення
- підтримка WPML
- шрифти Google
- випадають меню
- багато іншого.
6. Klein – A Nitty Gritty Community Theme
Якщо ви шукаєте ідеальну тему WordPress для своєї соціальної мережі, зверніть увагу на Klein. Вона надає користувачам можливість роботи із повнофункціональною соціальною мережею, має широкий спектр можливостей.
Ваші користувачі можуть надсилати необмежену кількість повідомлень, ділитися подіями, додавати контакти, обговорювати ідеї на форумах та створювати гарні профілі користувачів. Ви зможете скористатися сумісністю Klein з WooCommerce та продавати товари учасникам вашої мережі. Крім того, Klein підтримує WordPress 4.4, bbPress та BuddyPress, що дає вам можливість перетворити ваш сайт WordPress на популярну соціальну мережу.
Інші функції включають:
- візуальний редактор
- Користувальницькі кольори
- слайдер Revolution
- сумісність із WPML
- чуйний дизайн
- інтуїтивно зрозуміла панель адміністратора
- SEO-дружній код
- 6 різних шапок + макети
- підтримка соціальних медіа
- 1000+ шрифти значки
- повідомлення
- безліч інших функцій.
Для того, щоб створити за допомогою WordPress потужну соціальну мережу, треба подумати не лише про вибір плагіна та теми. Вам ще потрібно буде подбати про вибір якісного хостингу, а також просування сайту в пошукових системах. Що стосується роботи з плагінами, спробуйте спочатку різні варіанти, а потім зробіть остаточний вибір.
Примітка
Створення соціальної мережі з урахуванням WordPress – процес нескладний. Все, що вам потрібно, це бізнес-план, плагін для створення соціальних мереж та сумісна тема. Пам'ятайте, ви можете вибрати будь-яку тему та налаштувати її на свій смак, але теми для соціальних мереж дозволять вам заощадити час, пропонуючи безліч опцій.
Останні кілька років популярність соціальних мереж злетіла до небачених масштабів. Визнаним лідером у цій галузі є, звичайно, Facebook. Для нього розроблено безліч різноманітних додатків, що широко використовують технологію .
Але якщо у Ваші плани не входить обігнати за популярністю Facebook або Вконтакте, а Ви бажаєте просто створити свою соціальну мережу чи спільноту, схоже з Facebook, Вконтакте, Twitter або Google Plus - цей огляд для Вас.
Ми Роздивимось 15 скриптів для створення соціальної мережі назі стандартними для подібних продуктів функціями, чатами, мікроблогами а-ля Twitter та іншими популярними функціями, які, безперечно, Вам сподобаються. У добірку увійшли як платні, і безкоштовні рішення.
phpDolphin
Ця платформа для створення соціальної мережінадає практично ті ж можливості, що і Facebook - живий чат, відправка особистих повідомлень, коментарів, обмін фотографіями та багато іншого.Вартість: $43
LiveStreet CMS
Блогосоціальна платформавітчизняного виробництва У рунеті досить часто зустрічаються портали, які були збудовані з її допомогою. Якщо спробувати двома словами описати цю CMS - це якийсь аналог всім відомого Хабрахабр. Сенс системи такий: кожен юзер може стати автором.Вартість: Безкоштовно
Boonex Dolphin
Boonex Dolphin – це потужна CMS для створення соціальної мережі. В арсеналі є величезна кількість розширень, таких як: групи, оголошення, каталог аудіо та відео, афіша, блоги, чат, каталог файлів та ін. Також Ви можете розширити стандартний набір модулів платними, які можна купити на офіційному сайті. Є можливість настроювати стильове оформлення своїх сторінок. Крім цього, розробники надають мобільні програми, які інтегруються з вашим порталом. CMS є платною, але є тріальна версія для тестування.За своїм досвідом роботи з цим двигуном можу сказати, що система потужна, порівняно стабільна, але під неї потрібен хороший сервер, оскільки «жере» багато ресурсів.
Вартість: від 29 $ / міс або від 599 $ разова покупка (є тріальна версія).
Social Business
Social Business - це скрипт соціальної мережі для бізнесменів. Головна мета цього скрипту – дати можливість діловим людям знайти собі партнерів. Якийсь подоба LinkedIn.Вартість: 32 $
SocEuro Social Network
SocEuro – це досить функціональний скрипт соціальної мережіз типовим набором модулів для такого роду продукту. Є аудіозаписи як Вконтакте, чати, стрічки, ігри…Вартість: 43 $
Oxwall
Абсолютно безкоштовний скрипт соціальної мережіз відкритим кодом. Має величезну кількість таких же безкоштовних та унікальних доповнень, які не знайти навіть у платних аналогах: фотогалерея, відеокаталог, блоги, форуми, вікі, групи, події, друзі, спільна робота, спільний доступ до файлів, відеоконференції та ін.Вартість: Безкоштовно
Socialkit
Практично всі функції, що стали стандартом для соцмереж, втілені в платформі ScialKit: живий чат, особисті сторінки, обмін повідомленнями та посиланнями, можливість залишати коментарі та лайки, сповіщення, хештеги та згадки.Вартість: $39
Pligg
Pligg – це безкоштовне, просте і водночас потужне рішення для створення блогосоціальної мережі чи спільноти. Особливість у тому, що можна створити саморегулівне співтовариство. Користувачі самі вирішують, що погано, що добре. Таким чином відпадає потреба в модеруванні. Зі схожою філософією працює Хабрахабр і система LiveStreet CMS, яка також присутня в цій добірці.Вартість: Безкоштовно
SocioQuiz
SocioQuiz - скрипт, здатний перетворити Ваш сайт на портал найрізноманітніших тестів, опитувань та вікторин. Забезпечує повну підтримку фото- та відеоконтенту, а також повну свободу використання власного . Має значно ширші можливості, в порівнянні з такими аналогічними сайтами, як Playbuzz, Buzzfeed та інші.Вартість: $44
Friendly Social Network
Friendly social network - це справжнісінька соціальна мережа для друзів. Має повний набір функцій: персональні сторінки, групи, живий чат, коментарі, лайки, хештеги, згадки, повідомлення. Є можливість створювати окремі профайли для друзів та публічні. Можна керувати відображенням постів – видимі всім (публічні), або лише друзям. І це лише деякі можливості, які роблять Friendly практично ідеальною платформою для створення своєї спільноти.Вартість: $36
