Як поєднати коментарі Wordpress, Facebook і Вконтакте?
Всім привіт дорогі читачі, сьогодні я продовжу тему, розпочату мною в одній з минулих статей - Як зробити коментарі вконтакте і фейсбук для кожної сторінки блогу? Минулого разу, я встановив на свій блог коментарі Вконтакте і Фейсбук, після завершення установки всі мої коментарі виглядали ось так:
А тепер уявіть картину - стаття вдалася і у всіх трьох коментують віджети: wordpress, facebook і вконтакте зібралося багато коментарів - вийти дуже довга поляна з коментарів, які буде важко сприймати.
Тому, я поставив перед собою завдання - поєднати віджети коментарів Вконтакте і Фейсбук, і зробити їх два в одному. Я простудіював інтернет, подумав головою, і навіть перестарався - у мене вийшло поєднати всі три віджета коментарів: wordpress, facebook і вконтакте, в одну акуратну форму:
Вийшли три акуратні вкладки, які перемикаються одним кліком мишки, і коментуй собі на здоров'я, хочеш на wordpress, хочеш вконтакте, а можна і в facebook! Ви вже можете бачити як це працює на моєму блозі . І якщо Вам цікаво, то я розповім як зробити таку форму, і поєднати три віджета коментарів: wordpress, вконтакте, і facebook в один!
Отже, я після першої статті отримав два перших (верхніх) коду від Вконтакте і Фейсбук, які вставив в header.php, їх залишаю на місці. Другі (нижні) коди, що відображають самі віджети, я вставив в файл comments.php - ось з цим файлом cейчас і треба попрацювати.
Для початку потрібно створити стилі мого нового віджету, заходжу в редактор в панелі керування блогом, і вставляю показаний нижче код в самий кінець свого файлу стилю на блозі style.css, пам'ятаю зберегти!
#page {width: 70%; margin: 10px auto;} .tabs {width: 100%; overflow: hidden; font-size: 0.9em; margin: 2em 0; zoom: 1; padding: 1px; position: relative; } .tabs dt {float: left; line-height: 2; height: 2em; background: # e8f0f5; border: 1px solid # e8f0f5; border-bottom: 0; padding: 0 1em; position: relative; left: 35px; margin-right: 1px; cursor: pointer; -webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 10px; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px;} .tabs dt: hover {background-color: # bfdff4;} .tabs dt.selected {border-color: # b0d0e9; background: #fff; z-index: 3; cursor: auto;} .tabs dd {background: #fff; display: none; float: right; width: 100%; margin: 2em 0 0 -100%; position: relative; z-index: 2;} .tabs dd .selected {display: block;} .tabs .tab-content {border: 1px solid # b0d0e9; padding: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px;}
Далі я вставляю javascript між тегами <head> і </ head>, цей скрипт буде перемикати коментарі з вкотнакте на фейсбук, або вордпресс.
<Script type = "text / javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"> </ script> <script type = "text / javascript "> $ (function () {$ ( 'dl.tabs dt'). click (function () {$ (this) .siblings (). removeClass ( 'selected'). end () .next ( 'dd' ) .andSelf (). addClass ( 'selected');});}); </ Script>
Тепер, приступаю до більш радісного заходу ... 🙂 Створюю форму для своїх майбутніх коментарів. Стиль форми і дієздатність задані минулими вставленими кодами, а тепер треба вставити код для відображення самого віджета. Я про всяк випадок зробив резервну копію файлу comments.php і почав вставляти нововведення. Поки покажу умовний код, а після поясню - що до чого!
<Div id = "comments"> <h3> <font color = "ff0000"> Ваші коментарі до статті: </ font> </ h3> <dl class = "tabs"> <dt class = "selected"> Wordpress < / dt> <dd class = "selected"> <div class = "tab-content"> Код основних коментарів WordPress </ div> </ dd> <dt> ВКонтакте </ dt> <dd> <div class = "tab -content "> Код коментарів Вконтакте </ div> </ dd> <dt> FaceBook </ dt> <dd> <div class =" tab-content "> Код коментарів Facebook </ div> </ dd> </ dl > </ div>
Тепер докладніше - файл comments.php я оновлюю цілком. Для початку я буквально все, крім
<Div id = "comments"> і останнього </ div>
копіюю в окремий файл, по-перше для того, щоб не заплутатися, а по-друге, цей скопійований код і буде моїм кодом основних коментарів Wordrpess. Якщо Вам хочеться побачити мій оновлений файл comments.php, читайте - Як зробити коментарі Google+ у себе на блозі?
Далі, задаю колір і шрифт заголовка моїх коментарів. Після цього, якщо подивитися на код, можна побачити практично три однакові набори тегів, це і є три моїх кита, на яких будуть стояти коментарі. Якщо подивитися уважно - одна відмінність можна побачити в першому кита, а саме, в класі select. Він і відповідає за той вид коментарів, який буде показаний за замовчуванням в моєму віджеті. Я встановив select на коментарі wordpress, тобто основні коментарі у мене будуть відображатися за замовчуванням.
Далі все просто, беру скопійований код з файлу comments.php і вставляю його в заздалегідь приготоване місце для коду коментарів wordpress. Теж саме роблю з другими (нижніми) частинами коду, які мені вручили соціальні мережі Вконтакте та Facebook. Якщо хтось забув, де вони беруться - читайте тут .
Все, якщо я ніде не помилився, то зберігаю файл, і запускаю будь-яку статтю на блозі - перевіряю працездатність своєї нової форми суміщених коментарів wordpress, facebook і вконтакте.
UPD: від 05.11.2013 - деякий час назад я виявив, що коментарі facebook більш не відображаються у створеній мною формі. Щось змінилося в стилі самих коментарів Фейсбук і це заважає їм коректно відображатися. Якщо я знайду спосіб це виправити, я обов'язково напишу про це.
UPD: від 20.06.2014 - По-перше, я написав статтю - Віджет суміщених коментарів без скриптів на CSS в якій розповів про ще один, навіть більш легкому способі зробити суміщені коментарі. І по-друге, я недавно вирішив оновити код коментарів в фейсбуці на своєму тревел-блозі і зрозумів, що коментарі фейсбук знову працюють як і раніше.
