Кнопки мы в соцсетях присоединяйтесь. Кнопки социальных сетей Share Pluso
Здесь фраза «Кто хочет купить софт со скидкой 8% по акции?» написана самим пользователем, а ниже - то, как ссылка на сайт выглядит в соц.сети. Не сильно красиво, правда?
тогда ссылка в соц.сети будет выглядеть так:
Здесь «Сегодня день Рождения allsoft.ru - 8 лет:)» - текст написанный пользователем, остальное - информация из мета-тегов. Подробнее об этих мета-тегах можно прочитать на странице Facebook developers.facebook.com/docs/share , остальные соц.сети тоже их вполне понимают.
Как вообще работает этот механизм:
1. Когда пользователь нажимает кнопку, виджет передает серверу соц.сети ссылку на страницу.
2. Сервер соц. сети сам обращается по этой ссылке и считывает информацию о странице - заголовок, описание, картинку.
3. Сервер соц. сети кеширует на своей стороне информацию о странице и отображает на страницах соц.сети
Как передавать разные описания для одной страницы.
Например, при создании промо-страницы на allsoft.ru с шуточным тестом потребовалось для разного количества баллов, набранных пользователем в тесте, передать в соц.сети разные описания. Так как описание страницы соц.сеть получает заходя по ссылке, то для разных описаний нужны разные ссылки. Кроме того, Twitter позволяет вставлять только 140 символов, поэтому для него нужно отдельное, более короткое, описание.
New Ya.share({
element: "ya_share_normal",
elementStyle: {
"type": "none",
"quickServices": ["facebook","twitter","odnoklassniki","vkontakte","moimir"]
},
link: "http://allsoft.ru/promo/allsoft8let/?share=normal",
serviceSpecific: {
twitter: {
title: "Результат теста: Дракон почти Ваш «конек»! Вы пока не можете преподавать Драконоведение, но на верном пути!"
}
}
});
1. Здесь ya_share_normal - id элемента на странице (), в котором будет появляться блок с социальными кнопками, link - ссылка, плюс в serviceSpecific для твиттера указываем title, отличающийся от того, что находится в мета-теге og:title.
Таким образом, для задачи «3 разных результата теста плюс общая ссылка на страницу вне теста» у нас будет 4 тега:
и 4 блока кода в JavaScript, как указано выше.
Как изменить закешированный соц.сетью заголовок и описание.
1. Для Facebook есть самый лучший способ: зайти на их дебаггер
Обзор отечественных конструкторов и скриптов кнопок социальных сетей для сайтов, а также зарубежных аналогов. Коротко, понятно и наглядно.
Конструкторы кнопок социальных сетей для сайта
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 код на сайт
После того, как все нужные группы и страницы в соцсетях вы создали, а значит получили все необходимые ссылки, можно озадачиваться добавлением кнопок на сайт. Можно, конечно же, в соответствии с моим постом про , подобрать для каждой соцсети подходящую иконку и при необходимости уменьшить ее размер до необходимого в и .
Но это не есть лучший вариант. Почему? Ну, потому что для подгрузки каждой картинки соцсети будет осуществляться отдельный запрос к вашему серверу. Будет у вас десяток иконок — значит десять запросов, которые по-любому будут создавать дополнительную нагрузку на сервер и . Нам такое расточительство не подходит, тем более, что уже давно .
Я решил не изобретать велосипед (создавать спрайт), а использовал тот, что создает конструктор Шаре42 (ссылка на описание работы с ним приведена чуть выше). В нем можно выбрать те соцсети, иконки которых вам будут нужны, и вместе с кодом вы получите CSS спрайт, т.е. физически один графический файл, на котором будут размещены все нужные вам иконки соцсетей и подписки на RSS ленту (и Емайл, если потребуется).
Я выбрал четыре основных сети и пару иконок для подписки на новости с размером иконок 24 на 24 , поэтому мой спрайт выглядит так ( , правда, туда еще затесался, но это не беда):
Теперь у нас есть все ингредиенты — ссылки на группы или страницы соцсетей и иконки для их отображения на сайте. Осталось все это только правильно приготовить, т.е. сверстать. Мой блог работает на WordPress, поэтому код с кнопками я буду вставлять в один из . В моем случае он называется sidebar.php. Html код при этом получается крайне простой:
Ну, и самое интересное. С помощью мы определяем, какая именно область нашего спрайта будет отображаться на данном конкретном месте в виде фона (в нашем случае этот фон подкладывается под гиперссылку). Объяснять как так получается очень долго, поэтому читайте приведенную по ссылке статью и все станет понятно (там и наглядные примеры приводятся). Если лень, то просто поэкспериментируйте с циферками, которые, как вы могли заметить, не даром кратны 24.
Да, файл спрайта залейте по ФТП на свой сайт и укажите в background до него путь (). Вот и все. Если не получится, что читайте внимательнее материалы по приведенным выше ссылкам, ну, а если совсем уже ничего не получится, то описывайте вашу ситуацию в комментариях (подробненько — для вставки кода на забудьте его в теги PHP заключить с квадратными скобками).
Удачи вам! До скорых встреч на страницах блога сайт
посмотреть еще ролики можно перейдя на");">
Вам может быть интересно
Блочная верстка - Создаем двухколоночный, трехколоночный и резиновый макеты для сайта
В последнее время стало модно устанавливать кнопки социальных сетей на сайты и блоги, и в этом нет ничего удивительного. Во-первых, кнопки позволяют увеличивать «лайки» и «сердечки», что положительно сказывается на продвижении статей в социалках. Во-вторых, существуют отдельные разновидности кнопок, позволяющих делиться ссылками на отдельные страницы сайта в социальных сетях – это привлекает дополнительных посетителей из Вконтакте, Фейсбука, Одноклассников, Твиттера и т.д. В-третьих, статьи, набравшие большое количество «лайков» и «сердечек», пользуются большим доверием у читателей сайта.
Поэтому очень важно знать, как установить кнопки социальных сетей на сайт, чтобы помочь развиваться веб-ресурсу. Будут рассмотрены самые популярные социальные сети
- Вконтакте
- Фейсбук
- Одноклассники
- Гугл «+1»
- Твиттер
- Мой Мир
Здесь будет рассмотрена установка стандартных кнопок, предлагаемых самими социальными сетями. Каждую кнопку в этом случае придется устанавливать отдельно от других, это занимает некоторое время, но и смотрится очень неплохо.
1.1. Вконтакте
1.1.1 Кнопка «сохранить»
Кнопка достаточно гибкая, надпись на ней можно менять на любую желаемую (по умолчанию «сохранить»).
Сначала вам нужно перейти на страницу с , там же вы получите код скрипта, который нужно будет установить на свой сайт, чтобы кнопка отображалась.
Здесь можно выбирать один из 5 стилей : кнопка, кнопка без счетчика, ссылка, ссылка без иконки, иконка.
Поле «текст » позволяет изменять стандартную надпись «сохранить» на свою.
В качестве url-адреса можно выбирать адрес страницы с кнопкой или же адрес другой страницы (на ваш выбор). В первом случае кнопка будет делиться ссылкой на ту страницу, где расположена сама кнопка. Во втором случае кнопка будет делиться указанной вами ссылкой, независимо от того, где она сама находится.
Код для вставки состоит из двух частей: первая должна располагаться в любом месте между тегами
и , вторая – в том месте, где должна отображаться кнопка. Об установке кнопки на сайт читайте в пункте .1.1.2 Кнопка «мне нравится»
Второй вариант кнопки – виджет «Мне нравится ». Его будет проще установить на сайт, т.к. в конце вы получите всего одну часть кода, которую нужно будет разместить в нужном месте сайта.
Для настройки кнопки перейдите по этой ссылке . Здесь также необходимо заполнить ряд параметров.
Название сайта
– здесь лучше указать краткое и настоящее название вашего сайта.
Адрес сайта – укажите адрес главной страницы вашего сайта.
Основной домен сайта – укажите главное зеркало сайта (его можно найти в в качестве параметра оператора «Host»), если затрудняетесь это сделать – то оставьте предлагаемое ВКОНТАКТЕ.
Варианты кнопки – это различные стили кнопки, они влияют на ее внешний вид.
Высота кнопки – геометрические размеры «Мне нравится».
Название кнопки – доступно два варианта (мне нравится, это интересно).
Код для вставки – тот код, который нужен для отображения кнопки социальной сети Вконтакте.
1.2 Фейсбук
Настраивается кнопка на этой странице . Могут возникнуть трудности, т.к. комментарии к форме написаны на английском языке, но ниже вы можете прочитать краткое описание каждого поля.
URL
to
Like
– url-адрес страницы для кнопки (если поле не заполнено, то будет браться адрес страницы, на которой расположена кнопка).
Send Button – наличие галочки включает новую возможность – отправлять ссылку в Фейсбук (отобразится дополнительная кнопка – «отправить»). При включении будет одновременно отображаться две кнопки.
Layout Style – стиль кнопки, влияет на ее внешний вид (стандартным считается button_ count ).
Width – ширина кнопки в пикселях.
Show Faces – при включении будут показываться аватары людей, уже нажавших на данную кнопку.
Font – тип шрифта кнопки.
Color Scheme – фон пространства рядом с кнопкой (белый и черный).
Verb to display – название кнопки (нравится, я рекомендую).
Get Code – кнопка, формирующая код скрипта.
1.3 Одноклассники и Мой мир
Данные социальные сеть приобрели широкую популярность в русскоязычном интернете, там обитает огромное число людей, поэтому не стоит пренебрегать установкой кнопки «Класс» от сервиса «Одноклассники» и «Нравится» от сайта «Мой мир».
Для настройки кнопок нужно перейти на . Можно добавлять кнопки по отдельности, настраивая каждую по-своему, а можно редактировать обе кнопки одновременно.
Размер по высоте – геометрический размер кнопок.
Вид – внешний вид рамки кнопок.
– выбор кнопок (нравится, класс)
Счетчик – включение и выключения счетчика нажатий на кнопки (справа, сверху – расположение счетчика).
Текст на кнопках – выбор одного из трех названий, доступных для кнопок.
Код для вставки – код скрипта, который нужно будет устанавливать на сайт.
1.4 Гугл «+ 1»
Новая социальная сеть, которая за короткое время набрала огромную аудиторию. Трудно представить себе сайт без кнопки «+1», т.к. она не только позволяет добавлять ссылки в социальную сеть и увеличивать количество «плюсиков», но и может влиять на результаты сайта в ТОПе поисковой системы Google.
Все подробности об этом, а также установка и настройка кнопки находятся .
1.5 Твиттер
Популярнейший сервис коротких сообщений оставлять без внимания нельзя. Установите себе кнопку от данной социальной сети и увидите, как быстро люди станут делиться ссылками на ваш сайт в Твиттере. Настроить кнопку можно на этой .
Сначала нужно выбрать нужную кнопку (нас интересует первый вариант – кнопка «отправить ссылку»).
После этого на странице появится форма с несколькими полями, которые нужно заполнить.
Отправить ссылку
– выбор страницы, на которой расположена кнопка, или любой другой.
Текст – выбор текста, который будет появляться рядом с кнопкой (НЕ НА САМОЙ КНОПКЕ).
Показывать счетчик – включить или выключить отсчет количества нажатий на кнопку.
С помощью – выбор способа добавления сообщения ссылки в Твиттер (практически ни на что не влияет).
Отметить – выбор метки, которая будет публиковаться в Твиттере (практически ни на что не влияет).
Большая кнопка – увеличение геометрического размера кнопки.
Отказаться от адаптации Твиттера – отказ от стилей Твиттера (лучше оставить поле без галочки).
Язык – выбор языка кнопки.
Справа будет сформирован код, который нужно добавить на сайт.
1.6 Я.ру
Для этого нужно заполнить несколько полей, которые сформируют нужный код скрипта.
Размер
– маленький или большой размер кнопки.
Стиль – выбор между кнопкой или иконкой.
Наличие счетчика – включение или выключение счетчика нажатий на кнопку.
Внешний вид кнопки – пример того, как будет выглядеть кнопка.
Заголовок – выбор заголовка для страницы (произвольный или заголовок текущей страницы).
Код для вставки – нужный код, который добавляется на сайт.
2. Готовые кнопки для сайта
Но если желания добавлять код каждой кнопки на свой сайт не имеется, то можно воспользоваться стандартными скриптами, которые формируют сразу группу кнопок социальных сетей. В этом случае достаточно просто добавить один код такого скрипта на свой сайт, и у вас сразу будут установлены кнопки самых популярных социальных сетей.
Для настройки блока и выбора нужных социальных сетей перейдите по этой ссылке . На скрине ниже видно, что можно выбирать кнопки нужных социальных сетей из предлагаемых, а также слегка редактировать внешний вид блока.
Набор сервисов
– выбор кнопок социальных сетей для сайта (те, что с галочкой – будут отображаться на сайте).
Код – нужный скрипт, который необходимо добавить на сайт.
2.2 Кнопки «PLUSO»
В последнее время широкую популярность приобрел конструктор кнопок социальных сетей – PLUSO. Перейти на сайт можно по этой ссылке .
Конструктор достаточно гибкий, имеет множество настроек, благодаря чему вы сможете сформировать кнопки социальных сетей такими, какие бы отлично вписывались в дизайн сайта.
Сначала нужно выбрать стиль кнопок и счетчиков из нескольких предлагаемых (горизонтальные, вертикальные, цветные, бесцветные и т.д.).
Затем необходимо настроить ряд параметров, выбрав
- расположение блока (вертикальный, горизонтальный);
- цвет кнопок (яркие, темные);
- величину блока (крупный, маленький);
- счетчик (наличие или отсутствие);
- фон (бесцветный или цветной);
Код будет сформирован согласно указанным вами параметрам, после чего его нужно вставить на сайт.
S hare42
Еще один сервис, позволяющий сконструировать кнопки для своего сайта – Share42.com/ru .
Этот генератор позволяет настраивать размер кнопок, определять нужные социальные сети из огромного числа доступных, а также редактировать внешний вид иконок.
Выберите размер кнопок и нужные социальные сети, а затем перейдите к настройке дополнительных опций.
Тип панели с иконками – отображение блока кнопок (очень интересен вариант «вертикальная плавающая»).
Ограничить видимое кол-во иконок – выбор числа отображаемых кнопок (другие будут скрыты за ссылкой).
Кодировка сайта – выбор кодировки вашего сайта.
Добавить иконку сайта Share42.com – возможно, следует убрать галочку.
Показывать счетчики – включение счетчика нажатий по кнопкам (только при работающем jQuery).
Установка данного скрипта довольно сложная, но она пошагово описывается на самом сайте Share42.
3. Как устанавливать кнопки на сайт
Если код, который требуется разместить на сайте, состоит из двух частей (как в случае с кнопкой Вконтакте), то каждая из частей устанавливается отдельно. Если код не делится на две части, то данный шаг можно пропустить.
Первую часть кода нужно добавить между тегами
и . Для этого зайдите в админ-панель WordPress и перейдите к редактору шаблона.
В редакторе шаблона нужно найти файл «Заголовок» (header.
php)
, если такого нет, тогда – «Основной шаблон» (index.php)
. Теперь необходимо найти тег
Как только вы найдете нужные теги, можете размещать первую часть кода сразу перед закрывающимся тегом head> , чтобы случайно не задеть коды других скриптов.
Вторая часть кода помещается там, где вы хотите видеть кнопки социальных сетей, подобранные для сайта. Если код состоит всего из одной части, то достаточно проделать только эту операцию.
Чаще всего кнопки добавляются перед статьей или в ее конце. Проще, конечно, второй вариант. Его мы и рассмотрим.
Вам нужно найти то место, где заканчивается статья (основная текстовая часть страницы). Для этого нужно редактировать файл «Одна запись» (single. php) .
Теперь нужно найти тот оператор, который отвечает за вывод основного содержимого статьи. В моем случае это «the_content», сразу после него и размещается код кнопок.
Аналогично можно размещать код вначале статьи, нужно только найти место между заголовком и текстом статьи.
В последнее время каждый второй (если не первый) заказчик в требованиях по разработке сайта просит непременно связать его с социальными сетями. «Социальные» кнопки на сайте — средство номер 1 для привлечения целевой аудитории, распространения контента и пиара в целом. Причем совершенно бесплатное!
Социальные сети предоставляют коды своих кнопок и виджетов для размещения на сайте, и прилагают инструкции по их установке в системе управления сайтом. Установить их позволяют любые CMS (операционные системы), главное гармонично вписать их в дизайн вашего сайта.
Каковы возможности и функции?
Если ваш сайт ориентирован на людей которые общаются популярных соц. сетях, например, Вконтакте, Twitter, Instagramm, Facebook, Google+, Pinterest и прочее, и вы хотите охватить их все, то чтобы не устанавливать кнопки каждой из них по отдельности, учитывая то, что они могут отличаться по размерам и дизайну, советуем воспользоваться сервисами-агрегаторами. Это простые и удобные инструменты, которые позволят посетителям сайта быстро делиться информацией со своими друзьями вне зависимости какой социальной сетью они пользуются. Ниже мы разберем наиболее популярные сервисы.
Кнопки социальных сетей Share Pluso
