VKontakte предоставляет удобный инструмент, чтобы делиться ссылками с друзьями. Документация предельно проста. На одном сайте столкнулся с тем, что кнопка "Сохранить ВКонтакте" не работает.. При том, что тот же код отлично работал на других сайтах.
|
1 2 3 4 5 6 |
<script type="text/javascript" src="http://vkontakte.ru/js/api/share.js?9" charset="windows-1251"></script> <script type="text/javascript"> <!-- document.write(VK.Share.button()); --> </script> |
После раскопок оказалось, что документ XHTML(MIME type application/xhtml+xml) не понимает document.write. Это нормальное поведение по стандарту. Не баг, но фича 🙂 . Пришлось искать обходной путь. От document.write пришлось отказаться, заменив на innerHTML.
innerHTML тоже не в стандарте, но если спрятать конструкцию в /* <![CDATA[ */, то броузеры ее понимают и обрабатывают правильно.
Окончательный вариант, работающий в XHTML и при этом валидный выглядит так.
|
1 2 3 4 |
<div id="vk"></div> <script type="text/javascript" src="http://vkontakte.ru/js/api/share.js?10" charset="windows-1251"></script><!-- Put this script tag to the place, where the Share button will be --> <script type="text/javascript">/* <![CDATA[ */document.getElementById("vk").innerHTML = VK.Share.button(false,{type: "round", text: "Сохранить"}); /* ]]> */</script> |
А как сделать чтобы еа странице Vkontakte, отобразилась нужная картинка с вашего сайта(превью)?
Для этого есть несколько вариантов:
Во-первых Vkontakte сам пытается найти картинку. Для этого он просматривает первые 8 картинок с шириной или высотой более 100 px. Метод очень ненадежный.
Вариант 2. Указать специальный тег в head страницы
|
1 2 |
<link rel="image_src" href="http://mysite.com/mypic.jpg" /> |
Вариант 3. Указать в джаваскрипте параметр image
|
1 2 3 4 5 6 |
<script type="text/javascript"> <!-- document.write(VK.Share.button({ url: 'https://fstrange.ru', title: 'Записки вебразработчика', image: 'https://fstrange.ru/i/fStrange.png', noparse: true })); --> </script> |
Разумеется картинка должна быть валидной, путь должен быть указан абсолютный.
Свежие комментарии