Чтобы комментировать блог могли пользователи социальной сети.

ВНИМАНИЕ: СТАТЬЯ УСТАРЕВШАЯ, ТРЕБУЕТСЯ В ДОРАБОТКЕ!!!

Что сделать, чтобы комментировать блог могли пользователи социальной сети?

Самым простым решением является использование варианта в форме комментария.

С другой стороны, у ряда крупных социальных сетей есть возможность устанавливать виджеты отзывов на сторонний сайт. Объединить обе формы комментариев мне не удалось, а вот совместить их вполне возможно. Результат моих изысканий вы можете посмотреть в Приложении 1.

Содержание.

  1. Кнопка скрыть/показать.
  2. Как добавить комментарии "В Контакте" на блог.
  3. Как добавить комментарии "Facebook" на блог.

Кнопка скрыть/показать.

Перед установкой сторонних комментариев нужно создать кнопку "скрыть/показать" для существующей формы отзывов.

Как добавить комментарии "В Контакте" на блог.

Шаг 1. Как узнать свой API_ID.

  1. Заходим на страницу "Создать приложение". Заполняем графы: "Название" и "Тип"-"Веб-сайт". Жмём кнопку "Перейти к загрузке приложения".
  2. На вкладке "Настройки" заполняем строчки "Адрес сайта" и "Базовый домен". Сохраняем изменения. Там же указан "ID приложения". Или его можно узнать из строки браузера: http://vk.com/editapp?id=0000000. Нули это и есть ваш номер API_ID.
Узнать свой API_ID В Контакте
Узнать свой API_ID В Контакте.

Шаг 2. Заполнение формы виджета.

На странице "Виджет для комментариев" указан код для вставки.
Код добавления виджета В Контакте.
Код добавления виджета "В Контакте".
Включаем его в шаблон Blogger на вкладке "Дизайн"-"Изменить HTML", установив галочку "Расширить шаблоны виджета". Помним, что для простоты поиска участков кода стоит использовать Ctrl+F.

После
<head>
пишем:
<script src="http://userapi.com/js/api/openapi.js?20" type="text/javascript"></script>
После кода:
<h4>
        <b:if cond='data:post.numComments == 1'>
          1 <data:commentLabel/>:
        <b:else/>
          <data:post.numComments/> <data:commentLabelPlural/>:
        </b:if>
      </h4>
указываем:
<script type='text/javascript'>
  VK.init({apiId: API_ID, onlyWidgets: true});
</script>

<button onclick='new Effect.toggle(&quot;poyavlyayushchiesya_kontact&quot;,&quot;appear&quot;); return false' type='submit'><h4><span style='font-family: tahoma, arial, verdana, sans-serif, Lucida Sans; font-weight: bold; color:#45688E; '><img src='http://vkontakte.ru/images/widget_logo.gif'/>  Комментарии</span></h4></button>

<div id='poyavlyayushchiesya_kontact' style='display: none;'>
<div id='vk_comments'/>
<script type='text/javascript'>
VK.Widgets.Comments(&quot;vk_comments&quot;, {limit: 5, width: &quot;480&quot;, attach: &quot;*&quot;});
</script></div>
, где API_ID - это ваш идентификационный номер. Как его узнать рассказано выше.
      в тег <button>...</button> включены код изображения () и слово "Комментарии". Это содержимое кнопки, их вы можете поменять на свой вкус.
      в тег <div id='poyavlyayushchiesya_kontact' style='display: none;'>...</div> включен скрипт формы отзывов "В Контекте", чтобы данный блок исчезал/появлялся.
Как добавить комментарии В Контакте на блог Blogger.
Как добавить комментарии "В Контакте" на блог Blogger.

Как добавить комментарии "Facebook" на блог.

  1. На странице "Comments" заполняем форму.
    Как добавить комментарии Facebook на блог
  2. Нажав на кнопку "Get code", копируем полученный код.
  3. Первую часть которого
    <div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
    вносим в шаблон Blogger на вкладке "Дизайн"-"Изменить HTML" сразу после
    <body>
    в некоторых шаблонах код может выглядить иначе, например:
    <body expr:class='&quot;loading&quot; + data:blog.mobileClass'>:
  4. Во второй части
    <fb:comments href="http://shpargalkablog.ru/" num_posts="10" width="500"></fb:comments>
    адрес блога href="http://shpargalkablog.ru/" заменяем на переменное значение
    <fb:comments expr:href='data:post.url' num_posts="10" width="500"></fb:comments>
    Если нужно добиться выплывающего эффекта, то окончательный вид будет следующим:
    <button onclick='new Effect.toggle(&quot;poyavlyayushchiesya_facebook&quot;,&quot;appear&quot;); return false' type='submit'><h4><span style='font-family: tahoma, arial, verdana, sans-serif, Lucida Sans; font-weight: bold; color:#45688E; '><img src='http://1.bp.blogspot.com/--111urInSCY/TifScpKL20I/AAAAAAAACEw/XPGdkFWEw7I/s1600/facebook.png'/>  Комментарии</span></h4></button>
    
    <div id='poyavlyayushchiesya_facebook' style='display: none;'><fb:comments expr:href='data:post.url' num_posts="10" width="500"></fb:comments></div>
    Скорректированный код добавляем после
    <h4>
            <b:if cond='data:post.numComments == 1'>
              1 <data:commentLabel/>:
            <b:else/>
              <data:post.numComments/> <data:commentLabelPlural/>:
            </b:if>
          </h4>
  5. И, последнее. Указываем перед </head> с помощью мета-тегов администратора комментариев
    <meta property="fb:app_id" content="{YOUR_APPLICATION_ID}"/>
    • Обязательно добавить слэш (символ /).
    • Для того, чтобы узнать {YOUR_APPLICATION_ID} переходим на эту страницу.
    • Кнопка справа сверху "Создать новое приложение".
    • Как добавить комментарии Facebook на блог
      Здесь могут попросить подтверждение на телефон. Отправляем номер и несколько часов ждём смс с подтверждающим кодом.
Rookee — инструменты для привлечения клиентов на сайт
в f t
наверх ↑

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

FFILOSOFF
слушай, а как у тебя рисунки не являются ссылками? у меня на блоге почему-то все рисунки активные ссылки и на них можно нажать:(
NMitra
Не возражаешь, коли ссылки дам? Почитай
http://shpargalkablog.ru/2010/09/optimizatsiya-images-blogger.html#Blogger,
комментарии к http://shpargalkablog.ru/2010/07/picasa-s-nulya.html#comments
и http://shpargalkablog.ru/2010/08/podpis-kartinki-html.html.
Если будет непонятно, спрашивай.
NMitra
Можешь посмотреть скриншот кода последнего изображения этой статьи, перейдя по ссылке - http://3.bp.blogspot.com/_ebKrCj8TLPk/TQH__QbBNnI/AAAAAAAABFk/2524hkrJsgY/s1600/kod-izo-Blogger.png
FFILOSOFF
спасибо за помощь. кстати, читаю еще один блог, где автор тоже женщина:)- http://blogger4you.blogspot.com/ - Может не знаешь, не знаю, но там тоже полезного много чего нашел. Теперь буду и на твой блог заглядывать. С меня +1.

Свой блог о заработке только начинаю. Вот думаю, что лучше, вести блог или создавать конкретный сайт - пока не решил. Есть блог с посещаемостью 200 уников, но блин школота. Надо чем-то серьезным начинать заниматься:)
P.S> еще раз спасибо. Я так и понял, что нужно работать с Picassa, но заморачиваться по этому поводу не стану. Пускай картинки будут кликабельны:) Ничего страшного в этом как подумал нет. А дальше посмотрим. Пока нужно статьи написать качественные. Решил сразу 3 разные темы (конкурентные:) взять в разработку.
Вот мой блог ffilosoff.org.ua
NMitra
Всегда буду рада!

Да, Светлана - молодец!

С блогом проще, он уже изначально оптимизирован под поисковые системы (хотя есть над чем поработать) и имеет готовые шаблоны.

Я тоже считаю, что ничего страшного в кликабельных рисунках нет, если их мало на странице.
Алексей Куликов
Здравствуйте!
У вас много интересной информации.

А как сделать на Блогере карту сайта, знаете?

Расскажите пожалуйста?
NMitra
Здравствуйте! Спасибо. Какую именно карту вы имеете ввиду? Sitemap или для пользователей? Для пользователей я делаю вручную. Но этот процесс можно автоматезировать. Это тема отдельного сообщения и я её затрону в ближайшее будущее.
Алексей Куликов
Думаю, будет много благодарных читателей на такую статью!
Интересует карта сайта и для ботов и для людей. На эту тему у вас получится приличный пост!
Успехов! С благодарностью,А.К.
NMitra
По вашей просьбе: http://shpargalkablog.ru/2011/03/soderzhanie-bloga-na-blogger.html
Дмитрий Bootlex
а как сделать чтобы комментарий, оставленный на blogger при помощи контакта потом не появлялся как новость на стене у оставившего?
NMitra
Думаю, что никак. В этом и заключается соль данного виджета, на что указывают и сами разработчики: http://vkontakte.ru/developers.php?o=-1&p=Comments
Clear
Помогите Я что-то наверное сделала, и у меня по последним постам нет окошка для комментириев. А для более ранних есть.
http://bestcrochetdress.blogspot.com/2011/04/shalplatiesarafan-v-ukraine.html
В каком направлении мне копаться?)))
Спасибо Вам! По Picasa все поняла и сделала.
NMitra
Нужно смотреть шаблон. Пришлите копию мне на почту: http://shpargalkablog.ru/2011/01/bezopastnost-blogger.html. Пункт 3.

Что вы делали с комментариями в последний раз?
Clear
выслала на почту. Мне кажется я ничего не делала)))) Давно только, когда от лишних ссылок избавлялась. Но, не заметила, с тех пор пропали или нет. Но тогда бы все пропали...вроде)
NMitra
Проверите, пожалуйста, настройки:
"Настройки"-"Комментарии"-"Настройка по умолчанию для комментариев в сообщениях"-"У новых сообщений нет комментариев" нужно установить на "ЕСТЬ"
Clear
Спасибо! Ума не приложу как это все поменялось))))
Хочется от души пожелать всех благ, которых вам хочется!
... А то, мы пользуемся вашей добротой, а спасибо иногда и некогда написать))
NMitra
Бывает. Как, однако, приятно получать такие отзывы!
Mileeva
А нельзя так,чтобы на главной показывалось кол-во комментариев от ВК?
NMitra
К сожалению, так не получится.
LakyFish
Может подскажете как оставить только коментарии для социальный сетей?
А стандартную убрать=)
NMitra
Подкорректировала:

Шаг.1. "Настройки"-"Комментарии"-"Комментарии"-"Скрыть"

Шаг.2. "Дизайн"-"Изменить HTML"-после <head> пишем скрипт

<script type="text/javascript" src="http://userapi.com/js/api/openapi.js?26"></script>

Шаг.3. Там же после

<div class='post-footer-line post-footer-line-3'/>

добавляем

<b:if cond='data:blog.pageType != &quot;index&quot;'>
<script type='text/javascript'>
  VK.init({apiId: ВАШ_НОМЕР, onlyWidgets: true});
</script>

<!-- Put this div tag to the place, where the Comments block will be -->
<div id='vk_comments'/>
<script type='text/javascript'>
VK.Widgets.Comments(&quot;vk_comments&quot;, {limit: 10, width: &quot;496&quot;, attach: &quot;*&quot;});
</script>
</b:if>

Предварительно нужно получить API_ID и указать его вместо ВАШ_НОМЕР.
NMitra
Подкорректировала:

Шаг.1. "Настройки"-"Комментарии"-"Комментарии"-"Скрыть"

Шаг.2. "Дизайн"-"Изменить HTML"-после <head> пишем скрипт

<script type="text/javascript" src="http://userapi.com/js/api/openapi.js?26";></script>

Шаг.3. Там же после

<div class='post-footer-line post-footer-line-3'/>

добавляем

<b:if cond='data:blog.pageType != &quot;index&quot;'>
<script type='text/javascript'>
  VK.init({apiId: ВАШ_НОМЕР, onlyWidgets: true});
</script>

<!-- Put this div tag to the place, where the Comments block will be -->
<div id='vk_comments'/>
<script type='text/javascript'>
VK.Widgets.Comments(&quot;vk_comments&quot;, {limit: 10, width: &quot;496&quot;, attach: &quot;*&quot;});
</script>
</b:if>

Предварительно нужно получить API_ID и указать его вместо ВАШ_НОМЕР.
LakyFish
Спасибо большое!у меня еще вопросик,у меня в блоге в опере как то глючит а в мозиле нормально,не пойму почему,в опере допустим хочу выбрать видео посмотреть в блоге навожу мышкой на некоторое видео и оно пропадает=)потом обновляю страницу опять есть(и еще не знаю как сделать чтоб открывать нажатием на картинку видео а не на ссылку.
NMitra
У меня нет установленной Оперы, поэтому могу только догадываться. Чтобы ролик заиграл, нужно установить проигрыватель, например, Adobe Flash Player. Про то, как добавить видео YouTube можете посмотреть здесь http://shpargalkablog.ru/2011/01/youtube.html.
clear
Про Вконтакте я даже не буду заморачиваться, т.к. читаю и не пойму ничего))))
Но, у меня в одном из блогов (шаблон, наверное такой) нет выбора Анонимный или Имя/URL. Мне бы хотя бы это. А как?
NMitra
"Настройки"-"Комментарии"-"Кто может отправлять комментарии?"-"Любой"

В виджете ВКонтакте есть неоспоримый плюс - огромная аудитория. Но вот управлять данными комментариями мне не очень удобно. Я люблю, чтобы они предварительно приходили мне на почту.
Dekameron
Блин, а что делать если при скачивании приложения vkontakte запрашивает телефон и потом ничего не присылает...(((
NMitra
Как вижу проблема уже не актуальна.
Dekameron
да, спасибо. :) уже неактуально, но еще вопрос. а где можно посмотреть кто прокомментировал страницу? уведомления никакие не приходят.
NMitra
Вот этим мне и не очень нравится этот виджет. Сверху рядом с количеством комментариев есть ссылка "администрирование".
Dekameron
ага, спасибо
Laterna Magica
Наталья, снова беспокою вас. На сей раз у меня к вам просьба: вы бы могли взглянуть на мой блог (пока в доработке, поэтому там много хлана, за что заранее извиняюсь. Тестировал текст, письмо и т.п.)

http://ostrovsvobody.blogspot.com/2011/07/blog-post_09.html#comments

И коммент-блок, и смайлы подсказанные вами, всё работает. Единственное - кнопка Вконтакте не функционирует. В чем причина? Вы бы могли посмотреть мой код? В чем ошибка? Кнопка клыкабельна, только вот ничего не раскрывается. Поможете?
NMitra
Нужно добавить скрипт библиотек prototype и scriptaculous перед </head>. См. http://shpargalkablog.ru/2010/11/poyavlyayushchiesya-commentarii.html
Laterna Magica
Всё получилось! Очень полезные статьи у вас! Спасибо вам.
Laterna Magica
А можете подсказать как добавить такую же коммент-кнопку для Фейсбука? Практически эти социальные сети (вк. и фб.) мне очень нужны, так как большая часть моей аудитории активно пользуются ими.
NMitra
Обязательно посмотрю в течении недели.
Евгения
У меня код
1 :

:

встречается два раза.... И оба раза без h4 /h4
NMitra
Можно взять другой ориентир - перед

<b:if cond='data:post.commentPagingRequired'>

Посмотрите скриншот, там часть кода выглядывает.
Евгения
Эм... Странно, но этого кода у меня тоже 2... 0_о
Евгения
Вставляю ли я по вашей рекомендации или по рекоменации официальной, всё равно выходит ошибка No application domain specified
NMitra
Евгения, вышлите мне на почту ваш шаблон, посмотрю. И уточню вопрос: вам нужно, чтобы комментарии скрывались/показывались, либо заменить блоггеровскую форму?
Евгения
А зачем заменять на переменное значение???
NMitra
Чтобы комментировались отдельные страницы, а не сайт в целом.
Евгения
У меня фэйсбуковские комментарии отказывались вставляться, блоггер указал на ошибку в шаблоне - у тега meta перед закрывающейся скобкой > надо поставить слэш /

И ещё - для Дмитрий Bootlex - отключить импорт комментарий на стену можно. Читайте здесь: http://u.to/5L8bAQ
NMitra
Да-да. Я когда себе устанавливала, на автомате добавила и позабыла в тексте статьи упомянуть. Спасибо, что обратили на это внимание.
Dan Kleshko
У меня вроде как все получается, но не понятен пункт (Для того, чтобы за кнопкой скрывалась и форма отправки комментария, увеличиваем область действия тега DIV в пункте "Шаг. 5".), не очень ясно куда-что вставлять.

Виджеты вроде бы появляются, но когда я нажимаю на кнопку, ничего не происходит(
NMitra
Нужно добавить строчки, выделенные жирным. С первой я думаю понятно, а закрывающийся тег </div> нужно добавить после кода (добавила небольшой предшествующий участок):

<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></div>

Перед этими изменениями нужно сделать ещё шаги, описанные здесь - http://shpargalkablog.ru/2010/11/poyavlyayushchiesya-commentarii.html#comment.
temasey
а как размер кнопочек изменить? :)
блог http://www.steve-o.ru
размер как в приложении 1
как не рылся в исходном коде мои любимые weight и heigh так и не нашел((
NMitra
Видите шрифт какой большой? И кнопки им под стать. Нужно перед ]]></b:skin> добавить

h4 {font-size: 105%}

Еще мне не нравится участок (CTRL+U на страницах блога с сообщениями)

<h4>
<button onclick='new Effect.toggle("poyavlyayushchiesya","appear"); return false' type="submit">
<h4>Нет комментариев.</h4>
</button>
</h4>

h4 седержит внутри себя другой h4. Оставьте внутренние, убрав внешние <h4>...</h4>
temasey
с этим h4 немного не понял...как кнопочки в ряд поставить? :)
NMitra
Нужно чтобы код одной кнопки заканчивался и начинался код другой без пробелов

<button></button><button>

Код, отвечающий за скрытие блоков можно поместить ниже. У них id разные, поэтому будут работать корректно.
XaSeR
Незнаете, а можно ли также соединить коментарии Disqus, Facebook и Вконтакте?
Почему-то каждый раз код дискуса скрывает поставленные мной кнопки :(
NMitra
В Disqus можно войти с помощью аккаунта Facebook. Честно говоря, не пробовала, там скрипты нужно разбирать.
Евгения
У меня есть страстное желание узнать, как на http://bigideas.ru/posts/1/213 реализовали отображение результатов каждого из трёх вариантов комментирования. Может, у Вас есть какие мысли?
Тимофей
А что делать если: "Внимание: нет доступа к http://www.crabmentality.ru/2011/11/no-comments_10.html."? Но сам камент оставленный из FB виден. И почему-то он не показывается в числе др. комментариев - 0 Comments - хотя я отавлял.
Тимофей
Да. Я скрытую кнопку не делал, хочется, чтобы все каменты были видны - вперемешку. Кстати, тот камент из FB ещё и на почту почему-то не пришол как уведомление.. подскажите, плз, где копать?.
NMitra
Увы, не знаю отчего возникла данная ситуация. Посмотрите в помощи FB.
Тимофей
Вот что пишет:
Object at URL 'http://www.crabmentality.ru/2011/11/no-comments_10.html' of type 'website' is invalid because the given value '{137174779719492}' for property 'fb:app_id' could not be parsed as type 'fbid'.
Тимофей
Неа, у меня так и не получилось..-((
Кривой шаблон какой-то. Но дизайн крисивый. У меня в коде нет даже h4 - пробовал др. варианты - не выходит..
Катерина
я не понимаю куда что вставлять
помогииитее
NMitra
Катерина, сохраните копию имеющегося шаблона. Можно потренироваться на тестовом блоге.

А потом попробуйте что-нибудь сделать согласно записям. Отпишитесь, я тогда смогу заглянуть в шаблон и понять что не так. А сейчас не понятно с какой стороны подойти к решению этого вопроса.

Для поиска фрагментов в коде используйте CTRL+F.

Каким редактором пользуетесь: новым или старым?
Катерина
новым редактором
я просто не понимаю куда вставлять вот эти коды
NMitra
Вкладка "Шаблон" - под "Сейчас в блоге" светлая кнопка "Изменить HTML" - кнопка "Приступить" - галочку "Расширить шаблоны виджета" - CTRL+F ищем фрагмент, который заменяем.

Скриншоты у меня в основном от старого редактора, поскольку блог ведётся уже довольно долго, а менять все тексты и скриншоты довольно затратно во времени.
Kefir
Вставил все как у вас для кнопки Вконтакте - ничего не появилось((( Жуть!
Kefir
И у Вас написано вставить код:



А на картинке еще и одна строчка добавлена... Так что же верно?
NMitra
У вас древовидные комментарии. С ними должен быть другой код. Какой и возможно ли подключение я не смотрела.
Алексей
Подскажите, пожалуйста, я подключил персональный домен к блогу на Blogger и после этого перестали отображаться все комментарии и "лайки" ВКонтакте (виджиты работают, в настройках приложения ВКонтакте изменения внес). В чем может быть проблема?
NMitra
Все предыдущие фотографии? С новыми насколько поняла всё в порядке? Тогда это вопрос к разработчикам ВКонтакте.
Pavel Badal
Здравствуйте Наталья.У меня вот такой вопрос к Вам: если я в настройках блоггера запретил коментировать некоторые статьи и запретил коментировать на определенных страницах, это касается и коментариям с аккаунтом facebook и вконтакте?
NMitra
Да, только я статью предыдущую со скриптом убрала, а эту так и не поправила. Пока это только полуфабрикат, который нельзя толком использовать.
XamBacker
Здравствуйте, после прочтения вашего блога решил завести свой. У меня не срабатывает скрипт комментариев ВК хотя я все сделал по инструкции. В чем может быть проблема?
XamBacker
Комментарии вообще пропали...
NMitra
Здравствуйте, этот пост давно был написан, возможно за это время что-то изменилось. Попробуйте найти более свежий материал, а внесённые изменения в шаблон уберите. Извините, что пометку об этом не установила раньше.
Unknown
No application domain specified. Вставляла всё правильно:(
NMitra
См. красная отметка перед статьёй и предыдущий комментарий