Виджет комментариев в социальной сети для форума phpBB 3.1.x - 3.2.x

11.10.2017 07:32:25 am

Хочу поделиться с Вам, как самому можно сделать расширение - виджет комментариев в социальной сети для форума phpBB 3.1.x.

Виджет комментариев Vk.Com

Для начала идем сюда: https://new.vk.com/dev/Comments и забиваем данные о своем форуме, после чего получим примерно такой код:

<!-- Put this script tag to the <head> of your page -->
<script type="text/javascript" src="//vk.com/js/api/openapi.js?122"></script>

<script type="text/javascript">
  VK.init({apiId: xxxxxxx, 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: "665", attach: "*"});
</script>

В документации установки виджета: https://new.vk.com/dev/widget_comments сказано, что строчка кода:

<script type="text/javascript" src="//vk.com/js/api/openapi.js?122"></script>

должна находиться в теге head, значит необходимо создать шаблон с именем события, которое находится между тегами <head> и </head>. Между этими тегами есть событие overall_header_head_append, шаблон для него будет такой: overall_header_head_append.html, создаем файл с точно таким же названием, в сам файл пишем строчку:

<script type="text/javascript" src="//vk.com/js/api/openapi.js?122"></script>

Дальше, комменты из СС ВК будут находиться в темах, под быстрым ответом, значит создаем файл: viewtopic_body_topic_actions_before.html, с содержимым:

<div class="tabs">
    <div class="panel">
        <div class="inner">
            <h3>Vk.Com</h3>
            <script type="text/javascript">
                VK.init({
                    apiId: xxxxxxx, 
                    onlyWidgets: true
                });
            </script>

            <div id="vk_comments"></div>

            <script type="text/javascript">
                VK.Widgets.Comments("vk_comments", {
                    limit: 10, 
                    attach: "*"
                });
            </script>
        </div>
    </div>
</div>

Вместо xxxxxxx пишем свой Api ID.

Теперь два файла (overall_header_head_append.html и viewtopic_body_topic_actions_before.html) необходимо залить в папку: ext/Author_ext/Name_ext/styles/prosilver/template/event/, вместо названия папки Author_ext - указать имя автора, вместо Name_ext - указать название расширения. Имя автора можете указать свое на латинском языке, название расширения так же можете придумать свое (латинскими буквами).

Затем создаем файл: composer.json с таким содержимым:

{
    "name":        "Author_ext/Name_ext",
    "type":        "phpbb-extension",
    "description": "",
    "homepage":    "http://danfa.org",
    "version":     "0.0.1",
    "time":        "2016-06-19",
    "license":     "GPL-2.0",
    "authors": [
        {
            "name":     "Author_ext",
            "homepage": "http://danfa.org",
            "role":     "Developer"
        }
    ],
    "require": {
        "php": ">=5.3.3"
    },
    "extra": {
        "display-name": "Название расширения",
        "soft-require": {
            "phpbb/phpbb": "3.1.*@dev"
        }
    }
}

Тут так же следует указать Author_ext и Name_ext на свое. Внимание, имя автора и название расширения должны совпадать с названием папок, о которых говорилось выше, с учетом регистра.
Файл composer.json залить в папку: ext/Author_ext/Name_ext/.

Заходим в Администраторский раздел, переходим на вкладку Персонализация, затем Управление расширениями и включаем наше расширение. Возможно потребуется очистить кэш.

Небольшой совет: Чтобы не создавать каждый раз новое расширение, папки и файлы, из-за одной доработки, например, как это, у меня есть общая папка ext/Slash/common/, куда я и закидываю|дописываю свои мелкие расширения. Для удобства, так можете делать и Вы.

Надеюсь мой пост оказался полезным.
Спасибо за внимание.

Жалоба

11.10.2017 07:40:44 am

Виджет комментариев FaceBook.Com

Будем допиливать наше расширение, что написано выше. И так, сначала сюда: https://developers.f ... lugins/comments генерировать код для вставки его в шаблон. Код Вы получите, примерно такой:

<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/sdk.js#xfbml=1&version=v2.6";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Это надо вставить после открывающего тега body, мы вставим его ниже. А этот код:

<div class="fb-comments" data-href="site" data-numposts="x"></div>

вставим там, где хотим видеть комменты "фейсбуковцев".

Я сделал два виджета Vk и FaceBook в одном месте, в виде вкладок. К слову, сценарий вкладок взял из интернета, и практически ни чего не менял.
Код обоих вкладок в шаблоне: viewtopic_body_topic_actions_before.html, у меня написан так:

<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/sdk.js#xfbml=1&version=v2.6";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<script type="text/javascript">
    VK.init({
        apiId: xxxxxxx, 
        onlyWidgets: true
    });
</script>

<div class="tabs">
    <div class="panel">
        <div class="inner">

            <dl class="tabs">
                <dt class="active">Vk.Com</dt>
                <dd class="active"><div><div id="vk_comments"></div></div></dd>
                <dt>FaceBook.Com</dt>
                <dd><div><div class="fb-comments" data-href="site" data-width="100%" data-numposts="5"></div></div></dd>
            </dl>

        </div>
    </div>
</div>

<script type="text/javascript">
    VK.Widgets.Comments("vk_comments", {
        limit: 10, 
        attach: "*"
    });
</script>

Можете скопировать его себе, только замените xxxxxxx на свой Api ID (VK) и site на свой адрес (FaceBook).

Далее, создаем файл danfa.css, с содержимым:

/* Вкладки */
dl.tabs dt {
    font-size: 11px;
    font-weight: bold;
    float: left;
    position: relative;
    margin: 5px;
    padding: 10px;
    cursor: pointer;
}

dl.tabs dt:hover {
    color: #008000;
}

dl.tabs dd {
    display: none;
    float: right;
    margin: 25px 5px 0 -100%;
    position: relative;
    width: 100%;
    z-index: 1;
}

dl.tabs dd div {
    padding: 5px;
}

dl.tabs dd.active {
    display: block;
} 
/* END Вкладки */

Залить этот файл надо в папку: ext/Author_ext/Name_ext/styles/prosilver/theme/. Помните про названия папок Author_ext и Name_ext (говорилось в первом посте). Теперь этот файл стиля необходимо подключить, для этого открываем шаблон overall_header_head_append.html, где у нас подключен JS файл VK, и дописываем строчку:

<!-- INCLUDECSS ../theme/danfa.css -->

И последний штрих, создаем файл overall_footer_after.html, с таким содержимым:

<script type="text/javascript">
$('dl.tabs dt').click(function(){
    $(this).siblings().removeClass('active').end().next('dd').andSelf().addClass('active');
});
</script>

Файл следует залить в папку: ext/Author_ext/Name_ext/styles/prosilver/template/event/, опять же, помните про папки Author_ext и Name_ext.
После этого, обязательно почистить кэш. Готово, два виджете в одном месте.

Жалоба