|
Но многих сайтах сейчас появились кнопки добавления в социальные закладки. Зачем это нужно, и что это дает владельцу сайта? Для ответа на этот вопрос прежде всего разберемся, что такое социальные закладки, а потом рассмотрим как добавить соответствующий сервис на Ваш сайт.
Социальные закладки
Большая часть работы в Интернете сопряжена с поиском нужной информации. И часто бывает необходимо сохранить адрес страницы, которую Вы нашли. Как один из вариантов, можно запомнить адрес нужной страницы прямо в закладках Интернет браузера. Однако такой способ имеет несколько недостатков: во-первых, закладки на страницы будут доступны только на том компьютере, где вы их сохранили, во-вторых, обычно после переустановки системы все закладки теряются.
В результате в Интернете появилось множество сервисов социальных закладок, когда вы может запоминать ссылки на нужные Вам страницы не у себя на компьютере, а на некотором сайте в Интернете. Подобный подход позволяет получать доступ к Вашим закладкам с любого компьютера, а также делиться закладками с Вашими друзьями. Появление социальных сетей сделал сервис социальных закладок популярным и востребованным. Поэтому ним пользуется все больше и больше пользователей.
Понятно, что социальные закладки можно использовать для продвижения своего сайта и привлечения на него новых посетителей.
Кнопки социальных закладок
Разработчики многих Интернет ресурсов располагают на своих страницах кнопки социальных закладок, которые позволяют посетителям сайтов легко добавлять требуемую страницу в социальные закладки. Ведь если, чтобы добавить заинтересовавшую страницу достаточного одного клика мыши, можно не полениться и сделать это. Чем более простая процедура добавления в социальные закладки, тем более охотно ее будут делать Ваши посетители. Возможно, кто-то воспользуется сохраненной ссылкой, чтобы вернуться на Ваш сайт снова.
Существует достаточно много сервисов социальных закладок, и каждый посетитель сайт может предпочитать конкретный сервис закладок. Желательно, чтобы Ваш плагин социальных закладок поддерживал все из них, ну или хотя бы большую часть.
Шаг первый
Для того, чтобы список социальных закладок имел определенный вид, разместим у Вас на страницы стили, которые мы будем использовать для отображения списка доступных для регистрации социальных закладок. По сути это пример стилей, которые используются для отображения кнопок социальных закладок на этом сайте. Вполне возможно вы захотите внести изменения в эти стили, чтобы дизайн кнопок наилучшим образом подходил к Вашему сайту. Но вначале вы может воспользоваться этими стилями.
 Определение стилей
|
|---|
<head>
<style type="text/css">
.tb_bookmarks img { vertical-align: middle; }
.tb_bookmarks span { vertical-align: middle; }
.tb_bookmarks a { text-decoration: none; }
.tb_bookmarks .add {
margin-top: 3px;
border: 1px solid #DCDCDC;
padding: 0px;
border-collapse: collapse;
background-color: #FFFFFF;
}
.tb_bookmarks .add th {
text-align: left;
border: 1px solid #DCDCDC;
padding: 3px;
background-color: #FEEEC2;
}
.tb_bookmarks .footnote {
text-align: right;
font-size: xx-small;
padding: 1px 6px 1px 1px;
background-color: #FEEEC2;
}
</style>
</head>
|
Скопируйте себе определение стилей в заголовок Вашего документа, который расположен между тегами
<head> и </head>.
Шаг второй
Понятно, что все попытаться расположить на странице все кнопки сразу, они займут непозволительно много место. К счастью не все кнопки используются одинаково часто. Поэтому разместим на странице только наиболее часто используемые кнопки социальных закладок, а все остальные спрячем в невидимое окно, которое будет открываться только по запросу пользователя. Для этого необходимо добавить на страницу следующий программный код:
Скрипт социальных закладок |
|---|
|
<script type="text/javascript">
//<![CDATA[
var bmUrl = encodeURIComponent(location.href);
var bmTitle = encodeURIComponent(window.document.title);
var My_ClickTimeout = 0, My_PopUp = 0;
DeleteOn = new Image();
DeleteOn.src =
"/images/DeleteOn.gif";
function getWindowRect() {
var de =
document.documentElement,
db = document.body;
return {
"left": window.pageXOffset || (db &&
db.scrollLeft) || (de && de.scrollLeft),
"top": window.pageYOffset
|| (db && db.scrollTop)
|| (de && de.scrollTop),
"width": window.innerWidth || (de &&
de.clientWidth) ||
document.body.clientWidth,
"height": window.innerHeight || (de &&
de.clientHeight) ||
document.body.clientHeight
}
}
function getElementRect(elem) {
var l = 0,
t = 0, w = elem.offsetWidth,
h = elem.offsetHeight;
while
(elem) {
l += elem.offsetLeft;
t += elem.offsetTop;
elem = elem.offsetParent;
}
return {
"left": l, "top":
t, "width": w,
"height": h };
}
function setBookmarksPos(parent, target) {
target.style.top = '0';
target.style.left = '0';
var p = getElementRect(parent),
p1 = getElementRect(target),
s = getWindowRect(), h;
if (p.top + p.height + target.offsetHeight + 3 <
s.top + s.height)
h = p.top + p.height + 3; else
if (p.top - target.offsetHeight - 6 > s.top ||
(p.top - target.offsetHeight - 6 >= 0 &&
s.top - p.top + target.offsetHeight
+ 6 < p.top + p.height +
target.offsetHeight + 3 - s.top - s.height))
h = p.top - target.offsetHeight - 6; else
h = p.top + p.height + 3;
target.style.top = (h - p1.top) + 'px';
target.style.left = (p.left - p1.left) - 3 + 'px';
}
function My_BookmarkOpen(This) {
if
(My_ClickTimeout)
clearTimeout(My_ClickTimeout);
if
(My_PopUp && My_PopUp !=
This.nextSibling)
My_PopUp.style.display = "none";
My_PopUp = This.nextSibling;
My_PopUp.style.display =
"";
setBookmarksPos(This, My_PopUp);
}
function My_BookmarClose() {
My_ClickTimeout = setTimeout(
"My_PopUp.style.display=" +
"'none';My_PopUp=0;" +
"My_ClickTimeout=0",
300);
}
function __add_favourite(a, u, t)
{
try {
window.external.AddFavorite(u, t);
}
catch (e)
{
try {
window.sidebar.addPanel(t, u, "");
}
catch (e) {
if (typeof
(opera) == "object")
{
a.rel = "sidebar";
a.title = t;
a.url = u;
return true;
} else {
alert('Нажмите Ctrl-D чтобы' +
'добавить
страницу в' +
'закладки');
}
}
}
return
false;
}
//]]>
</script>
|
|  |
Шаг третий
В том месте вашей страницы, где вы хотите, чтобы располагались кнопки добавления в социальные закладки, необходимо вставить следующий код таблицы.
Таблица с кнопками |
|---|
<table class="tb_bookmarks"
border="0"><tr>
<td><a
href=""
onmouseover="javascript:My_BookmarkOpen(this);"
onmouseout="javascript:My_BookmarClose();"
onclick="javascript:return
false;"><img
title="Дополнительные
социальные
закладки" src="/images/Bookmarks/Add.png"
alt="Дополнительные
социальные
закладки" style="border-width:0px;"
/><span> Ещё? | </span></a><table class="add" onmouseover="javascript:if(My_ClickTimeout)clearTimeout(My_ClickTimeout);"
onmouseout="javascript:My_BookmarClose();"
border="0"
style="width:0px;position: absolute;
display: none;
z-index: 10;
overflow: hidden;">
<tr><th><table
cellspacing="0"
cellpadding="0"
border="0"
style="border-collapse:collapse;"><tr><td>Добавить в закладки и поделиться </td><td align="right"><a href="" onclick="My_PopUp.style.display='none';My_PopUp=0;return
false;"><img
title="Закрыть
окно
дополнительных
социальных
закладок" onmouseover="javascript:this.src="/images/DeleteOn.gif""
onmouseout="javascript:this.src="/images/Delete.gif""
src="/images/Delete.gif"
alt="Закрыть
окно
социальных
закладок" style="border-width:0px;"
/></a></td></tr></table></th>
</tr><tr><td><table
border="0"
style="width: 100%;">
<tr><td
style="width: 50%;"><a title="Добавить в Избранное" href=""
onclick="return
__add_favourite(this,bmUrl,bmTitle);"><img
src="/images/Bookmarks/Favourite.png"
alt="Избранное" style="border-width:0px;"
/><span> Избранное </span></a></td><td style="width: 50%;"><a title="ВКонтакте" href=""
onclick="javascript:window.open('http://vkontakte.ru/share.php?url='+bmUrl,'Bookmarks');
return false;"><img
title="ВКонтакте" src="/images/Bookmarks/Vkontakte.png"
alt="ВКонтакте" style="border-width:0px;"
/><span> ВКонтакте</span></a></td></tr>
<tr><td
style="width: 50%;"><a title="Одноклассники.ru" href="" onclick="javascript:window.open('http://www.odnoklassniki.ru/dk?st.cmd=addShare&st.s=0&st._surl='+bmUrl,'Bookmarks');
return false;"><img
title="Одноклассники.ru" src="/images/Bookmarks/Odnoklassniki.png"
alt="Одноклассники.ru" style="border-width:0px;" /><span> Одноклассники</span></a></td><td style="width: 50%;"><a title="Facebook" href="" onclick="javascript:window.open('http://www.facebook.com/sharer.php?u='+bmUrl,'Bookmarks');
return false;"><img
title="Facebook"
src="/images/Bookmarks/Facebook.png"
alt="Facebook"
style="border-width:0px;"
/><span> Facebook</span></a></td></tr>
<tr><td
style="width: 50%;"><a title="Twitter" href="" onclick="javascript:window.open('http://twitter.com/home?status='+bmTitle+'
- '+bmUrl,'Bookmarks'); return false;"><img title="Twitter" src="/images/Bookmarks/Twitter.png"
alt="Twitter"
style="border-width:0px;"
/><span> Twitter</span></a></td><td
style="width: 50%;"><a title="Google" href="" onclick="javascript:window.open('https://www.google.com/bookmarks/mark?op=add&bkmk='+bmUrl+'&title='+bmTitle,'Bookmarks');
return false;"><img
title="Google"
src="/images/Bookmarks/Google.png"
alt="Google"
style="border-width:0px;"
/><span> Google</span></a></td></tr>
<tr><td
style="width: 50%;"><a title="Liveinternet" href="" onclick="javascript:window.open('http://www.liveinternet.ru/journal_post.php?action=n_add&cnurl='+bmUrl+'&cntitle='+bmTitle,'Bookmarks');
return false;"><img
title="Liveinternet"
src="/images/Bookmarks/Li.png"
alt="Liveinternet"
style="border-width:0px;"
/><span> Liveinternet</span></a></td><td
style="width: 50%;"><a title="FriendFeed" href="" onclick="javascript:window.open('http://www.friendfeed.com/share?title='+bmTitle+'
| '+bmUrl,'Bookmarks'); return false;"><img title="FriendFeed" src="/images/Bookmarks/Friendfeed.png"
alt="FriendFeed"
style="border-width:0px;" /><span> FriendFeed</span></a></td></tr>
<tr><td
style="width: 50%;"><a title="LiveJournal" href="" onclick="javascript:window.open('http://www.livejournal.com/update.bml?event='+bmUrl+'&subject='+bmTitle,'Bookmarks');
return false;"><img
title="LiveJournal"
src="/images/Bookmarks/Livejournal.png"
alt="LiveJournal"
style="border-width:0px;"
/><span> LiveJournal</span></a></td><td
style="width: 50%;"><a title="Яндекс"
href=""
onclick="javascript:window.open('http://my.ya.ru/posts_add_link.xml?URL='+bmUrl+'&title='+bmTitle,'Bookmarks');
return false;"><img
title="Яндекс" src="/images/Bookmarks/Yandex.png"
alt="Яндекс" style="border-width:0px;"
/><span> Яндекс</span></a></td></tr>
<tr><td
style="width: 50%;"><a title="Мой
Мир" href=""
onclick="javascript:window.open('http://connect.mail.ru/share?share_url='+bmUrl+'&subject='+bmTitle,'Bookmarks');
return false;"><img
title="Мой
Мир" src="/images/Bookmarks/Mailru.png"
alt="Мой
Мир" style="border-width:0px;"
/><span> Мой Мир</span></a></td><td style="width: 50%;"><a title="Blogger.com" href="" onclick="javascript:window.open('http://www.blogger.com/blog_this.pyra?t&amp;u='+bmUrl+'&amp;n='+bmTitle+'&amp;a=ADD_SERVICE_FLAG&amp;passive=true&amp;alinsu=0&amp;aplinsu=0&amp;alwf=true&amp;hl=ru&amp;skipvpage=true&amp;rm=false&amp;showra=1&amp;fpui=2&amp;naui=8','Bookmarks');
return false;"><img
title="Blogger.com"
src="/images/Bookmarks/Blogger.png"
alt="Blogger.com"
style="border-width:0px;"
/><span> Blogger.com</span></a></td></tr>
<tr><td
style="width: 50%;"><a title="100
закладок" href=""
onclick="javascript:window.open('http://www.100zakladok.ru/save/?bmurl='+bmUrl+'&bmtitle='+bmTitle,'Bookmarks');
return false;"><img
title="100 закладок" src="/images/Bookmarks/100zakladok.png"
alt="100
закладок" style="border-width:0px;"
/><span> 100 закладок</span></a></td><td style="width: 50%;"><a title="Закладок.Нет" href=""
onclick="javascript:window.open('http://zakladok.net/link/','Bookmarks');
return false;"><img
title="Закладок.Нет" src="/images/Bookmarks/Zakladok.png"
alt="Закладок.Нет" style="border-width:0px;"
/><span> Закладок.Нет</span></a></td></tr>
<tr><td
style="width: 50%;"><a title="Мистер
Вонг" href=""
onclick="javascript:window.open('http://www.mister-wong.ru/index.php?action=addurl&bm_url='+bmUrl+'&bm_description='+bmTitle,'Bookmarks');
return false;"><img
title="Мистер
Вонг" src="/images/Bookmarks/Mrwong.png"
alt="Мистер
Вонг" style="border-width:0px;"
/><span> Мистер Вонг</span></a></td><td style="width: 50%;"><a title="Моё место" href=""
onclick="javascript:window.open('http://moemesto.ru/post.php?url='+bmUrl+'&title='+bmTitle,'Bookmarks');
return false;"><img
title="Моё
место" src="/images/Bookmarks/Moemesto.png"
alt="Моё
место" style="border-width:0px;"
/><span> Моё
место</span></a></td></tr>
<tr><td
style="width: 50%;"><a title="Memori.Ru" href="" onclick="javascript:window.open('http://memori.ru/link/','Bookmarks');
return false;"><img
title="Memori.Ru"
src="/images/Bookmarks/Memori.png"
alt="Memori.Ru"
style="border-width:0px;"
/><span> Memori.Ru</span></a></td><td
style="width: 50%;"><a title="Digg" href="" onclick="javascript:window.open('http://digg.com/submit?phase=2&url='+bmUrl,'Bookmarks');
return false;"><img
title="Digg"
src="/images/Bookmarks/Digg.png"
alt="Digg"
style="border-width:0px;"
/><span> Digg</span></a></td></tr>
<tr><td
style="width: 50%;"><a title="MyScoop" href="" onclick="javascript:window.open('http://myscoop.ru/add/?URL='+bmUrl+'&title='+bmTitle,'Bookmarks');
return false;"><img
title="MyScoop"
src="/images/Bookmarks/Myscoop.png"
alt="MyScoop"
style="border-width:0px;"
/><span> MyScoop</span></a></td><td
style="width: 50%;"><a title="Linkstore" href="" onclick="javascript:window.open('http://www.linkstore.ru/servlet/LinkStore?a=add&url='+bmUrl,'Bookmarks');
return false;"><img
title="Linkstore"
src="/images/Bookmarks/Linkstore.png"
alt="Linkstore"
style="border-width:0px;"
/><span> Linkstore</span></a></td></tr>
<tr><td
style="width: 50%;"><a title="Delicious" href="" onclick="javascript:window.open('http://del.icio.us/post?v=4&noui&jump=close&url='+bmUrl+'&title='+bmTitle,'Bookmarks');
return false;"><img
title="Delicious"
src="/images/Bookmarks/Del_icio_us.png"
alt="Delicious"
style="border-width:0px;"
/><span> Delicious</span></a></td><td
style="width: 50%;"> </td></tr>
</table></td></tr><tr><td
class="footnote"><a title="Добавьте
на
свой
сайт
сервис
социальных
закладок." href="http://www.walkservice.ru/Bookmarks.aspx"
target="_blank">Кнопка
скрипт
социальных
закладок</a></td></tr>
</table></td>
<td><a
title="Добавить в
Избранное" href=""
onclick="return
__add_favourite(this,bmUrl,bmTitle);"><img
src="/images/Bookmarks/Favourite.png"
alt="Избранное"
style="border-width:0px;"
/><span> Избранное </span></a></td>
<td><a title="ВКонтакте"
href=""
onclick="javascript:window.open('http://vkontakte.ru/share.php?url='+bmUrl,'Bookmarks');
return false;"><img
title="ВКонтакте" src="/images/Bookmarks/Vkontakte.png"
alt="ВКонтакте" style="border-width:0px;"
/></a></td>
<td><a
title="Одноклассники.ru"
href=""
onclick="javascript:window.open('http://www.odnoklassniki.ru/dk?st.cmd=addShare&st.s=0&st._surl='+bmUrl,'Bookmarks');
return false;"><img
title="Одноклассники.ru" src="/images/Bookmarks/Odnoklassniki.png"
alt="Одноклассники.ru" style="border-width:0px;" /></a></td>
<td><a
title="Facebook"
href=""
onclick="javascript:window.open('http://www.facebook.com/sharer.php?u='+bmUrl,'Bookmarks');
return false;"><img
title="Facebook"
src="/images/Bookmarks/Facebook.png"
alt="Facebook"
style="border-width:0px;"
/></a></td>
<td><a
title="Twitter"
href=""
onclick="javascript:window.open('http://twitter.com/home?status='+bmTitle+'
- '+bmUrl,'Bookmarks'); return false;"><img title="Twitter" src="/images/Bookmarks/Twitter.png"
alt="Twitter"
style="border-width:0px;"
/></a></td>
<td><a
title="Google"
href=""
onclick="javascript:window.open('https://www.google.com/bookmarks/mark?op=add&bkmk='+bmUrl+'&title='+bmTitle,'Bookmarks');
return false;"><img
title="Google"
src="/images/Bookmarks/Google.png"
alt="Google"
style="border-width:0px;"
/></a></td>
<td> | </td>
<td><div
class="g-plusone"
data-size="medium"></div><script
type="text/javascript"> window.___gcfg = { lang:
'ru' }; (function
() { var po = document.createElement('script');
po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/platform.js'; var
s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })(); </script></td>
</tr></table>
|
Шаг четвертый
В принципе, все, что необходимо было сделать на странице, вы уже сделали. Но в таком виде ваши кнопки добавления в социальные закладки все еще нормально отображаться не будут. Для нормального функционирования кнопок нужно загрузить на ваш сайт картинки изображений на этих кнопках, а также еще две картинки кнопки, которые используются для закрытия всплывающего окна с кнопками. Загрузите архив с нужными Вам картинками.
Иконки социальных закладок
Конечно, мы сделали некоторое предположение, где на вашем сайте будут расположены эти картинки. Обычно картинки принято располагать в директории /images. Именно в этой директории нужно расположить файлы Delete.gif и DeleteOn.gif. На нашем сайте это сделано так, как кнопка закрытия окон используется для множества окон сайта. Все же кнопки социальных закладок находятся в директории /images/Bookmarks.
По сути ничто вам не мешает делать свои директории для соответствующих картинок, или даже делать свои картинки. Но если вы будете менять директории расположения картинок, Вам нужно будет исправить предыдущий код так, чтобы изображения корректно находились.
В архиве есть пример работающего html фала, который можно просмотреть, просто сделав двойной клик на example.htm. Учтите, что сперва нужно разархивировать архив. В принципе вы можете копировать фрагменты кода непосредственно из этого файла и в чем-то это даже удобнее. Но есть небольшие детали, которые нужно учесть. Во-первых, в файле примера не работает кнопка добавления в закладки броузера, если файл примера открывать через двойной клик. В этом нет ничего страшного, так как все будет работать после размещения файла на сервере. Во-вторых, для того, чтобы файл запускался локально, в нем везде пришлось заменить в маршруте картинок /images на images, но это не имеет значения, пока ваши html файлы с кнопками размещаются в корневой директории сайте.
Информация о версии
Версия от 29 апреля 2011 года.
- Исправлены возможные ошибки позиционирования всплывающего окна с закладками, которые возникали в случае использования слоев для позиционирования элементов дизайна.
Заключение
Если у Вас возникнут вопросы, или вы найдете ошибки в коде, пишите нам:
|