вторник, 31 мая 2011 г.

Как добавить кнопку "сохранить ВКонтакте" к заметкам блога Blogspot

Хотелось найти способ добавить "Сохранить ВКонтакте" на блог. Делается это правкой шаблона блога в html. Путь к нему - "Дизайн"->"Изменить html". Далее в параграфе "Изменить шаблон" нужно поставить галочку "Расширить шаблоны виджета" - чтобы был виден весь html-код. Теперь нужно найти код ссылки на "ВКонтакте" и вставить его в нужном месте в шаблон.

Воспользовавшись гуглом, нашёл такой вариант:


при применении стандартной кнопки: вначале нужно после <head> дописать:
<script type="text/javascript" src="http://vkontakte.ru/js/api/share.js?9" charset="windows-1251"></script>
затем в нашу таблицу или другом месте шаблона указать:
<div id='vk_al_share_button'/>
<script type='text/javascript'>document.getElementById(&#39;vk_al_share_button&#39;).innerHTML = VK.Share.button(&#39;<data:post.url/>&#39;, {type: &#39;button&#39;});
</script>
 Но, попробовав, наткнулся на ту же проблему, что и один из комментаторов блога: кнопка показывалась только в самом последнем сообщении блога, в остальных было всё по-прежнему. Автор блога предложила другой вариант:
<a expr:href='&quot;http://vkontakte.ru/share.php?url=&quot; + data:post.url' rel='nofollow' target='_blank' expr:onclick='"window.open(this.href, \"_blank\", \"height=430,width=640\"); return false;"'><img alt='В Контакте' border='0' height='21' src='http://3.bp.blogspot.com/_ebKrCj8TLPk/TU3RjiW1FEI/AAAAAAAABas/XoQvbUXqc2M/s1600/VKontakte.png' width='88'/></a>
Он оказался рабочим. Вот только вместе с существующими кнопками сохранения получался разнобой - они кучкой, а "ВКонтакте" - в гордом одиночестве. Просмотрев код шаблона, нашёл ссылки на другие соц-сети (facebook, twitter и т.д.) - id='shareButtons'. Переместил код ссылки туда - понравилось куда больше - кнопка встала в ряд с остальными. Правда они все серые - при наведении цветные, а здесь - зимой и летом одним цветом :). Ну да ладно, пока сойдёт.
UPD спасибо пользователю diaphant, из полученных правок можно выкинуть
<script type="text/javascript" src="http://vkontakte.ru/js/api/share.js?9" charset="windows-1251"></script>


Итого, окончательный вариант выглядит так:
(правка выделена более тёмным фоном)
 ...
<b:includable id='shareButtons' var='post'>

<a expr:href='&quot;http://vkontakte.ru/share.php?url=&quot; + data:post.url' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' rel='nofollow' target='_blank'><img alt='В Контакте' border='0' height='21' src='http://3.bp.blogspot.com/_ebKrCj8TLPk/TU3RjiW1FEI/AAAAAAAABas/XoQvbUXqc2M/s1600/VKontakte.png' width='88'/></a>
  <b:if cond='data:top.showEmailButton'><a class='goog-inline-block share-button sb-email' expr:href='data:post.sharePostUrl + &quot;&amp;target=email&quot;' expr:title='data:top.emailThisMsg' target='_blank'>
      <span class='share-button-link-text'><data:top.emailThisMsg/></span>

Готово! 

7 комментариев:

Анонимный комментирует...

Спасибо, инструкции очень помогли)

diaphant комментирует...

Единственное что блок
script charset='windows-1251' src='http://vkontakte.ru/js/api/share.js?9' type='text/javascript'

во втором варианте вообще не нужен, потому что здесь нет обращения к скрипту. Можно оставитьтолько второй блок, будет тоже самое.

АлСт комментирует...

Nilus
Пожалуйста, рад, что помогло :)

АлСт комментирует...

diaphant
Действительно, спасибо за комментарий!

Анонимный комментирует...

Подскажите пожалкйста, как сделать так, чтобы кнопка "а контакте" стояла в один ряд с остальными кнопками? В данный момент она примерно на 1/3 выше остальных.

АлСт комментирует...

TeaParcel
Честно говоря, не знаю, я не веб-мастер :(. Я помню, что когда всё это делал, у меня тоже эта кнопка вылезала. Как-то я это дело поборол (уже не помню).
P.S. Прошу прощения, что такой поздний ответ, блог в последнее время редко захожу... Кстати интересная у вас информация про чай, вы откуда-то собираете, или у вас ещё есть личный опыт/знания? :)

Unknown комментирует...

Спасибо! Все получилось!