Как написать соц сеть на html

Как создать кнопки соц.сетей в HTML/CSS

Это ещё одна статья, в которой мы предоставляем вам отличные примеры создания уникальных элементов дизайна. Сегодня мы поговорим о такой вещи как кнопки социальных сетей для сайта.

Вообще социальные сети являются неотъемлемой частью для каждого сайта, особенно для продающих landing-page. Именно они обеспечивают сайт основной клиентской базой и чаще всего являются основной формой связи с администрацией сайта.

Данный элемент, при правильном размещении на интернет-ресурсе, позволит вам привлечь много клиентов и других пользователей.

HTML и CSS код

В нашей рубрике произошло небольшое обновление. Теперь перед предоставлением исходников и элементов кода мы будем разбирать с вами свойства и теги, которые лежат в основе исходников.

Это поможет вам «не потеряться» в коде и примерно понять о чем идет речь. А для знатоков HTML и CSS это прекрасная возможность освежить знания.

HTML теги

Все наши кнопки будут располагаться в основном блоке div, который будет соединять их в единую панель. Для него мы присвоим класс, который будет использоваться для стилизации, с помощью атрибута class.

В основе панели будет использоваться немаркированный список, который создается при помощи тега ul. Для него также присваивается класс.

Каждая отдельная кнопка будет находиться в теге списка li и содержать в себе ссылки на социальные сети(тег a), а также классы для стилизации.

Чтобы указать ссылку и создать селекторы для стилизации, создадим атрибуты href и a. Классов нужно будет создавать много, для каждой кнопки отдельный.

Можно конечно использовать и id, но мы воспользуемся классами.

CSS стили

Теперь самая увлекательная часть работы.

Для начала нам нужно вписать все селекторы — класс общего контейнера, тега ul и классы кнопок.

Сначала мы создадим тени для кнопок. Для этого используем атрибут box-shadow.

После этого будем использовать свойства создания фона — background. В качестве фона будут использоваться как обычные цвета, так и градиенты.

Осталось задать размер фона и анимацию. Для этого используем свойства animation и background.

Создание кнопок социальных сетей. CSS3 & HTML5

Первое что нам нужно сделать — разместить кнопки в HTML документе. Создаем общий контейнер div, в который размещаем наш список с кнопками.

Внутри списка кнопок мы создаем теги ссылок, которые будут осуществлять переход на социальные сети.

В исходниках вы сможете найти 4 списка, они используются для демонстрации различных вариантов стилизации. Не обязательно брать их все, можете выбрать тот, который вам больше нравится.

Мы разместили наши кнопки, теперь приступаем к стилизации.

Сначала создадим стили для наведения. Создадим тени, фон и анимацию. Для селектора класса вводим псевдоселектор :hover.

box-shadow:0 5px 8px rgba(26,35,126,0.25);

background:-webkit-linear-gradient(left,#3949AB 0%,#2196F3 100%);

background:linear-gradient(to right,#3949AB 0%,#2196F3 100%);

-webkit-animation:Gradient 1s ease infinite;

animation:Gradient 1s ease infinite

Внимание! На примере показана отдельная часть кода для одной кнопки. То же самое вам нужно будет повторить для каждой из них.

После этого в нашем CSS документе создаем отдельные свойства для темных и светлых кнопок. Сначала создадим нужно создать общие стили для каждого вида кнопок.

Теперь сделаем стилизацию для каждого списка.

Заключение

Поздравляем, у нас получились кнопки социальных сетей, с шикарной стилизацией. Вы можете выбрать любой блок из этого списка для вашего сайта.

Источник

15 скриптов для создания социальной сети на PHP

За последние несколько лет популярность социальных сетей взлетела до невиданных масштабов. Признанным лидером в этой области является, конечно же, Facebook. Для него разработано огромное количество разнообразных приложений, широко использующих технологию AJAX.

Но если в Ваши планы не входит обогнать по популярности Facebook или Вконтакте, а Вы хотите просто создать свою социальную сеть или сообщество, схожее с Facebook, Вконтакте, Twitter или Google Plus — то этот обзор для Вас.

Мы рассмотрим 15 скриптов для создания социальной сети на PHP со стандартными для подобных продуктов функциями, чатами, микроблогами а-ля Twitter и другими популярными функциями, которые, несомненно, Вам понравятся. В подборку вошли как платные, так и бесплатные решения.

phpDolphin

LiveStreet CMS

Блогосоциальная платформа отечественного производства. В рунете довольно часто встречаются порталы, которые были построены с ее помощью. Если попытаться в двух словах описать данную CMS — это некий аналог всем известного Хабрахабр. Смысл системы таков: каждый пользователь может стать автором.
Стоимость: Бесплатно

Boonex Dolphin

Boonex Dolphin — это мощная CMS для создания социальной сети. В арсенале имеется огромное количество расширений, таких как: группы, объявления, каталог аудио и видео, афиша, блоги, чат, каталог файлов и пр. Также Вы можете расширить стандартный набор модулей платными, которые можно купить в разделе расширений на официальном сайте. Есть возможность настраивать стилевое оформление своих страниц. Помимо этого, разработчики предоставляют мобильные приложения, которые интегрируются с вашим порталом. CMS платная, но есть триальная версия для тестирования.
По своему опыту работы с данным движком могу сказать, что система мощная, сравнительно стабильная, но под нее нужен хороший сервер, так как «жрет» много ресурсов.
Стоимость: от 29$/мес или от 599$ разовая покупка (есть триальная версия).

PHP Social Network Platform

Social Business

Social Business — это скрипт социальной сети для бизнесменов. Главная цель этого скрипта — дать возможность деловым людям найти себе партнеров. Некое подобие LinkedIn.
Стоимость: 32$

SocEuro Social Network

SocEuro — это довольно функциональный скрипт социальной сети с типичным набором модулей для подобного рода продукта. Есть аудиозаписи как Вконтакте, чаты, ленты, игры…
Стоимость: 43$

Oxwall

Абсолютно бесплатный скрипт социальной сети с открытым исходным кодом. Имеет огромное количество таких же бесплатных и уникальных дополнений, которые не найти даже в платных аналогах: фотогалерея, видеокаталог, блоги, форумы, вики, группы, события, друзья, совместная работа, общий доступ к файлам, видео-конференции и т.д.
Стоимость: Бесплатно

Socialkit

Pligg

Pligg — это бесплатное, простое и в то же время мощное решение для создания блогосоциальной сети или сообщества. Особенность в том, что можно создать саморегулируемое сообщество. Пользователи сами решают что плохо, что хорошо. Таким образом отпадает необходимость в модерировании. С похожей философией работает Хабрахабр и система LiveStreet CMS, которая также присутствует в данной подборке.
Стоимость: Бесплатно

SocialMat

SocialMat — это что-то среднее между Twitter и Facebook. Пользователи могут постить небольшие сообщения (включая и мультимедиа), а также общаться между собой в чатах.
Стоимость: 34$

SocioQuiz

Sngine v2

Простенький, но симпатичный скрипт социальной сети. Очень напоминает Facebook, но более упрощенный. Разработчики позаботились о покупателях скрипта и сделали мобильное приложение, которое смогут скачать ваши пользователи. Большим плюсом является то, что есть админка.
Стоимость: 43$

Friendly Social Network

PHP Social Microblogging

PHP Social Microblogging — это аналог Твиттера. Все те же микроблоги. Скрипт предназначен для обмена новостями и сообщениями между пользователями. Есть поддержка хэштегов.
Стоимость: 23$

PHPfox

Еще одна мощнейшая платформа для создания социальной сети на PHP. По функционалу очень похожа на Boonex Dolphin. В PHPfox также есть возможности создавать чаты, форумы, доски объявлений, афиши и пр.
CMS имеет огромное сообщество, так что при возникновении каких-либо проблем, будет возможность их коллективно решить на форуме. Существует и русскоязычное сообщество, где можно найти русификацию.
Стоимость: 399$

Источник

Как добавить социальные кнопки на сайт?

В этой статье мы рассмотрим различные способы создания блоков «Поделиться» и «Мне нравится» в том числе включая вариант без использования сторонних сервисов (через URL-адреса прямого доступа). Кроме этого ещё разберём как можно оформить ссылки на официальные профили компании в социальных сетях.

Социальные сети на сайте

На сайте ссылки на социальные сети используются для того, чтобы пользователь знал о наличии на этих ресурсах официальных страниц этой компании, а также мог очень просто перейти туда.

Обычно ссылки на официальные профили в социальных сетях оформляются в виде значков или кнопок, и помещаются в заголовок или футер страниц веб-сайта.

Например, на сайте «mebel.ru» они находятся в правом нижней части:

Кроме ссылок на официальные страницы бренда, на сайтах ещё очень часто можно увидеть кнопки «share» (поделиться) и «like» (нравится). Их обычно располагают рядом со статьёй, товаром или услугой.

Например, на сайте «ferra.ru» кнопки «share» расположены сразу под заголовком статьи:

Кнопки «share» позволяют быстро поделиться этим контентом в социальных сетях. При нажатию на неё автоматически формируется ссылка на этот контент и пользователю останется только нажать «Отправить». После чего она будет опубликована в его личном аккаунте, которую увидят все его подписчики.

Кнопки «like» обычно кроме возможности быстро поделиться, позволяют ещё посетителям сайта одним кликом выразить своё отношение к контенту, т.е. зарегистрировать отметку «Нравится».

Почему связь с социальными ресурсами важно для вашей компании? В основном это связано с тем, что социальные сети сейчас занимают огромную роль в жизни людей и не использовать их для увеличения своей аудитории, просмотров и потенциальных клиентов просто неразумно.

Ссылки на официальные профили в социальных сетях

Если в социальных сетях у вас имеются официальные профили компании, то рекомендуется создать ссылки на них.

Выполняется это очень просто.

Кнопки «Поделиться» и «Мне нравится»

Блок с кнопками «Поделиться» предназначен для того, чтобы пользователи могли быстро публиковать понравившиеся им страницы в своих социальных сетях, а в случае использования «Мне нравиться» ещё и «лайкать» их.

Использование сторонних сервисов

Создание соцкнопок этим способом выполняется легко. Для этого достаточно перейти на любой сервис, представляющий такую возможность, выбрать в нём вид кнопок, вариант их оформления и нужный набор сервисов. Обычно все эти действия выполняются очень просто (через конструктор). Далее, после того как вы всё окончательно настроили, нужно скопировать полученный код и подключить его к себе на сайт.

Примеры сервисов, представляющий такую услугу:

Как это осуществляется в USocial:

Конструктор блока «Поделиться» от Яндекса:

Дополнительно, чтобы повысить эффективность от репостинга, на страницы сайта нужно добавить социальные мета-теги (микроразметку).

Мета-теги для социальных сетей

При этом для разных сетей код микроразметки может отличаться:

Без использования сторонних сервисов (официальные кнопки соцсетей)

Но, при добавлении блоков «Поделиться» и «Мне нравится» через сторонние сервисы они обычно загружают не только необходимые для работы скрипты социальных сетей (например, ВКонтакте, Facebook, Twitter и т.д.), но и многие другие вещи, которые для их нормальной работы вообще не нужны. Например, эти сервисы могут добавлять код, который будет собирать информацию о ваших пользователей, выполнять их отслеживание и многое другое. Кроме этого, они также могут приводить к увеличению времени полной загрузки страниц сайта.

При желании можно обойтись без этих дополнительных посредников и подключить скрипты социальных сетей к себе на сайт напрямую. Инструкции как это сделать приведены в соответствующих разделах документации социальных сетей.

Например, для того чтобы создать кнопку ВКонтакте необходимо выполнить следующие действия согласно официальной документации:

Кроме кнопки «Поделиться» ВКонтакте предлагает ещё много других виджетов, которые вы также можете установить себе на сайт.

Получается, что официальные кнопки соцсетей тоже достаточно просто вставить на сайт. Но они также как и в случае со сторонними сервисами полагаются на JavaScript.

Если вас это не устраивает (вы не хотите иметь зависимость от внешнего кода), то тогда можно вообще отказаться от размещения сторонних JavaScript скриптов на своём сайте, и реализовать всё это дело через URL-адреса. Благо социальные сети это позволяют.

Социальные кнопки через URL-адреса прямого доступа

Этот способ настолько прост, насколько это возможно. Но о нём часто забывают. Он основном на простом создании ссылок.

Основные преимущества это способа:

Этот вариант делает сайт более независимым, быстрым и ответственным по отношению к конфиденциальности данных своих пользователей.

Однако этот способ кроме преимуществ, имеет также и некоторые ограничения. Например, используя его, вы не сможете уже так просто показать количество отметок «Нравиться» и «Поделиться» для текущей страницы. Если для вас это не является обязательным условием – то тогда нет причин не использовать этот вариант.

Каждая социальная сеть имеет свой собственный уникальный URL-адрес для публикаций. Необходимая для извлечения информация в этом случае передаётся в составе URL через GET-параметры. Подключать какие-то сторонние JavaScript скрипты при таком подходе не нужно.

URL-адреса прямого доступа для социальных сетей Twitter, Facebook, ВКонтакте, Telegram имеют следующий вид:

В зависимости от используемого языка или фреймворка кодирования URL может выполняться по-разному.

Например, в PHP его выполнить можно с помощью функции urlencode :

Следовательно, HTML код ссылок для публикации материала в социальных сетях будут выглядеть следующим образом:

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

Создание ссылок посредством JavaScript

Автоматическое формирование ссылок для публикации страниц сайта в соцсетях можно выполнить как на клиенте, так и на сервере.

На клиенте, т.е. с помощью JavaScript, это можно сделать так:

Место, в которое они будут помещены на странице в данном случае необходимо разметить посредством создания пустого элемента

Это решение показывает, что самостоятельно создать набор кнопок «Поделиться» без зависимостей довольно просто.

Для того чтобы вставить его себе на сайт, необходимо на каждую страницу добавить только вышеприведённый скрипт и элемент

Количество соцсетей в этом скрипте указывается в переменной shareData (в виде массива объектов):

В ключе « title » мы задаём название соцсети, а в « href » – её URL-адрес для публикаций.

Создание соцкнопок посредством JavaScript

Представленный выше вариант можно стилизовать, например, представив его в виде кнопок с иконками. А также ещё сделать так, чтобы при нажатии на них форма для публикации открывалась не в новой вкладке, а в popup окне. Чтобы провести эти изменения нам нужно будет создать стили и отредактировать JavaScript код.

Создание соцкнопок посредством PHP

Формировать блок кнопок «Поделиться» можно не только посредством изменения DOM (на клиенте), но и сразу на сервере.

Если вы хорошо знаете устройство своего бэкенда и имеете хотя бы минимальный опыт написания северных скриптов, то сгенерировать такой блок на сервере тоже будет довольно просто.

Источник

Кнопки социальных сетей, HTML 5, атрибут data и асинхронная загрузка javascript

Давно уже планировал установить на свой сайт кнопки социальных сетей. Наконец нашел время для этого, проблема усугублялась тем, что я сам не являюсь пользователем социальных сетей, хотя против ничего не имею.

Первым делом начал собирать информацию, ее довольно много, есть правда и устаревшая. Например, Twitter поменял уже ссылку, старая twitter.com/share, а новая twitter.com/intent/tweet, у Google ссылка «www.google.com/buzz/post», уже давно не работает, вместо нее plus.google.com/share. Конечно, это общеизвестные факты, но, похоже, все-таки не все об этом знают и предлагают «шарить» на старые ссылки.

Получил я коды кнопок, причем пришлось, немного повозится, что бы получит кнопки хотя бы одной высоты, я ведь их в блок решил объединить, а для этого лучше бы они были одного размера.

Вот такие коды кнопок. Что же мы видим? Vkontakte единственный из представленных кодов, не использует HTML 5. В данном случае на использование HTML 5 указывает атрибут data- в html тегах. Еще интересно, что у Twitter и Facebook очень похожие коды, видимо, подсматривают друг у друга. Еще у Twitter и Facebook не указан type=«text/javascript», что соответствует HTML5, атрибут type теперь не является обязательным. Значение по умолчанию JavaScript (ECMAScript). А Google продолжает указывать type=«text/javascript». Зато Google единственный кто использует асинхронную загрузку javascript, при помощи атрибута async, соответствующего спецификации HTML 5.

Об асинхронной загрузке скриптов стоит сказать немного больше. В Google молодцы, что используют асинхронную загрузку скрипта, а другие зря пренебрегают такой возможностью. Что же такое эта асинхронная загрузка, все просто, это указание браузеру загрузить скрипт, как только будет возможность его загрузить, а если пока нет возможности, браузер продолжит работать дальше.

Для чего это нужно? Например, Вы поставили на свой сайт кнопку «Твитнуть», а мы помним, что у них нет в коде атрибута async. И все бы хорошо, но у многих на работе закрыт доступ к социальным сетям и когда к Вам на сайт зайдет пользователь без доступа к Twittter его браузер не сможет загрузить скрипты с Твиттера, а т.к. загрузка синхронная браузер заметно «подвиснет», пока попытка загрузить скрипт не прекратится по таймауту.

Как это касается Вас? Не каждый пользователь будет ждать загрузки Вашего сайта, а если дождется в дальнейшем, может, не вернутся, зачем ему возвращаться на «тормозной» сайт. Делаем вывод, что в ряде случаев асинхронная загрузка скриптов — нужная вещь.

В связи с тем, что полученные кнопки я решил объединить в один блок, логично будет весь javascript код также объединить в один скрипт и добавить асинхронную загрузку. Кроме того, я пока не использую HTML 5 на своем сайте и для того, что бы код был валидным, все атрибуты HTML 5 нужно установить с помощью javascript.

С помощью javascript, атрибут data- устанавливается очень просто, например:

Как всегда не обошлось без нюансов. Работает во всех браузерах, кроме… Как Вы уже догадались, кроме IE до ie8, в ie9 уже работает. Но мы запишем по-другому, что бы работало во всех браузерах:

В конечном итоге вот, что у меня получилось:

2. Javascript код асинхронной загрузки скриптов для кнопок, вставляйте куда хотите, обычно или в head или в конец страницы. Кстати у Twitter и Facebook в коде есть защита от повторной загрузки скриптов, сделанная, на случай если код вставить в страницу несколько раз, не думаю, что мой код кто-то вставит несколько раз, но на всякий случай защиту от повторной загрузки скриптов я оставил:

Последний нюанс, Вам придется зарегистрировать свой сайт vkontakte, что бы получить apiId, можете оставить мой apiId, но только на Вашем сайте он работать не будет.

Источник

Как написать простую Социальную сеть

В моей социальной сети реализованы следующие возможности:

var addProfileUrl = svlaboratoryBaseUrl + «/admin/chatbot/addprofile»;
— добавление профиля в базу данных;

var loginProfileUrl = svlaboratoryBaseUrl + «/admin/chatbot/profilelogin»;
— авторизация пользователя;

var getFotosUrl = svlaboratoryBaseUrl + «/admin/chatbot/getfotos»;
— получение всех файлов анкеты пользователя (фото, видео, музыки);

var delFotoUrl = svlaboratoryBaseUrl + «/admin/chatbot/deletefoto»;
— удаление фото из анкеты;

var selectFotoUrl = svlaboratoryBaseUrl + «/admin/chatbot/selectfoto»;
— выбор фото для главного фото;

var searchProfilesUrl = svlaboratoryBaseUrl + «/admin/chatbot/searchprofiles»;
— поиск анкет по параметрам;

var instaProfilesUrl = svlaboratoryBaseUrl + «/admin/chatbot/instaprofiles»;
— поиск анкет по параметрам из списка всех новых фото пользователей;

var getAnketaUrl = svlaboratoryBaseUrl + «/admin/chatbot/getanketa»;
— получение данных о профиле пользователя;

var sendProfileMsgUrl = svlaboratoryBaseUrl + «/admin/chatbot/sendmsg»;
— отправка сообщения другому пользователю;

var getAllProfileMsgsUrl = svlaboratoryBaseUrl + «/admin/chatbot/getallmsgs»;
— получение списка сообщений;

var getProfilesMsgsUrl = svlaboratoryBaseUrl + «/admin/chatbot/getprofilesmsgs»;
— получение списка пользователей отправивших сообщения;

var updateProfileUrl = svlaboratoryBaseUrl + «/admin/chatbot/updateprofile»;
— обновление позиции пользователя в списке пользователей;

var visitProfilesUrl = svlaboratoryBaseUrl + «/admin/chatbot/getvisithistory»;
— получение списка пользователей, просматривавших анкету;

var getSmallavatarUrl = svlaboratoryBaseUrl + «:8080/file/chatbotmin/»;
— получение маленькой копии изображения;

var getImgUrl = svlaboratoryBaseUrl + «:8080/file/chatbotnorm/»;
— получение обычной копии изображения;

var getSmallavatarUrl2 = svlaboratoryBaseUrl + «/application/smallavatar?url=»;
— получение маленькой копии аватара;

var getLikeProfilesUrl = svlaboratoryBaseUrl + «/admin/chatbot/getlikeprofiles»;
— получение списка всех пользователей для игры в симпатии;

var likeProfileUrl = svlaboratoryBaseUrl + «/admin/chatbot/likeprofile»;
— осуществить плюс анкеты;

var getLikesUrl = svlaboratoryBaseUrl + «/admin/chatbot/getlikes»;
— получить список всех плюсов;

var getModerProfilesUrl = svlaboratoryBaseUrl + «/admin/chatbot/getmoderprofiles»;
— получение списка пользователей подлежащих проверки модератором;

var moderProfileUrl = svlaboratoryBaseUrl + «/admin/chatbot/moderprofile»;
— осуществление проверки модератором пользователя;

var getModerUrl = svlaboratoryBaseUrl + «/admin/chatbot/getmoder»;
— получение списка пользователей прошедших проверку модератором;

И список действий связанных с пользователями:

API был реализован как действия каркаса серверных приложений Zend Framework.

Результат запроса к API были JSON строки данных:

Клиент приложения был создан как единое приложение на Bootstrap и JQuery.

Все действия API вызывались с помощью процедуры AJAX.

Приведу немного образцов кода для осуществления CRUD на примере отправки сообщений:
Например, отправка сообщений реализована как функция sendProfileMsg на стороне клиента на языке JS:

И обработка запроса к серверу на языке PHP с использованием каркаса Zend Framework

Для сохранения данных в базу данных тут использовался класс Model

Другие методы типа delete или fetchRow, find, fetchAll
реализуются аналогично внедряя параметры в запросы MySQL.
Класс модели с реализацией основных действий с таблицами MySQL наследуется для каждой таблицы MySQL:

Для ввода параметров и создания форм использовался CSS каркаса Bootstrap.
Для динамического отображения приложения использовался JavaScript и JQuery.

В базе данных MySQL были созданы сущности:

user
— таблица пользователей и их параметров;

К примеру таблица user:

profile
— таблица анкет и их параметров;

chat
— таблица сообщений;

file
— таблица файлов;

foto
— таблица фото;

like
— таблица плюсов;

token
— таблица ключей авторизации;

moder
— таблица проверки анкет модератором;

userorder
— таблица действий пользователя;

Такие таблицы базы данных, действия серверного приложения и приложение клиента браузера легко написать более менее опытному программисту освоившему книги по
CSS, HTML, JS, PHP, SQL.

Личный плеер аудио загрузок и чаты были реализованы как отдельные приложения отображаемые во frame теге кода HTML приложения клиента браузера.

Также социальная сеть имеет доступ к отдельным приложениям и играм моего авторства во вкладке игры. Приложение социальной сети позволяет легко добавить свои игры заполнив форму описания игры. Основным полем этой формы является URL WEB адрес публикуемого приложения или игры. В результате приложение или игра будут показаны во frame теге HTML страницы приложения социальной сети.

Посмотреть готовое приложение социальной сети можно по ссылке:

Источник