ВНИМАНИЕ: СТАТЬЯ УСТАРЕВШАЯ, ТРЕБУЕТСЯ В ДОРАБОТКЕ!!!
Что сделать, чтобы комментировать блог могли пользователи социальной сети?
Самым простым решением является использование варианта в форме комментария.
С другой стороны, у ряда крупных социальных сетей есть возможность устанавливать виджеты отзывов на сторонний сайт. Объединить обе формы комментариев мне не удалось, а вот совместить их вполне возможно. Результат моих изысканий вы можете посмотреть в Приложении 1.
Содержание.
- Кнопка скрыть/показать.
- Как добавить комментарии "В Контакте" на блог.
- Как добавить комментарии "Facebook" на блог.
Кнопка скрыть/показать.
Перед установкой сторонних комментариев нужно создать кнопку "скрыть/показать" для существующей формы отзывов.
Как добавить комментарии "В Контакте" на блог.
Шаг 1. Как узнать свой API_ID.
- Заходим на страницу "Создать приложение". Заполняем графы: "Название" и "Тип"-"Веб-сайт". Жмём кнопку "Перейти к загрузке приложения".
- На вкладке "Настройки" заполняем строчки "Адрес сайта" и "Базовый домен". Сохраняем изменения. Там же указан "ID приложения". Или его можно узнать из строки браузера: http://vk.com/editapp?id=0000000. Нули это и есть ваш номер API_ID.
 |
| Узнать свой API_ID В Контакте. |
Шаг 2. Заполнение формы виджета.
На странице "Виджет для комментариев" указан код для вставки.
 |
| Код добавления виджета "В Контакте". |
После
<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("poyavlyayushchiesya_kontact","appear"); 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("vk_comments", {limit: 5, width: "480", attach: "*"});
</script></div>, где API_ID - это ваш идентификационный номер. Как его узнать рассказано выше.в тег <button>...</button> включены код изображения (
) и слово "Комментарии". Это содержимое кнопки, их вы можете поменять на свой вкус.в тег <div id='poyavlyayushchiesya_kontact' style='display: none;'>...</div> включен скрипт формы отзывов "В Контекте", чтобы данный блок исчезал/появлялся.
 |
| Как добавить комментарии "В Контакте" на блог Blogger. |
Как добавить комментарии "Facebook" на блог.
- На странице "Comments" заполняем форму.
- Нажав на кнопку "Get code", копируем полученный код.
- Первую часть которого
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
вносим в шаблон Blogger на вкладке "Дизайн"-"Изменить HTML" сразу после<body>
в некоторых шаблонах код может выглядить иначе, например:
<body expr:class='"loading" + data:blog.mobileClass'>:
- Во второй части
<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("poyavlyayushchiesya_facebook","appear"); 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>
- И, последнее. Указываем перед </head> с помощью мета-тегов администратора комментариев
<meta property="fb:app_id" content="{YOUR_APPLICATION_ID}"/>- Обязательно добавить слэш (символ /).
- Для того, чтобы узнать {YOUR_APPLICATION_ID} переходим на эту страницу.
- Кнопка справа сверху "Создать новое приложение".
Здесь могут попросить подтверждение на телефон. Отправляем номер и несколько часов ждём смс с подтверждающим кодом.
75 комментариев:
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.
Если будет непонятно, спрашивай.
Свой блог о заработке только начинаю. Вот думаю, что лучше, вести блог или создавать конкретный сайт - пока не решил. Есть блог с посещаемостью 200 уников, но блин школота. Надо чем-то серьезным начинать заниматься:)
P.S> еще раз спасибо. Я так и понял, что нужно работать с Picassa, но заморачиваться по этому поводу не стану. Пускай картинки будут кликабельны:) Ничего страшного в этом как подумал нет. А дальше посмотрим. Пока нужно статьи написать качественные. Решил сразу 3 разные темы (конкурентные:) взять в разработку.
Вот мой блог ffilosoff.org.ua
Да, Светлана - молодец!
С блогом проще, он уже изначально оптимизирован под поисковые системы (хотя есть над чем поработать) и имеет готовые шаблоны.
Я тоже считаю, что ничего страшного в кликабельных рисунках нет, если их мало на странице.
У вас много интересной информации.
А как сделать на Блогере карту сайта, знаете?
Расскажите пожалуйста?
Интересует карта сайта и для ботов и для людей. На эту тему у вас получится приличный пост!
Успехов! С благодарностью,А.К.
http://bestcrochetdress.blogspot.com/2011/04/shalplatiesarafan-v-ukraine.html
В каком направлении мне копаться?)))
Спасибо Вам! По Picasa все поняла и сделала.
Что вы делали с комментариями в последний раз?
"Настройки"-"Комментарии"-"Настройка по умолчанию для комментариев в сообщениях"-"У новых сообщений нет комментариев" нужно установить на "ЕСТЬ"
Хочется от души пожелать всех благ, которых вам хочется!
... А то, мы пользуемся вашей добротой, а спасибо иногда и некогда написать))
А стандартную убрать=)
Шаг.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 != "index"'>
<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("vk_comments", {limit: 10, width: "496", attach: "*"});
</script>
</b:if>
Предварительно нужно получить API_ID и указать его вместо ВАШ_НОМЕР.
Шаг.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 != "index"'>
<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("vk_comments", {limit: 10, width: "496", attach: "*"});
</script>
</b:if>
Предварительно нужно получить API_ID и указать его вместо ВАШ_НОМЕР.
Но, у меня в одном из блогов (шаблон, наверное такой) нет выбора Анонимный или Имя/URL. Мне бы хотя бы это. А как?
В виджете ВКонтакте есть неоспоримый плюс - огромная аудитория. Но вот управлять данными комментариями мне не очень удобно. Я люблю, чтобы они предварительно приходили мне на почту.
http://ostrovsvobody.blogspot.com/2011/07/blog-post_09.html#comments
И коммент-блок, и смайлы подсказанные вами, всё работает. Единственное - кнопка Вконтакте не функционирует. В чем причина? Вы бы могли посмотреть мой код? В чем ошибка? Кнопка клыкабельна, только вот ничего не раскрывается. Поможете?
1 :
:
встречается два раза.... И оба раза без h4 /h4
<b:if cond='data:post.commentPagingRequired'>
Посмотрите скриншот, там часть кода выглядывает.
И ещё - для Дмитрий Bootlex - отключить импорт комментарий на стену можно. Читайте здесь: http://u.to/5L8bAQ
Виджеты вроде бы появляются, но когда я нажимаю на кнопку, ничего не происходит(
<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.
блог http://www.steve-o.ru
размер как в приложении 1
как не рылся в исходном коде мои любимые weight и heigh так и не нашел((
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>
<button></button><button>
Код, отвечающий за скрытие блоков можно поместить ниже. У них id разные, поэтому будут работать корректно.
Почему-то каждый раз код дискуса скрывает поставленные мной кнопки :(
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 - пробовал др. варианты - не выходит..
помогииитее
А потом попробуйте что-нибудь сделать согласно записям. Отпишитесь, я тогда смогу заглянуть в шаблон и понять что не так. А сейчас не понятно с какой стороны подойти к решению этого вопроса.
Для поиска фрагментов в коде используйте CTRL+F.
Каким редактором пользуетесь: новым или старым?
я просто не понимаю куда вставлять вот эти коды
Скриншоты у меня в основном от старого редактора, поскольку блог ведётся уже довольно долго, а менять все тексты и скриншоты довольно затратно во времени.
А на картинке еще и одна строчка добавлена... Так что же верно?