Или как правильно сделать своими руками комментарии Вконтакте и Facebook?
Привет друзья! Как Вы наверно заметили, я какое-то время не писал в своем блоге. У меня есть вполне уважительная причина — скажу в конце этого поста! А пока, я решил поставить на свой блог комментарии Вконтакте и Facebook.
Кто-то может подумать — а что тут интересного??? Весь интернет пестрит подобными статьями. Не спешите!!!
Фишкой этой статьи будет правильная установка комментариев facebook. Дело в том, что по умолчанию установленные комментарии фейсбук в блогах на worpdress, дают не очень хороший эффект. А именно, комментарии фейсбук печатаются один за другим для разных статей, т.е. вы заходите в разные статьи, а там везде вылезают все комментарии фейсбук в одну кучу. Я подумал в чем засада? И при помощи своей смекалки и интернета — решил этот вопрос! 🙂 Ну, давайте — обо всем по-порядку!
Перехожу на страницу разработчиков Вконтакте — Виджет для комментариев и нажимаю подключить новый сайт. Заполняю все необходимые поля на свое усмотрение, в любой момент можно изменить все параметры. И собственно, получаю код для вставки комментариев Вконтакте на свой блог.
Тут всё предельно просто! Копирую верхнюю часть кода и вставляю ее между тегами <head> и </head>. Обычно в блогах на wordpress, эти теги расположены в файле header.php, открываю редактор и вставляю эту часть кода.
<script type="text/javascript" src="//vk.com/js/api/openapi.js?67"></script>
<script type="text/javascript">
VK.init({apiId: 2408684, onlyWidgets: true});
</script>
Копирую нижнюю часть кода и вставляю ее после стандартных комментариев в статьях. У меня на блоге комментарии находиться в в файле comments.php, вставляю и сохраняю файл.
<div id="vk_comments"></div>
<script type="text/javascript">
VK.Widgets.Comments("vk_comments", {limit: 10, width: "496", attach: "*"});
</script>
Открываю любую статью на своем блоге для проверки — как работают мои комментарии Вконтакте.
Честно говоря, сначала хотел поставить комментарии Вконтакте до основных комментариев, но решил — пусть сначала будут основные комментарии, а уже за ними комментарии Вконтакте и комментарии Фейсбук.
Теперь комментарии Вконтакте уже работают на моем блоге, надо поставить комментарии Фейсбук. Для этого я захожу на страничку разработчиков Facebook, и если Вы еще никогда не создавали приложений на Фейсбуке, то создайте впервые, нажав -> + Создать новое приложение (там нужно пройти несколько простых шагов).
Обратите внимание на этот шаг, Вы знаете у меня несколько блогов, так вот, я не стал заострять внимание и регистрировать новое приложение. А вот, когда писал продолжение этой статьи, понял что ошибался, надо регистрировать приложение и получать API ID для каждого своего сайта!
У меня приложение уже создано, поэтому, я перехожу непосредственно на страницу виджета комментариев Facebook. Заполняю параметры и нажимаю на кнопку get code, для получения моего кода комментариев Фейсбук.
Получаю код, там написано на английском, что верхнюю часть кода в идеале нужно вставить сразу после открытия тега <body>, опять иду в header.php, где вставляю верхнюю часть кода как рекомендовано.
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/ru_RU/all.js#xfbml=1&appId=117292025077287";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
А вот нижнюю часть кода копирую, и дабы исправить неприятную оплошность — комментарии facebook по умолчанию на некоторых системах управления контентом, в частности вордпресс, имеют свойство записываться под одним URL. Т.е. другими словами, комментарии фейсбук записываются не для каждой статьи отдельно, а сливаются все в одну кучу. С такими свойствами многие люди отказываются ставить себе комментарии фейсбук. А ведь лекарство оказалось таким доступным!!! 🙂
Чтобы комментарии фейсбук не сливались в одну кучу, а были для каждой страницы блога в отдельности — для блогов на wordpress достаточно заменить в нижней части кода URL своего блога (в моем случае — http://howmakeit.ru) на php код из кодекса worpdress (<?php the_permalink(); ?>), который вызывает текущую страницу блога.
В итоге, получаю исправленный код для моих комментариев facebook.
<div class="fb-comments" data-href="<?php the_permalink(); ?>" data-num-posts="2" data-width="500"></div>
UPD: Недавно нашел еще одно решение, как отображать комментарии facebook для каждой страницы, для сайта на любой платформе, которая поддерживает PHP — код.
<div class="fb-comments" data-href="http://<?php echo $_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']; ?>" data-width="470" data-num-posts="2"></div>
Данный код вставляю в файл comments.php, прямо под кодом комментариев Вконтакте, чтобы не слипались добавляю между ними тег межстрочного пробела <br>. Проверяю работоспособность моих комментариев в фейсбуке. Всё на месте, всё работает! Теперь комментарии Вконтакте и Фейсбук на моем блоге выглядят вот так:
Вроде бы вполне гармонично смотрятся. Но у меня есть идея — а что, если совместить оба виджета комментариев Вконтакте и Фейсбук в один виджет с переключением в виде кнопочки. Дорогие читатели, я постараюсь это сделать! И в следующей статье опишу как можно сделать комментарии Вконтакте и Фейсбук — два в одном! 🙂
Помните, в начале статьи я сказал, что у меня был очень важный повод чтобы не заниматься своим блогом…
Ура товарищи!!! Можете меня поздравить — я впервые в жизни стал папой!!! :))) И первую неделю жизни нашей дочери, которую мы назвали Ярослава — я посвятил целиком ей! 🙂 Читайте — 1+1=3. Рожденная в путешествии. Кстати, по аналогии с шапкой этого блога, мы с моей Наташей нарисовали карандашом новую шапку нашего блога о путешествиях и разукрасили ее в фотошопе. 🙂 На этой оптимистичной ноте я заканчиваю свою сегодняшнюю статью.
Все понятно! А вот насчет получаться надеюсь со временем получится!:)БлагоДарю Саша дорогой!
Да, мама, можешь поставить на свой блог комментарии Вконтакте и Фейсбук, если есть вопросы — помогу!
Можно ли его подключить через локальную сеть? То есть через денвер пока что делаю сайт, хочу пока на хостинг не залил сделать.
Руслан, на Денвере можно сделать пока форму, чтобы она работала, первые коменты от вордпресс будут работать, а код вконтакте и фейсбук на локалке вставлять бесполезно… Там просто будет пусто… до переноса на реальный хостинг.
Спасибо за разъяснение. Более подробного и не ожидал. Заметил что в вашем блоге просто заголовок. Как мне поставить шапку изображение в верхнюю часть? Дело в том что в шаблоне не было шапки, она просто окрашена в серый цвет. Вот записи в стиле, именно касательно шапки:
#nav{z-index:5;position:relative;height:31px;padding-top:80px;clear:both; background:#454546; }
Этот код нав как раз таки и окрашивает шапку и размер задает.
А вот хедер:
#header{overflow:hidden;z-index:1;position:relative;margin:30px auto; }
#header h1{float:left;padding:0 0 0 10px;text-shadow:1px 1px 1px #999;font-size:28px;font-family:Georgia,»Times New Roman»,Times,serif;}
#header h1 a{color:#222;line-height:36px;}
#header h1 a.header_logo{overflow:hidden;display:block;width:640px;height:36px;text-indent:-9999px; }
#header h2{float:left;height:20px;overflow:hidden;line-height:18px;padding:10px 0 0 20px;color:#222;font-size:12px;font-weight:normal;text-shadow:0 1px 0 #fff;}
#header_image{width:952px;height:182px;margin:30px 0 0;padding:3px;border:1px solid #ccc; }
#header_image_border{overflow:hidden;width:950px;height:180px;background:#565657; border:1px solid #fff;}
Где вставлять ссылку и как уже не знаю. Пробовал много. Картинка уже в папке и прописывал путь вот так :background url (‘/images/header.jpg’)
В чем может быть проблема?
У меня тоже картинка в шапке, я сам вставил, вот мои каракули по разработке блога… 🙂 Вставлять не пробовал не в файле стиля… а в header.php? Я лично там вставил спокойно! 🙂 Даже если не получается просто, можно пойти сложным путем — через стиль по аналогии, как я вставил социальные кнопки в шапку своего сайта… Там их тоже, заранее никто не прописывал — вот здесь читай: http://howmakeit.ru/kak-sdelat-socialnye-knopki-v-shapke-bloga/
Все сделал. Оказывается все просто. Мой шаблон не имел до этого шапки. Просто пришлось прописать путь к логотипу в Header.php, после чего подкорректировать в Style.css. Спасибо.
Sun Sunich, не подскажешь решение следующей проблемы?
У меня на блоге одни и те же комментарии отображаются на всех страницах блога!
Более того, комментарии от фейсбука аналогично отображаются, хотя я их лечил по тому же методу, что ты описал. Ума не приложу, что можно сделать, чтобы исправить это.
Помоги, пожалуйста!
Антон, у тебя же блог на вордпресс, в нижнем (втором коде от фейсбук меняешь доменное имя своего блога на < ?php the_permalink(); ?> И всё будет работать!
А, сегодня или завтра я выпущу статью продолжение про комментарии, где расскажу, как я сделал три в одном. 🙂 Как ты сейчас можешь видеть! 🙂
Нет, ты меня не правильно понял. Объясню подробнее. Я написал статью, к ней оставили 6 комментариев wordpress и один фейсбук. В итоге все эти комментарии отображаются под пятью последними моими статьями. Как это вышло — я не знаю. Но вылечить никак не могу. 🙁
Антон, есть два варианта, либо нарушен код файла отвечающего за комментарии. Лекарство простое — берешь свою тему изначальную и меняешь файл comments.php Если такого файла нет, то надо искать в каком файле прячутся комментарии, и менять его. Второй менее хороший вариант — это база данный шалит… выдавая только одни комменты… Ну давай, сначала попробуй по первому варианту исправить ошибку с комментариями! 😉 Если есть вопросы пиши.
Саня, у меня тема содержит функцию комментариев в файлах comments.php и functions.php. Заменял оба файла на новые файлы из изначальной темы. Не помогло. А с базой данных я на конкретное ВЫ. Даже боюсь туда лезть, чтобы еще хуже чего не сделать…
Антон — я еще не на столько экстрасенс… :))) Давай, наделяй меня временно правами админа… Обещаю — хуже не сделаю, но попытаюсь помочь! Скинь мне в личку — alexstudia@yandex.ru
Саня, ну как, есть шансы исправить проблему?
Антон, не видя кода — сложно сказать… Шансы всегда есть… Даже базу данных хостинг обычно бекапит! 🙂
А что, он не виден?
нет, внутренний код водпресс можно только через админку или фтп увидеть… А внешне он просто html выдает… Там ошибку разглядеть сложно…
Так я же скинул на почту логин с паролем…
А на индексацию страницы эта тема имеет какое нибудь значение? Например статья получилось клевая и её комментируют из соц сетей, эта страница как скоро появиться в индексе?
Саша, у хорошего сайта индексация происходит за сутки максимум, даже если комментариев нет совсем. У меня по крайней мере все три блога через сутки — другие уже в поиск попадают. Как я их настраивал — пишу как раз на этом сайте, можно почитать с первых статей.
Скажите, а может из за плагинов яндекс не индексировать?
Не знаю я таких плагинов… но если Вы не знаете — что именно делает плагин… или не уверены в функционале seo плагинов — я бы не рекомендовал их использовать. Я на всех свои трех проектах стараюсь использовать плагины по минимуму. Чтобы прописалось хорошо, один блог создавал недавно, он за попал в поиск яндекса и гугла… Я не делал ничего особенного кроме описанного в этой статье — http://howmakeit.ru/kak-propisat-sajt-v-poiskovyx-sistemax-chast-1/
Здравствуйте, Sun Sunich! Очень понравилась статья. Можете ли подсказать, как реализовать решение этой проблемы на движке Blogger? Что можно прописать вместо ? Т.к. «комменты в кучу» делают это приложение facebook бестолковым :(. Спасибо заранее!
Не прописалась строка замены URL своего блога на () Что можно прописать вместо него на Blogger? Спасибо еще раз 🙂
Таня, к сожалению, я не нашел ничего подходящего… Единственное что могло бы помочь, попробовать вызвать линк данной страницы c помощью javascript. Только это надо испытывать на блоге. Но такой скрипт надо еще найти…
Самое большее меня интересует как сделать нормальную форму регистрации на сайте без плагинов. Возможно ли такое? Или всплывающее, но чтобы каптча была. Извините, если слишком много вопросов задаю.
Руслан, а без формы регистрации никак… Для чего она вам??? Опишите ее смысловую нагрузку… Я сам не ставил никогда перед собой задачи сделать форму регистрации… Если хотите меня нанять как фрилансера, я могу этим заняться!
Конечно опишу. Она помогает очистить ресурс от ботов, вот и все. Если не будет регистрации с каптчей, то боты будут спамить на сайте.
Руслан, я могу порадовать, смотрите у меня три блога, и не одного спам-бота в комментах нет… и не будет! При этом, я не повесил капчи и тем более регистрацию… меня же комментировать с такими минными полями никто не будет!!! Есть простой плагин NospamNX я здесь про него писал — http://howmakeit.ru/chto-takoe-plaginy-wordpress/
Таня, я в блогспоте не практикую… сейчас попробую поискать, чем там выражается обычно строка…
Sun Sunich, огромное спасибо за участие и уделенное время! Жаль, хотелось бы использовать, но тоже не могу ничего найти из реализованных решений, а в программировании не сильна 🙁 Спасибо еще раз.
Команда у меня не срабатывает.. Из вкладки исчезает форма комментария. С адресом сайта — работает..
Разобрался! Спасибо! Пропустил кавычки..
Вова, я рад, что у тебя получилось! 😉
Снимаю шляпу и низко кланяюсь автору блога.
Видел бы кто неоднократную тщетность моих жалких попыток установить эти формы комментариев соцсетей.
Плюс: перечитал немало постов об этом. Почти все не точно указывают: куда вставлять коды, а смотреть заумные видеоуроки на 15 минут — жалко времени.
Однако, и сейчас я провозился добрых полдня. Когда ставил форму из «В Контакте» неверно указал домен. В конце-концов пришлось регистрировать как «новый сайт» коды новой формы.
Информация же про подправку формы Фейсбука — вообще — уникальна. Действительно, многие отказываются устанавливать код этой соцсети. А ларчик,оказывается, просто открывался.
Я посмотрю еще, если комменты будут уж слишком длинными, то еще и скомпоную их всех вместе, как советует уважаемый автор в своей следующей статье.
В общем, спасибо большое, здоровья, удачи! Дочурке — расти на радость маме и папе!!!
Василий, спасибо за добрые слова. Я стараюсь написать свои статьи — как подсказки для себя самого… И конечно, рад, что людям они тоже помогают! 🙂 Если будут вопросы — буду рад помочь. Каждая новая решенная проблема — это бесценный опыт! 🙂
Да, кстати, Александр, после установки формы «Фейсбука», ниже него, на сайте: встала ссылка «Социальный плагин Фейсбук». Мне лично лишняя внешняя ссылка — абсолютно не нужна. Хотел ее вырезать, а она прописана в самом скрипте, без указания ссылки вида «аш реф». Можно ли эту ссылку удалить как-нибудь? Или это — обязательная плата на установку самой формы?
Заранее благодарен за ответ.
Василий, сам думал, как бы ее убрать ссылку на фейсбук. И тут пришло озарение — посмотрел html код своих страниц, я не нашел ссылки в виджете на страницы фейсбук. Т.е. это не настоящая ссылка… это муляж, который поисковики не видят. Хотя, фейсбук, википедия, и другие мощные трастовые сайты, никогда Вам и Вашему сайту хуже не сделают, даже открытой ссылкой. Гугл даже наоборот приветствует открытые ссылки на мощные сайты, может повысить и ранг Вашего. 🙂
Очень полезная стать!!!! Спасибо огромное!!!
У меня вопрос, как можно получить событие о том что коментарий на Facebook добавлен? Например для Вконтакта я это сделал так:
VK.Widgets.Comments(«vk_comments», {limit: 10, width: «600», attach: «*»});
VK.Observer.subscribe(‘widgets.comments.new_comment’, function(num, last_comment, date, sign)
{
alert(‘комментарий добавлен’);
}
Есть ли аналогичные события у Facebook?
Спасибо! 🙂 Я в фейсбуке еще сам так глубоко не рыл… Вообще в фейсбук разработчикам можно поискать описание функций.
Здравствуйте, спасибо за статью. вопрос есть — в комментариях facebook — можно ли убрать как то в настройках галочку, которая по умолчанию выставленна, чтобы не публиковались все комментарии в facebook сразу?
Евгений, я проштудировал страничку разработчиков, описание не обнаружил. Еще есть страница с ответами фейсбук на вопросы пользователей, там их много и они на английском, я почитал несколько минут и не нашел. Можете попытаться — http://facebook.stackoverflow.com/search?q=%5Bfacebook%5DComments
Большое спасибо за участие. и за ссылку, поищу там ответ)
Всегда рад помочь! Там столько всего интересного пишут по этой ссылке… Разработчикам фейсбук есть о чем рассказать.
Здравствуйте, хотел бы узнать, можно ли файл «widget_comments.css» , который подгружается при загрузки сайта с сервера Вконтакте как то залить к себе на хостинг, или оно того не стоит?
Сам не пробовал, но видел результаты, когда на блогах фирменный стиль Вконтакте меняют на свой, включая цвета и размеры, думаю, не без помощи css. 🙂
Уже пере хотелось, и так пойдет, как сейчас все устроил на сайте.
Сегодня маялся, устанавливая гугл поиск, полезная штука-получше стандартного поиска в вордпрессе.
Для некоторых виджетов ВКонтакте предусмотрена возможность менять цвет и стили определенных элементов. В разделе для вебмастеров ВКонтакте есть соответствующий сервис.
Классно!!! Спасибо за такую стать доходчивую 🙂 Первую часть выполнила. Теперь буду все в кучу собирать, чтобы «кнопочками переключалось»
До меня долго доходило где искать файл Header.php. Поясню для таких, как я – он в консоли вордпресса => Внешний вид => Редактор, и в нем справа колонка с шаблонами. Там и комментарии.
Может быть я не так часто пишу на этом своем блоге, он у меня не один, но отвечаю на комментарии всегда. Поэтому, задавайте вопросы, я постараюсь пояснить.
Помните, как кто-то сказал, что глупых вопросов не бывает… Не стесняйтесь! 😉
Здравствуйте,
Большое спасибо за ценную информацию! Я уже поставил социальные кнопки. Теперь думаю установить систему комментариев, как Вы описали.
У меня несколько вопросов, может и глупый..
Эти комментарии будут ли отображаться например на Facebook тоже?
У нас мультиязычный сайт и конечно несколько пользователей. Сын например пишет на французском и конечно мы хотим чтобы комментарии появлялись у него на страничке в Facebook тоже, я пишу на русском и чуть на английском — возможно ли чтобы комментарии также появлялись у меня на Facebook тоже. Т.е. три языка на сайте и два аккаунта. Будет ли работать система? Я запутался…
Возможно ли чтобы комментарии из одноклассников тоже отображались?
Привет Александр, да комментарии не привязаны к языку, хоть на китайском, было бы желание, и да, фейсбук будет отражать комментарии на странице комментатора. Одноклассники при желании тоже можно поставить, надо просто поднять их документацию по установке комментариев.
Большое спасибо за оперативный ответ!
Я подумал, в принципе нормально с языками.
Я не буду создавать (регистрировать) приложения на фейсбуке, это многое упрощает, правда не знаю чем это грозит…
У меня появилась еще проблема — комментарии от фейсбука появились на страницах, а я хотел только на «записях», в идеале конечно там где комментарии разрешены. Это я что-то напутал с размещением кодов? Или это нельзя отрегулировать?
Заранее спасибо за ответ.
Проблему с появлением на страницах, можно решить следующим образом — вложить файл с кодом комментариев не в comments.php, а прямо в нужное место single.php (запись) и page.php (страница). И соответственно, в странице код поменять на нужный.
А можно по подробней обо всём? У меня вот не работает виджет от ВК, от ФБ не пробовал. Это может быть связано с тем, что блог пока весит на локальном хосте? И ещё, как теперь удалить с ВК, то что я там написал при получении кода вставки на сайт. Спасибо.
Люди забавные, зачем Вас на локальном хосте виджет комментариев из соц. сетей? 🙂 И зачем удалять что-то с ВК, там под каждую конкретную задачу код получаете и все.
Забавный человек, я задал конкретные вопросы! Расчитывал получить ответы на них, а не размышления на тему: а зачем на локальном хосте виджет комментов вконтакте!
На локалхосте никогда не испытывал запускать виджеты соц. сетей, по второму вопросу — я вам ответил, что не надо там ничего удалять. Эти данные не для чего больше не используются. Если Вы заводите новый сайт, получаете — новый код вконтакте.
Спасибо за очень полезную статью! Сделал на своем сайте как у вас. Правда не получалось комментарии от контакта поставить, потом заметил, что напортачил когда настраивал виджет от контакта. Экспериментировал с оформлением вкладок, но пока лучше чем у вас не подобрал.
Александр, здравствуйте. У меня вопрос неприличный 🙂
Не много ли чести Контакту, чтобы его код аж в хедере красовался? Можно ли его куда-нибудь пониже определить, чтоб работало? А то Педж Спид итак ругается на объем кода в хедере…
Правильный вопрос — Надежда, надо написать мне статью, как его в футер опустить. 🙂 Есть у меня одно решение. Если вкратце, то перед самым закрытием body вставляем примерно следующий код:
Соответственно, прописывая нужные коды асинхронной загрузки всех соц. сетей. Я так делаю на других своих проектах. Решение есть в сети, если что не понятно, или спрашивайте. 🙂
есть кто живой пишу и тут и фейсе????????????????????
Я регулярно отвечаю на комментарии, что так кричать?
Здравствуйте, скажите пожалуйста, а можно ли как то поставить комментарии одноклассников на сайт?
Спасибо! Добавила в код и комментарии стали отображаться для каждого поста свои.
Да, если все правильно настроить, то фейсбук поддается. Ну, вот недавно на своем трэвел блоге переехал на новый домен. И фейсбук перестал администрировать комментарии, придется новый API создавать наверное, но при этом, все старые комментарии удалятся.
Понятно, большое спасибо за помощь в этом вопросе.
—-
Купить домик в деревне в испании недорого