Здравствуйте, уважаемые читатели блога сайт. Можно, конечно же, и плагин для этой задачи использовать, но сделать самому не так уж и сложно , да и будет меньше, тем более, что их у меня и так достаточно много трудится (см. статью по приведенной ссылке). Иконки соцсетей я взял из , о котором уже довольно подробно писал (надеюсь, что Димокс против этого возражать не будет).
А также я посчитал уместным и по Емайлу.
Создаем спрайт из кнопок и вставляем 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
