Страница 1 из 1

Добавление кнопок социальных сетей на конференцию phpBB

СообщениеДобавлено: 11 окт 2012 16:35, Чт
UncleFather
Проблема:

Необходимо добавить кнопки социальных сетей на конференцию phpBB 3.


Решение:

  1. Прежде всего, необходимо получить коды кнопок социальных сетей. Имхо, сделать это удобнее и быстрее одним блоком. Сервис Яндекс предоставляет нам блок «Поделиться». Этот блок представляет собой ссылки на социальные сети.
    Если же хочется, чего-то большего, то можно почитать здесь и здесь и получить коды вручную на каждой из социальных сетей.

  2. Итак, если все-же остановились на Яндексовском блоке «Поделиться», то получаем его код на яндексе

  3. Определяем место на конференции, куда хотим разместить этот блок. Например, мне захотелось разместиь его наверху:
    01.JPG


    и внизу:
    02.JPG


  4. За это местоположение обычно отвечает файлик "breadcrumbs.html", расположенный в папке "template" каждого стиля конференции. Сразу замечу, что изменения, сделанные для одного стиля не распространяются на другие стили, поэтому, если нам нужно, чтобы блок "Поделиться" отображался во всех стилях конференции, то и нужно добавлять его во все стили.

  5. Открываем этот файлик "template" и видим код:
    Код: Выделить всё
       <table class="tablebg breadcrumb" width="100%" cellspacing="{$CA_SPACING}" cellpadding="0" style="margin-top: 5px;">
       <tr>
          <td class="row1">
             <p class="breadcrumbs"><a href="{U_INDEX}">{L_INDEX}</a><!-- BEGIN navlinks --> &#187; <a href="{navlinks.U_VIEW_FORUM}">{navlinks.FORUM_NAME}</a><!-- END navlinks --></p>

             <p class="datetime">{S_TIMEZONE}</p>
          </td>
       </tr>
       </table>


  6. Добавляем в него код, полученный на Яндексе:
    Код: Выделить всё
       <table class="tablebg breadcrumb" width="100%" cellspacing="{$CA_SPACING}" cellpadding="0" style="margin-top: 5px;">
       <tr>
          <td class="row1">
             <p class="breadcrumbs"><a href="{U_INDEX}">{L_INDEX}</a><!-- BEGIN navlinks --> &#187; <a href="{navlinks.U_VIEW_FORUM}">{navlinks.FORUM_NAME}</a><!-- END navlinks --></p>

             <p class="datetime">{S_TIMEZONE}</p>
             
             <script type="text/javascript" src="//yandex.st/share/share.js" charset="utf-8"></script>
             <div align="center" class="yashare-auto-init" data-yashareL10n="ru" data-yashareType=""button" data-" data-yashareQuickServices="yaru,vkontakte,facebook,twitter,odnoklassniki,moimir,lj,moikrug,gplus"></div>
             
          </td>
       </tr>
       </table>


    В код, полученный на Яндексе, я внес изменение - добавил
    Код: Выделить всё
    align="center"
    в строку
    Код: Выделить всё
    <div class="yashare-auto-init" data-yashareL10n="ru" data-yashareType=""button" data-" data-yashareQuickServices="yaru,vkontakte,facebook,twitter,odnoklassniki,moimir,lj,moikrug,gplus"></div>

    для того, чтобы виджет отображался по центру.

  7. Сохраняем изменения, чистим папку "cache" конференции и смотрим что получилось.

  8. Тема "ProSilver" не использует "breadcrumbs.html", поэтому для этой темы вносим изменения в файлики "overall_footer.html" и "overall_header.html".
    Для "overall_footer.html" было:
    Код: Выделить всё
    ...
                   <!-- IF U_BUMP_TOPIC --><li class="icon-bump"><a href="{U_BUMP_TOPIC}" title="{L_BUMP_TOPIC}">{L_BUMP_TOPIC}</a></li><!-- ENDIF -->
                <!-- ENDIF -->
             <li class="rightside"><!-- IF U_TEAM --><a href="{U_TEAM}">{L_THE_TEAM}</a> &bull; <!-- ENDIF --><!-- IF not S_IS_BOT --><a href="{U_DELETE_COOKIES}">{L_DELETE_COOKIES}</a> &bull; <!-- ENDIF -->{S_TIMEZONE}</li>
          </ul>

          <span class="corners-bottom"><span></span></span></div>
       </div>

    ...


    стало:
    Код: Выделить всё
    ...
                   <!-- IF U_BUMP_TOPIC --><li class="icon-bump"><a href="{U_BUMP_TOPIC}" title="{L_BUMP_TOPIC}">{L_BUMP_TOPIC}</a></li><!-- ENDIF -->
                <!-- ENDIF -->
             <li class="rightside"><!-- IF U_TEAM --><a href="{U_TEAM}">{L_THE_TEAM}</a> &bull; <!-- ENDIF --><!-- IF not S_IS_BOT --><a href="{U_DELETE_COOKIES}">{L_DELETE_COOKIES}</a> &bull; <!-- ENDIF -->{S_TIMEZONE}</li>
             
             <script type="text/javascript" src="//yandex.st/share/share.js" charset="utf-8"></script>
             <div align="center" class="yashare-auto-init" data-yashareL10n="ru" data-yashareType=""button" data-" data-yashareQuickServices="yaru,vkontakte,facebook,twitter,odnoklassniki,moimir,lj,moikrug,gplus"></div>
                      
          </ul>

          <span class="corners-bottom"><span></span></span></div>
       </div>
    ...


    Для "overall_header.html" было:
    Код: Выделить всё
    ...
                   <!-- IF not S_USER_LOGGED_IN and S_REGISTER_ENABLED and not (S_SHOW_COPPA or S_REGISTRATION) --><li class="icon-register"><a href="{U_REGISTER}">{L_REGISTER}</a></li><!-- ENDIF -->
                   <li class="icon-logout"><a href="{U_LOGIN_LOGOUT}" title="{L_LOGIN_LOGOUT}" accesskey="x">{L_LOGIN_LOGOUT}</a></li>
                <!-- ENDIF -->
             </ul>
             <span class="corners-bottom"><span></span></span></div>
          </div>
    ...


    стало:
    Код: Выделить всё
    ...
                   <!-- IF not S_USER_LOGGED_IN and S_REGISTER_ENABLED and not (S_SHOW_COPPA or S_REGISTRATION) --><li class="icon-register"><a href="{U_REGISTER}">{L_REGISTER}</a></li><!-- ENDIF -->
                   <li class="icon-logout"><a href="{U_LOGIN_LOGOUT}" title="{L_LOGIN_LOGOUT}" accesskey="x">{L_LOGIN_LOGOUT}</a></li>
                <!-- ENDIF -->
             </ul>
             
             <script type="text/javascript" src="//yandex.st/share/share.js" charset="utf-8"></script>
             <div align="center" class="yashare-auto-init" data-yashareL10n="ru" data-yashareType=""button" data-" data-yashareQuickServices="yaru,vkontakte,facebook,twitter,odnoklassniki,moimir,lj,moikrug,gplus"></div>
             
             <span class="corners-bottom"><span></span></span></div>
          </div>
    ...



Дополнение:

Одно из преимуществ использования Яндексовского блока «Поделиться» - это то, что мы в дальнейшем сможем просматривать статистику кликов этого блока на сервисе Яндекс.Метрика:
01.jpg