Вы здесь
Главная > Мой блог > WEB-разработка > Как установить на сайт комментарии от Вконтакте и FaceBook

Как установить на сайт комментарии от Вконтакте и FaceBook

В большинстве случаев блогеры размещают форму комментариев вконтакте и facebook в таком виде:


Самый легкий способ монетизировать блог
При таком расположении виджетов страница блога растягивается на “километры”, что очень сильно затрудняет доступ к основным комментариям. А это “не есть ГУД”.

В этом посте я покажу вам как сделать “скомбинированные” комментарии от Вконтакте и FaceBook, которые будут занимать минимальное место на странице и при этом будут легкодоступны.

Вот так:


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

Самый легкий способ монетизировать блог
Как вы видите на одной вкладке виджета комментарии от Вконтакте, на другой от FaceBook (возможно вы заметили, что в комментариях от FaceBook присутствует “Интерфейс модератора”, я расскажу вам как это можно сделать).

Удобно? Не правда ли?

Итак, начнем.

Создание виджета со вкладками

Создавать виджет со вкладкми мы будем простым добавлением трех элементов кода к нашему блогу.

В примерах я ставлю комментарии вконтакте на сайт wordpress. Думаю для других движков процедура аналогична.

1. Вставьте приведенный ниже код между тегами HEAD/HEAD (в вордпресс вы можете найти этот тег в файле header.php)

Этот код еще можно вставить в файл style.css, но я решил, что мы обойдемся бес сложностей.

2. Теперь подключаем скрипт. Вставьте приведенный ниже код между тегами HEAD/HEAD

3. Теперь осталось только добавить на страницу саму форму. Делается это нижеприведенным кодом (данный код вставьте туда где бы вы хотели выводить комментарии от соц. сете, например я вставил свой код в файл single.php)

У вас должна получиться пустая форма.


Самый легкий способ монетизировать блог
Теперь давайте перейдем к добавлению самих виджетов комментирования.

Добавление комментариев от Вконтакте

1. Переходим по этой ссылке – http://vkontakte.ru/developers.php?oid=-1&p=Comments

2. Заполняем все необходимые поля


Самый легкий способ монетизировать блог
3. Копируем верхнюю часть кода и вставляем ее между тегами HEAD/HEAD


Самый легкий способ монетизировать блог
4. Копируем нижнюю часть кода и вставляем ее в первое поле созданного ранее виджета со вкладками


Самый легкий способ монетизировать блог
Таки образом код вывода комментариев должен выглядеть так:

 

Добавление комментариев от FaceBook

Теперь давайте поставим на блог форму комментариев facebook. С комментариями от FaceBook немного сложнее. Перед тем как мы будем устанавливать код выполните вход в свой профиль на FaceBook.

1. Переходим на страницу разработчиков в FaceBook – http://www.facebook.com/developers

2. Нажимаем кнопку “Создать новое приложение”


Самый легкий способ монетизировать блог
3. Придумываем имя приложения, соглашаемся с условиями использования, нажимаем кнопку “Продолжить”


Самый легкий способ монетизировать блог
4. Вводим проверочный код, нажимаем кнопку “Отправить”

5. Вводим номер своего телефона , после получения проверочного кода вставляем его в необходимое поле

6. После того как вы ввели проверочный код, вы попадете на страницу приложения. На этой странице ОБЯЗАТЕЛЬНО скопируйте ID приложения


Самый легкий способ монетизировать блог
7. Внизу страницы нажмите на поле “Сайт” и введите адрес своего сайта


Самый легкий способ монетизировать блог
8. Нажмите кнопку “Сохранить изменения”

9. Теперь переходим по этой ссылке – http://developers.facebook.com/docs/reference/plugins/comments/

10. Заполняем все необходимые поля, нажимаем кнопку “Get Code”


Самый легкий способ монетизировать блог
11. Копируем код из первого поля и вставляем его в блог между тегами BODY/BODY


Самый легкий способ монетизировать блог
12. Копируем код из второго поля и вставляем его во второе поля созданного ранее виджета со вкладками.

Ваш код должен выглядеть так:

Если у вас блог на движке WordPress, то вносим в коде еще одно изменение. Вместо адреса вашего сайта вставляем строчку –

Теперь ваш код должен выглядеть так

Ну вот в принципе и все, теперь на вашем блоге установлена красивая форма комментариев от социальных сетей.

Источник: http://gavrilov.enterbook.ru

Добавить комментарий

Top