Виджет Мне Нравится ВКонтакте и WordPress

Я не буду рассказывать что и как ставить виджет “Мне нравится” соц. сети “ВКонтакте”… ресурсов описывающих вроде такую процедуру полно, да и вконтакте описание хорошее по установке….
Но !!!! По умолчанию виджет “Мне Нравится” актуален только для отдельных страниц… Итак я расскажу как решить две проблемы с установкой. Первая не ахти какая и решение есть в инете….
Это проблема с размещением… а именно “обтекание кнопки”
чтобы не утруждать себя написанием, тупо копирую, что нашел на бескрайних просторах интернета:

Как Вы заметили, кнопка помещается в div с айдишиником “vk_like“, где прописан стиль её отображения. И в этом стиле разработчики втулили правило:
clear: both;
Как мы знаем, это правило отменяет обтекание элемента с правого и левого краев, т.е., если Вы хотите, чтобы Ваша кнопочка была в ряд с остальными кнопками соц. сетей, можете и не мечтать, она будет гордо стоять на новой строке. Чтобы этого избежать и все-таки вернуть кнопку в ряд, замените:

<div id="vk_like"></div>

на

<div id="vk_like" style="clear:none !important;"></div>

Так мы отменяем отмену (:-D) обтекания элемента, а “!important” повышает приоритет вашего стиля, т.е., Ваше правило в глазах браузера будет главным.

Нуссс… теперь соль моей публикации !!! ))))))))))))
Как я уже сказал, по умолчанию код виджета актуален для отдельных страниц, т.е. применительно к wordpress это размещение только в файлах page.php и single.php … а поместив код на странцы где выводятся несколько публикаций (в основном главная, архив, поиск …) то столкнетесь с маааленькой проблемкой )))))))))))))
вот вам решение от меня …
код ставки в репу (head) пропущу(там нечего менять) и сразу вам мое решение по коду, который вставляется непосредственно в тело (body)

<div id="vk_like-<?php the_ID(); ?>" style="clear:none !important;"></div>
<script type="text/javascript">VK.Widgets.Like("vk_like-<?php the_ID(); ?>", {type: "button", pageUrl: "<?php the_permalink() ?>"});</script>

т.е. сделали уникальным ID слоя (div) добавив id страницы вордпресса и явно указали к какой странице кнопка (виджет) отностится через pageUrl
Вот …

  • ВКонтакте
  • Twitter
  • Google Bookmarks
  • Facebook
  • Tumblr
  • Delicious
  • FriendFeed
  • Digg
  • LinkedIn
  • StumbleUpon
  • Windows Live
  • Yahoo! Bookmarks
  • E-Mail

Комментарии к публикации:

  1. У меня проблема немного в другом, на нескольких страницах сайта, а в точности, на страницах где юрл начинается со слова google, кнопка “нравится” от контакта отображается дважды, на других страницах все норма. Ваш метод уникализации слоя работает во всех браузерах, кроме хрома..
    Есть мысли по этому поводу?

  2. Через недельку-две гляну на тестовом, да и может измененения в апи есть еще… и с хромом тоже гляну… сорри раньше не могу – занят на данный момент совсем не web делами.

  1. No trackbacks yet.

:wink: :-| :-x :twisted: :) 8-O :( :roll: :-P :oops: :-o :mrgreen: :lol: :idea: :-D :evil: :cry: 8) :arrow: :-? :?: :!: