Как сделать рабочую кнопку "Мне нравится" на сайте с кириллическим доменом?
Данная статья писалась давно и сейчас уже не имеет смысла, т.к. проблему, которая тут решалась, благополучно пофиксили. Осталась только одна трабла - не работает галочка "Рассказать друзьям", с ней я разобраться не смог и поэтому добавил дополнительную кнопку (см. ниже). Тем не менее статья оставлена нетронутой для сохранения вселенского равновесия.
Когда я делал свой сайт, передо мной встала задача разместить на нем популярные кнопки для лайканья из разных соцсетей. Одна из них, основная, конечно же, ВКонтакте. Ну и мордокнига с одноклассниками (в которых я, кстати говоря, не зареген) для комплекта. С ВК`шной кнопкой сразу начались проблемы. Вроде оно и лайкает, и лайки считает, а вот если жмёшь "рассказать друзьям" - то на стену тебе попадает только название страницы, без ссылки. Ну это же никуда не годится! Пришлось выкручиваться:
<div id="vk_like"></div>
<script type="text/javascript">
VK.Widgets.Like('vk_like', {type:"button",pageTitle:"Ресурс ФанФрога !", pageDescription:"Ресурс ФанФрога : теперь в стандарте web 2.0!",pageUrl:"//xn--80ag3aejvc.xn--p1ai/"}, 1);
</script>
Как видно, я добавил 3 параметра: pageTitle, pageDescription и, главное, pageURL, значение которого - адрес этой же страницы в Punycode. И о чудо, ссылка появилась! Так, как кнопки я поставил только на заглавную страницу, то проблем больше не возникло...
Но дальше я занялся блогом. А тут уже у каждой страницы своя ссылка. Попробовал перебрать существующие плагины - но они меня не впечатлили: хотелось сделать более глубокую интеграцию в интерфейс блога, а это можно сделать только вручную. Да и, к слову сказать, кнопка "Мне нравится" там тоже не работала как надо.
Проблема была в том, что во-первых у нас есть один скрипт на все страницы, которые, естественно, лайкаются независимо друг от друга, а во-вторых у каждой страницы нашего блога может быть несколько адресов: будь то метки в конце адреса (хотя, вроде бы, контакт их распознаёт), или какие-нибудь префиксы (например, префиксы Web-прокси или переводчика). В итоге родился такой скрипт:
<div id="vk_like"></div>
<script type="text/javascript">
a="//xn--90aexm.xn--80ag3aejvc.xn--p1ai/" + location.href.substring(location.href.lastIndexOf("/") +1, location.href.concat("#").indexOf("#"))+"#vk";
VK.Widgets.Like("vk_like", {type: "button", pageUrl: a, verb: 1, height: 24});
</script>
То есть к домену нашего блога или чего-бы-это-ни-было в Punycode мы приклеиваем все то, что находится между последним слэшем ("/") и первой решеткой ("#"), которую дополнительно добавляем в строку, в которой мы ее ищем, так как если наша ссылка без метки - функция выдаст значение -1, а нам в этом случае нужно значение конца строки, что мы и получаем. В конце к ссылке мы добавляем метку "#vk" (см. примечание ниже). Во-первых потому что с таким видом ссылки как у меня контакт опять не выводит ее на стене без метки (хрен его знает почему), а во-вторых теперь все юзеры, пришедшие к нам из контакта сразу будут перенаправляться на эту метку (если она существует), что кому-нибудь, да и пригодится.
Примечание ниже: метку #vk пришлось заменить на динамическую метку с номером конкретной статьи, т.к. оказалось, что не все кнопки работают (результат зависел именно от номера), например на "// блог . фанфрог . рф /?p=58" кнопка не нажималась, а на "/?p=158" - нажималась. Мистика 
. Итак, финальный код:
<div id="vk_like"></div>
<script type="text/javascript">
a="//xn--90aexm.xn--80ag3aejvc.xn--p1ai/" + location.href.substring(location.href.lastIndexOf("/") +1,location.href.concat("#").indexOf("#"));
a=a+"#"+a.substring(a.lastIndexOf("=")+1);
VK.Widgets.Like("vk_like", {type: "button", pageUrl: a, verb: 1, height: 24});
</script>
А вот и результат:
P.S. У контактовского скрипта есть еще несколько полезных параметров, не стоит о них забывать.
Добавить комментарий