Принципы конструирования кнопки для создания социальной закладки
Школка начинающего волшебника
Окончание.Начало. Социальная сеть, закладка, кнопица.
Часть 2. Краткая характеристика некоторых социальных сетей.
1. Картинка.
Для изображения кнопки социальной сети достаточно загрузить в Блоггер картинку логотипа той социальной сети, для которой предполагается кнопица. Можно воспользоваться картинкой непосредственно со страниц социальной сети или закладочника. Достаточно лишь определить адрес изображения, а затем внутри скрипта социальной кнопки указать требуемый по вашему проекту размер картинки-кнопицы.Итак, «на что кликать» мы видим. Для примера вот картинка социального сервиса «Живой журнал» (Live Journal).
Адрес этой картинки или, если хотите, пиктограммы, эмблемы, загруженной в Блоггер:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSBtbreZ8jP_nDJTrRfqXbYZaSFb6B_ldgOpMDn9u12XOdXfXNJGT-gUF2GsDKPcJUDNapFA9Ky_TB7GWcHNQQs_fdTQa5jqRcftiRUV_lDIZ5izG1zblDDM6xuohxDlIY2pELueuUID0/s1600/livejournal.png
2. Сочиняем скрипт.
JavaScript, с помощью которого получаем кнопицу и необходимую реакцию отшаривания страницы в социальной сети, состоит из трех основных элементов.Первый элемент – открывающий и закрывающий тэги. Не вникая в то, зачем те или иные значки или символы ставятся в это «заклинание», просто примем к сведению, что начинается JavaScript социальной кнопки так:
<script language="JavaScript" type="text/javascript">/*<![CDATA[*/
Всё это выражение пишется в строку. Заканчивается наша мини-программка так:/*]]>*/</script>
Получили внешнюю программную оболочку скрипта. Тэги, открывающий и завершающий.Между этими крякозябрами помещаем содержание скрипта.
Вторым элементом являются переменные, которым мы присваиваем определенное значение, а уж ваш компьютер или, точнее, браузер, исполняя скрипт кнопки, использует вместо коротких символов переменной заключенное в этой переменной выражение, формулу или выполняет команду. То, что стоит после знака =.
Переменные таковы:
var end = " /></a> ";
var et = encodeURIComponent(document.title);
var eu = encodeURIComponent(location.href);
var kt = "http://www.";
var kt3 = "http://3.bp.blogspot.com/";
var hr = " href=";
var im = "<img src=";
var nf = "nofollow";
var p1 = "<a rel=";
var p2 = " title=";
var p3 = " width='28' height='28' border='0' alt=";
var et = encodeURIComponent(document.title);
var eu = encodeURIComponent(location.href);
var kt = "http://www.";
var kt3 = "http://3.bp.blogspot.com/";
var hr = " href=";
var im = "<img src=";
var nf = "nofollow";
var p1 = "<a rel=";
var p2 = " title=";
var p3 = " width='28' height='28' border='0' alt=";
Каждая переменная var имеет свое название и после знака равенства своё значение, которое берется в двойные или одинарные (апострофы) кавычки.
Обратите внимание, что содержимое переменных et и eu не заключено в кавычки. Содержимое других переменных заключено в двойные прямые кавычки.
Наименование переменных не имеет какого-либо ритуального смысла. Вы можете использовать и иные аббревиатуры. Имя переменной – это как бы сокращение последовательности тех символов, которые должны быть в ссылке на страницу социальной сети, где происходит отшаривание закладки.
Напомню, что слэнговый глагол "отшарить" - производное от английского to share, что значит: поделиться, обнародовать, представить на всеобщее обозрение.
Третий элемент – непосредственная запись в тело вашей страницы кода кнопки. Осуществляется эта операция с помощью команды document.write ().
В круглых скобках пишем то, что браузер должен вывести на вашей странице под картинкой социальной кнопицы. А как узнать, как именно должна выглядеть эта магическая формула?
Найдите социальную кнопку Живого Журнала на каком-нибудь из других сайтов, или в разделе "помощь" самого ЖЖ, и, кликнув правой клавишей мыши, выбирайте команду "скопировать адрес ссылки". Затем, открывайте простейший Блокнот и вставляйте скопированный текст в Блокнот. Заклинание написано, как правило, следующим образом:
http://www.livejournal.com/update.bml?event=АДРЕС СТРАНИЦЫ, ГДЕ НАХОДИТСЯ КНОПКА(в виде крякозябров)&subject=ЗАГОЛОВОК СТРАНИЦЫ, ГДЕ НАХОДИТСЯ КНОПКА(в виде крякозябров)
Из этого загадочного текста мы извлекаем информацию об адресе страницы ЖЖ, которая отвечает за отшаривание - http://www.livejournal.com/update.bml.Теперь не очень трудно написать наше собственное заклинание, для начала в обычных html-тегах, а затем в виде скрипта. Скрипт, собственно говоря, нужен лишь затем, чтобы замаскировать ссылку на внешний сайт, то есть на страницу ЖЖ, где происходит отшаривание.
Код ссылки и кнопицы (картинки) выглядит так (справа пояснения):
| <a href="http://www.livejournal.com/update.bml?event=Адрес_страницы&subject=Заголовок_страницы" title="Bookmark this page to Live Journal" target="_blank"> | Ссылка, которая открывается в новом окне |
| <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSBtbreZ8jP_nDJTrRfqXbYZaSFb6B_ldgOpMDn9u12XOdXfXNJGT-gUF2GsDKPcJUDNapFA9Ky_TB7GWcHNQQs_fdTQa5jqRcftiRUV_lDIZ5izG1zblDDM6xuohxDlIY2pELueuUID0/s1600/livejournal.png" width='28' height='28' border='0' alt="Запись в Живой Журнал" /> | Картинка-символ ЖЖ диаметром 28 пиксел |
| </a> | Закрывающий ссылку тэг |
Вместо адреса вашей страницы, подлежащей отшариванию, в скрипт добавляется выражение encodeURIComponent(location.href), вместо заголовка страницы – выражение encodeURIComponent(document.title). Теперь нам не придется, близоруко щурясь, вбивать название и адрес интересной страницы, а компьютер самостоятельно, следуя этим командам, найдет и запишет адрес страницы и её заголовок. Посетители вашей замечательной страницы будут признательны. Им останется лишь написать свой собственный, я уверен, хвалебный комментарий на счет вашего творчества.
Учитывая то, что в качестве переменных мы запрограммировали некие последовательности символов, мы подставляем в скрипт эти переменные вместо соответствующей части кода ссылки. Каждую прямую кавычку, где это необходимо, заключаем с обеих сторон в апострофы ('), как требует синтаксис Java-скрипта.
Получим заклинание следующего вида:
document.write(p1+'"'+nf+'"'+hr+'"'+kt+'livejournal.com/update.bml?event='+eu+'&subject='+et+'"'+p2+'"Bookmark this page to Live Journal" target="_blank">');
document.write(im+'"'+kt3+'-4khEtuyY9UY/T2816qeMvrI/AAAAAAAAALk/6rHy1OrR2kw/s1600/livejournal.png'+'"'+p3+'"'+'Запись в Живой Журнал'+'"'+end);
Точка с запятой после закрывающей круглой скобки означает перевод на новую строку. Это важный значок, также как и одинарный апостроф. Иногда забываем ставить эти символы в программу, и скрипт не будет работать.document.write(im+'"'+kt3+'-4khEtuyY9UY/T2816qeMvrI/AAAAAAAAALk/6rHy1OrR2kw/s1600/livejournal.png'+'"'+p3+'"'+'Запись в Живой Журнал'+'"'+end);
Возможно некоторое редактирование и усовершенствование этого текста каждым автором Интернет-страницы самостоятельно.
В результате получаем скрипт, которые засовываем в ту часть страницы, где, по мнению автора-конструктора, должна находиться кнопица для отшаривания в ЖЖ.
Полностью:
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
var end = " /></a> ";
var et=encodeURIComponent(document.title);
var eu=encodeURIComponent(location.href);
var kt = "http://www.";
var kt3 = "http://3.bp.blogspot.com/";
var hr = " href=";
var im = "<img src=";
var nf = "nofollow";
var p1 = "<a rel=";
var p2 = " title=";
var p3 = " width='28' height='28' border='0' alt=";
document.write(p1+'"'+nf+'"'+hr+'"'+kt+'livejournal.com/update.bml?event='+eu+'&subject='+et+'"'+p2+'"Bookmark this page to Live Journal" target="_blank">');
document.write(im+'"'+kt3+'-4khEtuyY9UY/T2816qeMvrI/AAAAAAAAALk/6rHy1OrR2kw/s1600/livejournal.png'+'"'+p3+'"'+'Запись в Живой Журнал'+'"'+end);
/*]]>*/
</script>
/*<![CDATA[*/
var end = " /></a> ";
var et=encodeURIComponent(document.title);
var eu=encodeURIComponent(location.href);
var kt = "http://www.";
var kt3 = "http://3.bp.blogspot.com/";
var hr = " href=";
var im = "<img src=";
var nf = "nofollow";
var p1 = "<a rel=";
var p2 = " title=";
var p3 = " width='28' height='28' border='0' alt=";
document.write(p1+'"'+nf+'"'+hr+'"'+kt+'livejournal.com/update.bml?event='+eu+'&subject='+et+'"'+p2+'"Bookmark this page to Live Journal" target="_blank">');
document.write(im+'"'+kt3+'-4khEtuyY9UY/T2816qeMvrI/AAAAAAAAALk/6rHy1OrR2kw/s1600/livejournal.png'+'"'+p3+'"'+'Запись в Живой Журнал'+'"'+end);
/*]]>*/
</script>
Только не забываем, что в редакторе Блоггера должен быть включен режим HTML-редактирования.
Вот так выглядит эта кнопица.
Попробуйте кликнуть по кнопке. Если у вас имеется эккаунт - своя страница в ЖЖ - то на ней зафиксируется ссылка на эту, просматриваемую вами мою страничку.
Точно также можно создать кнопицу для любого закладочного или социального сервиса, где есть опция – отшаривание Интернет-страниц. Надо лишь немного потренироваться и выучить по какому-либо учебнику основные понятия JavaScript. Уверяю вас, это проще, чем китайский язык.
Использование переменных var удобно, поскольку в коде каждой кнопки, если их несколько внутри одного скрипта, используются однотипные последовательности символов, которые и заменяются соответствующими переменными. Это сокращает общий размер скрипта.
Должен заметить, что разные браузеры иногда капризничают, если сталкиваются с такими вот простыми скриптами социальных кнопок. И разные серверы-площадки, на которых могут быть расположены ваши сайты (хостинг), также могут отказаться транслировать команду по отшариванию, например, не выведут адрес или заголовок страницы. Необходимо испытание и отлаживание скриптов для каждого конкретного сайта и хостинга.
