Здесь фраза «Кто хочет купить софт со скидкой 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 есть самый лучший способ: зайти на их дебаггер
Ибо заново разъяснять написанное в ней я не буду, а ссылаться по ходу статьи на неё придется.
Итак, давайте приступим и начнем, пожалуй, с самого JavaScript. Работа скрипта касательно счётчика делится на две части:
- Счётчик необходимо добавлять к каждой кнопке из соцсетей при загрузке страницы;
- При событии клик по кнопкам изменять число поделившихся.
Для того чтобы реализовать первую часть логики скрипта, нам потребуется добавить метод init():
Init: function(element){ $(document).ready(function(){ $(element).each(function(idx){ var countApiUrls = { twitter: "https://urls.api.twitter.com/1/urls/count.json?callback=?&url=", vk: "https://vk.com/share.php?act=count&index=" + idx + "&url=", facebook: "https://graph.facebook.com/?callback=?&ids=" }; var pageUrl = $.parseJSON($(element + " div:eq(0)").attr("data-share-data")).url; if(pageUrl){ share.getCountLikes($(element).find(".twitter"), countApiUrls.twitter, pageUrl, "twitter"); share.getCountLikes($(element).find(".vk"), countApiUrls.vk, pageUrl, "vk"); share.getCountLikes($(element).find(".facebook"), countApiUrls.facebook, pageUrl, "facebook"); }; }); }); return false; }
GetCountLikes: function(box, apiUrl, pageUrl, type){ if(apiUrl && pageUrl){ if(type == "twitter"){ $.getJSON(apiUrl + pageUrl, function(data){ var num = data.count || 0; if(num > 0){ share.setCountLikes(box, num); }; }); }; if(type == "vk"){ $.getScript(apiUrl + pageUrl); if(!window.VK){ window.VK = {}; }; window.VK.Share = { count: function(idx, count){ var num = count || 0; if(num > 0){ share.setCountLikes(box, num); }; } }; }; if(type == "facebook"){ $.getJSON(apiUrl + pageUrl, function(data){ var num = data.shares || 0; if(num > 0){ share.setCountLikes(box, num); }; }); }; }; return false; }
Метод getCountLikes() принимает 4 параметра:
- box – обёртка для каждой из кнопок соцсети;
- apiUrl – адрес API на которой происходит обращение;
- pageUrl – адрес страницы, о которой мы хотим получить данные;
- type – тип социальной сети.
Мы при помощи jQuery метода $.getJSON() обращаемся на сформированный url = apiUrl + pageUrl. В зависимости от соцсети получаем ответ (в основном это json) и обрабатываем его. Исключением является «Вконтакте», так как при запросе мы получаем отработку метода VK.Share(), что вызывает у нас на странице естественную ошибку, так как у нас нет объекта VK, но при помощи «нехитрого» костыля мы вытягиваем нужный нам результат.
Последние, что нам останется – это отрисовать числа на кнопках. Эту задачу мы решаем при помощи нового метода setCountLikes(). Эта функция принимает два параметра: определитель обертки и само число.
SetCountLikes: function(box, num){ box.append("" + num + ""); return false; }
Popup: function(box, url){ var countBox = box.find(".count"); if(!countBox.length){ share.setCountLikes(box, 1); }else{ countBox.text(parseInt(countBox.text()) + 1); }; window.open(url, "", "toolbar=0, status=0, width=626, height=436"); return false; }
Мы добавили новый параметр box, ранее описанный, и внутри при помощи условного оператора if() увеличиваем счётчик, в зависимости от наличия числа ранее поделившихся. На этом сам скрипт завершён, конечно, нужно ещё обновить в методах twitter(), vk(), facebook() строчку:
Share.popup(url);
Share.popup($this, url);
Теперь, что касательно HTML разметки, выше мы рассмотрели метод init() и так как это точка входа/запуска скрипта, то её мы вызываем на странице после подключения файлов:
share.init(".share");
Ещё в кнопке стоит добавить span с классом icon:
Также несущественные изменения произошли и в CSS. Надеюсь, к прочтению этого абзаца вы уже скачали архив с примером, если нет, то скачивайте и пользуетесь - всё работает. Данное решение я сам использую в нескольких проектах и проблем не замечал.
От автора: приветствую вас. Сегодня социальные сети развились до такого уровня, что в них зарегистрировано в общей сложности более 3 млрд людей. Потенциально это очень мощная аудитория, поэтому сегодня я вам расскажу, как добавить кнопки социальных сетей на сайт.
Добавление на сайт на WordPressНачну с того, что самым простым способом, если у вас WordPress, является просто установить какой-нибудь плагин для этого дела. Какой? Я, например, пользовался Juiz Social Post Sharer. А вообще, просто введите в поиске плагинов слово social и просмотрите, что там есть. Преимущество тут только в том, что вам, вероятно, не придется ничего настраивать.
Яндекс тоже разработал страницу, на которой вы можете настроить и поставить себе кнопки. На этой страничке вы можете выбрать нужные сервисы (а их примерно 25). Справа вы можете выбрать внешний вид блока. Это могут быть счетчики, которые будут показывать, сколько раз на кнопки нажали пользователи. Это, в свою очередь, поможет вам отслеживать, полезен ли материал читателям.
JavaScript. Быстрый старт
Естественно, не нужно использовать все три варианта, лучше какой-то один. Хотя я видел сайты, где блок был и в начале, и в конце страницы.
Теперь вам нужно найти файл с кодом, который выводит статьи. В wordpress, например, он обычно называется single.php или подобным образом. Итак, если вам нужно поставить блок с кнопочками после статьи, ищем строчку the_content. Именно за ней можно вставить код. Вам очень поможет, если разработчик вашего шаблона делал комментарии в коде.
Редактировать файлы сайты можно некоторыми способами. Например, сделать это напрямую через админку движка (внешний вид — редактор). В этом случае код не подсвечивается, поэтому ориентировать в нем не так удобно. Другой способ – через ftp. Подключитесь к сайту с помощью ftp-клиента, перейдите в wp-content – themes. Тут нужно найти тот шаблон, который является активным у вас в данный момент. Заходим в него и находим тот самый single.php или ищем что-то похожее по названию.
В самом файле с кодом найдите строчку the_content с помощью поиска (Ctrl + F). Вставьте где-нибудь после нее этот код.
Комментарии это то, что на этом скриншоте выше выделяется зеленым цветом. Как видите, разработчик явно указал, что в этом месте выводиться сам текст статьи. Это отлично, просто вставьте код сразу после статьи и получите желаемый результат.
Кнопки от Pluso
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Вы можете выбрать стиль кнопок, настроить их фон, положение и размер. Также можно выбрать иконки со встроенным счетчиком. А еще одним преимуществом кнопок от Pluso является их потрясающий внешний вид и возможность встроить их в практически в любой дизайн.
Когда все настроено, просто копируем код и вставляем его в том месте, где хотим увидеть соответствующий блок.
Еще один вариант – Share42Если предыдущие варианты вам чем-то не понравились, есть другой способ, как поставить кнопки социальных сетей на сайт. Это сервис share42.com. Назван так, наверное, потому, что на момент создания в нем было 42 кнопки социальных сервисов, хотя на данный момент их 43.
Описывать процесс подробно не буду, потому что на сайте уже все оформлено в виде пошаговой инструкции. Дизайн этих иконок вы поменять не можете, а только размер. Впрочем, смотрятся они недурно.
Иконки, которые вам нужно, нужно выбрать, кликнув по ним мышкой. Отдельно хочу отметить наличие таких интересных возможностей, как добавление в избранное браузера, ссылка на rss и кнопка «Наверх».
Далее вы можете выбрать тип панели: горизонтальная или вертикальная? И если выбрана вторая, то количество кнопок можно ограничить. Кодировку я рекомендую оставить UTF-8. Вы можете также добавить иконку самого сервиса в комплект кнопок, чтобы пользователи с вашей странички могли перейти на него и установить себе тоже эти кнопки.
Также если вы планируете добавить иконку rss, то обязательно нужно указать адрес вашего фида, а если хотите показывать количество нажатий по кнопкам, должны быть отмечены две последние галочки.
Ниже есть 2 кнопки. Первая позволяет взглянуть, как будут выглядеть социальные кнопки, которые вы настроили. С помощью второй скачивается скрипт. Его нужно загрузить через ftp к себе на сайт в корневую папку.
Следующим шагом укажите на странице сервиса путь к этой папке. Зачастую достаточно заменить site.com на ваше доменное имя. Все, остается вставить код, выбрав перед этим cms, на которой работает ресурс. Куда вставлять код вы уже должны понимать, я надеюсь.
Я не сомневаюсь, что существует еще парочку нормальных сервисов, где можно сделать социальные кнопки, а также есть просто масса скриптов и плагинов, которые их добавляют. Сегодня я перечислил вам наиболее лучшие, на мой взгляд, варианты.
Что ж, сегодня мы с вами научились добавлять кнопки социальных сетей и сервисов в свой интернет-проект. Теперь ваши полезные материалы могут быть автоматически распространены по социальным сетям вашими благодарными читателями. А у меня на этом все.
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Здесь фраза «Кто хочет купить софт со скидкой 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 есть самый лучший способ: зайти на их дебаггер
Если вы боитесь, что за вами наблюдают в интернете — выключите компьютер.
К аждый вебмастер, рано или поздно, задумывается над установкой социальных кнопок на свой сайт. Ведь сейчас без социальных сетей некоторые люди не представляют своей жизни, зачем обделять их возможности в шаринге ваших статей? Но со временем многие сервисы социальных кнопок теряют рассудок и творят что хотят со своими кодами, запихивая туда всё что не нужно. Именно по этой параноидальной идеи в этой статье вы найдете коды самых чистых кнопок шаринга социальных сетей для вашего сайта.Ни для кого не секрет, что почти все сервисы соц.кнопок сливают инфу о ваших пользователях куда понадобится. О Боже! Не может быть! Я только что про это узнал! — Поздравляю! Им же нужно как-то пользоваться вами, за их труд и за старания. Они сделали хорошие сервисы, с большим функционалом, удобством и «качеством». Вам стоит только выбрать что нужно, и поставить код куда надо. И все. А какая им выгода задаром делать такие маневрирования в интернете? Правильно. Никакой. Вот и время от времени каждая такая контора и палится на сливе данных в какую-нибудь DMP.
Я не буду описывать каждый из таких сервисов, все они имеют хороший функционал, некоторые уникальные фишки, но представлять их по отдельности — не имею желания. Составил небольшой список ниже.
Список самых популярных сервисов социальных кнопок для сайта- share.pluso.ru
- uptolike.ru
- tech.yandex.ru/share
- share42.com
- sharethis.com
- pip.qip.ru
- www.addtoany.com
- www.po.st
- www.addthis.com
- sharebuttons.com
Если у вас не хватает времени, или вам лень делать больше чем пару движений кистей рук и фаланг пальцев, то вы смело можете пользоваться этими сервисами. Они великолепно подходят для сайтов, также как и для посетителей. Но 100% безопасность данных пользователей, 100% работы их DNS и загрузки ваших сайтов не гарантирует никто. Т.е. если произошел сбой на серверах соц.кнопок, то ваши сайты будут загружаться медленнее, чем обычно. Да это бывает редко, но бывает. Вы конечно же можете поставить асинхронную загрузку этих скриптов, оптимизировать их работу, но это уже больше чем пару движений, о которых я писал для ленивых.
Конечно в интернете есть коды соцок, которые ставятся внутри вашего сайта и никуда информацию не сливают, но многие из них содержат внешние ссылки на эти же социальные сети. Вебмастера не любят внешних ссылок и по этому, для самых параноидальных вебмастеров я собрал готовые коды на базе скрипта goodshare.ru, за что им собственно и спасибо.
Пример установки этого кода не для тех, кто не знает азы HTML или CSS, но если у вас есть руки и немного времени, у вас все получится, если будете идти строго по инструкции. И так поехали:
Выглядят они так:
По стандарту настроены шесть социальных сетей: Facebook, ВКонтакте, Одноклассники, Мой Мир, Google Plus, Twitter. В настройках скрипта их больше 30, но это все устанавливается отдельно по желанию. Плюсы этих кнопок, как заявляют авторы, с чем я полностью согласен:
Что делает сам скрипт, и вообще зачем нужно было делать этот скрипт? В скрипте этих кнопок написаны все API всех соц сетей, и скрипт делает любое место на сайте активным блоком шаринга.
Например, вы можете его поставить на пустые DIV блоки, или Span, или картинки, или пустые ссылки, да практически любой элемент сайта можно превратить в эти кнопки. В моем примере я использовал скрипт на пустые Div.
По поводу картинок: их тут нет. Иконки которые вы видите взяты из шрифта, это просто символ и не более.
Скачать архив кнопок вы можете по .Установка этих кнопок очень проста. В архиве есть всего четыре файла: Шрифт, CSS, JS, и TXT.
1). Шрифт вам нужно загрузить в любую папку на вашем сервере, можете закинуть ее туда-же, где лежат ваши JS или CSS.
2). Затем загрузите JS на ваш сервер, и выведите его на вашем сайте с помощью кода в любом месте, но я рекомендую в самом низу страницы:
Этот скрипт состоит из двух частей, первая — это Jquery, вторая — сам код кнопок. Если у вас уже подключается Jquery на сайте, то вы можете удалить первую часть кода и сократить тем самым размер файла.
ВАЖНО : (для тех, кто убрал часть код Jquery) скрипт кнопок должен загружаться после скрипта Jquery.
3). После установки JS и шрифта, вам следует добавить CSS себе на сайт. Просто скопируйте все содержимое файла soc.css в один из ваших подключаемых CSS на сайте.
ВАЖНО : В 82 строке файла soc.css поменяйте URL на свое местоположение Шрифта!
4). После всего этого, скопируйте HTML код из файла HTML.TXT к себе на сайт, где вы хотите видеть эти замечательные кнопки.
В структуре скрипта есть возможность установки счетчиков шаринга соц.сетей, но более подробнее вы можете почитать у них в документации на сайте.
А саму работу скрипта вы можете проверить чуть-ниже этих строк, ведь именно он установлен у меня на блоге.
Спасибо за внимание, если будут вопросы по установке, пиши комментарии.
С вами был, ленивый Staurus.
