Віджети Вконтакті

Усім відомо, що окрім Facebook, є багато пародій на цю соціальну мережу. Якщо вірити дослідженням, найпопулярнішою в Україні є Вконтакті. Тому, на додачу до кнопки «Подобається» від Facebook, я вирішив зробити аналогічну кнопку для Вконтакта. І вже на цьому етапі можна бачити, чим пародія відрізняється від оригіналу. Якщо кнопка для Facebook додається в один рядок, то Вконтакт пішов значно далі! Вони розробили свою неповторну і погано документовану систему авторизації не тільки для користувачів, але й для доменів. Тому для того, щоб додати щось на свою сторінку, ви маєте перед тим отримати ідентифікатор для неї, увійшовши попередньо у Вконтакт. Після цього цей чарівний код має повний доступ до вмісту вашої сторінки і може легко збирати інформацію про вас.

Якщо вас все це влаштовує, то далі можна не читати. Але мені дуже не сподобався такий підхід, і я вирішив, що Вконтакта разом з його OpenAPI краще запхати в iframe. Для цього я зареєстрував спеціяльний домен http://wkontakte.99k.org/ й отримав ідентифікатор для нього. Відповідний код я помістив у HTML файл і тепер можна додавати кнопку для будь якої сторінки без авторизації. Наприклад, код для цієї сторінки виглядає так.

У Blogger кнопка «Подобається» додається так:

<iframe allowTransparency='true' expr:src='&quot;http://wkontakte.99k.org/like.html?p=&quot; + data:post.url' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:100%; height:25px;'/>

Її можна додати, наприклад, праворуч від кнопки для Facebook

<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?locale=uk_UA&amp;href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;action=like&quot;' frameborder='0' scrolling='no' style='float:left; border:none; overflow:hidden; width:50%; height:25px;'/>
<iframe allowTransparency='true' expr:src='&quot;http://wkontakte.99k.org/like.html?amp;p=&quot; + data:post.url' frameborder='0' scrolling='no' style='float:left; border:none; overflow:hidden; width:50%; height:25px;'/>

Враховуючи специфіку відвідувачів Вконтакту, які відвідують майже виключно сам Вконтакт і завжди сидять у ньому, можна додати також віджет коментарів:

<iframe allowTransparency='true' expr:src='&quot;http://wkontakte.99k.org/comments.html?n=20&amp;p=&quot; + data:post.url' frameborder='0' scrolling='no' style='border:none; width:100%;'/>

(тут 20 — максимальна кількість коментарів). Особисто я додав коментарі в самому кінці сторінки з дописом, після коду

      <p class='comment-footer'>
        <b:if cond='data:post.embedCommentForm'>
          <b:if cond='data:post.allowNewComments'>
            <b:include data='post' name='comment-form'/>
          <b:else/>
            <data:post.noNewCommentsText/>
          </b:if>
        <b:else/>
          <b:if cond='data:post.allowComments'>
            <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
          </b:if>
        </b:if>

      </p>
    </b:if>
  </div>

Ну і головне. Після того, як ви перевірили, що віджети виглядають нормально, непогано буде прибрати цей непотріб з очей нормальних користувачів. Для цього передбачено ще один параметр: a=true. Його необхідно додати в адресу для кнопки «Подобається» так:

expr:src='"http://wkontakte.99k.org/like.html?a=true&p=" + data:post.url'

А для коментарів, відповідно:

expr:src='"http://wkontakte.99k.org/comments.html?a=true&n=20&p=" + data:post.url'

Після цього віджети бачитимуть тільки ті користувачі, які ввійшли у Вконтакт.

Далі...