Актуально для версії 2.9
завдання:
Додати для користувачів можливість залишати коментарі на сайті через соціальні мережі ВКонтакте і Facebook.
рішення:
Для вставки віджетів коментарів будемо використовувати API даних соціальних мереж. На початку нам потрібно отримати код віджетів для вставки на сайт. Отримати код для ВКонтакте можна тут , А для Facebook - тут .
ВКонтакте дозволяє налаштувати кількість коментарів, включити розширені коментарі (графіті, фотографії, аудіо, відео, сссилкі), вказати ширину блоку з коментарями.
Для віджету коментарів Facebook можна вказати кількість коментарів, ширину блоку з коментарями і колірну схему (світла, темна).
Налаштування віджетів коментарів ВК і FB
Facebook генерує код для вставки після натискання кнопки "Get code", ВКонтакте робить це динамічно. Шаблон виведення коментарів за замовчуванням знаходиться в файлі "/tpls/comments/default.tpl", згенерований javascript код необхідно вставити в блоки "comments_block_add_user" і "comments_block_add_guest". В результаті дані блоки будуть виглядати приблизно так:
$ FORMS [ 'comments_block_add_user'] = <<< ADD_FORM_USER <form method = "post" action = "% action%"> <table cellspacing = "5" cellpadding = "0" border = "0"> <tr> <td > Тема коментаря: <br /> <input type = "text" name = "title" size = "50" style = "width: 350px;" class = "textinputs" /> </ td> </ tr> <tr> <td> Текст коментаря: <br /> <textarea id = "message" name = "comment" style = "width: 350px; height: 120px ; " class = "textinputs"> </ textarea> </ td> </ tr> <tr> <td>% smiles% </ td> </ tr> <tr> <td> <input type = "submit" value = "Додати коментар" /> </ td> </ tr> </ table> <! - Put this script tag to the <head> of your page -> <script type = "text / javascript" src = "http : //userapi.com/js/api/openapi.js? 50 "> </ script> <script type =" text / javascript "> VK.init ({apiId: 2904314, onlyWidgets: true}); </ Script> <! - Put this div tag to the place, where the Comments block will be -> <div id = "vk_comments"> </ div> <script type = "text / javascript"> VK.Widgets .Comments ( "vk_comments", {limit: 10, width: "496", attach: "*"}); </ Script> <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"; fjs.parentNode. insertBefore (js, fjs);} (document, 'script', 'facebook-jssdk')); </ script> <div class = "fb-comments" data-href = "http://www.example.com "data-num-posts =" 5 "data-width =" 470 "> </ div> </ form> ADD_FORM_USER; $ FORMS [ 'comments_block_add_guest'] = <<< ADD_FORM_GUEST <form method = "post" action = "% action%"> <table cellspacing = "5" cellpadding = "0" border = "0" width = "100%" > <tr> <td nowrap = "nowrap"> Тема коментаря: <br /> <input type = "text" name = "title" style = "width: 350px;" class = "textinputs" /> </ td> </ tr> <tr> <td nowrap = "nowrap"> Ваш нік: <br /> <input type = "text" name = "author_nick" style = "width: 350px; " class = "textinputs" /> </ td> </ tr> <tr> <td nowrap = "nowrap"> Ваш e-mail: <br /> <input type = "text" name = "author_email" style = " width: 350px; " class = "textinputs" /> </ td> </ tr> <tr> <td nowrap = "nowrap"> Текст коментаря: <br /> <textarea id = "message" name = "comment" style = "width: 350px; height: 120px "class =" textinputs "> </ textarea> </ td> </ tr> <tr> <td>% system captcha ( 'default')% </ td> </ tr> <tr> <td>% smiles% </ td> </ tr> <tr> <td> <input type = "submit" value = "Додати коментар" /> </ td> </ tr> </ table> <! - - Put this script tag to the <head> of your page -> <script type = "text / javascript" src = "http://userapi.com/js/api/openapi.js?50"> </ script > <script type = "text / javascript"> VK.init ({apiId: API_ID, onlyWidgets: true}); </ Script> <! - Put this div tag to the place, where the Comments block will be -> <div id = "vk_comments"> </ div> <script type = "text / javascript"> VK.Widgets .Comments ( "vk_comments", {limit: 10, width: "496", attach: "*"}); </ Script> <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"; fjs.parentNode. insertBefore (js, fjs);} (document, 'script', 'facebook-jssdk')); </ script> <div class = "fb-comments" data-href = "http://www.example.com "data-num-posts =" 5 "data-width =" 470 "> </ div> </ form> ADD_FORM_GUEST; Примітка.
Даний функціонал був перевірений на працездатність у версії системи 2.8.5.1.
Js?Js?
