MODX Revo - Добавление кнопок социальный сетей в футер

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

Футер блога выполним в виде 2 блоков. В первый блок поместим логотип и название блога, а во второй блок – кнопки социальных сетей (Twitter, Вконтакте, Одноклассники, Google+, Facebook).

Разметку футера сделаем адаптивной с помощью классов Twitter Bootstrap 3:

  • на устройствах sm, md и lg (ширина больше или равна 768 px) блоки расположим горизонтально.
  • на устройствах xs (ширина меньше 768 px) блоки расположим вертикально.
<footer>
  <div class="container">
    <div class="row">
      <!-- Логотип и название блога -->    
      <div id="footer-info" class="col-sm-4 col-md-3 col-lg-2">
   
      </div>
      <!-- Кнопки социальных сетей -->    
      <div class="col-sm-8 col-md-9 col-lg-10">
        <div id="social-icons">
          
        </div>
      </div>
   </div>
</footer>

MODX - Разметка футера для устройств sm, md и lg

MODX - Разметка футера для устройств xs

После создания разметки перейдём к наполнению футера контентом.

В блок div с id="footer-info" поместим текст и картинку:

© МОЙ БЛОГ, 2015.
<img class="center-block" src="assets/images/logo/logo-footer.png" alt="Логотип блога">

В блок div с id="social-icons" поместим ссылки на социальные сети. Содержимое ссылок выполним с помощью иконок FontAwesome:

<a href="#" target="_blank" title="Twitter">
  <span class="fa-stack fa-lg">
    <i class="fa fa-square fa-stack-2x"></i>
    <i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
  </span>
</a>
<a href="#" target="_blank" title="Facebook">
  <span class="fa-stack fa-lg">
    <i class="fa fa-square fa-stack-2x"></i>
    <i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
  </span>
</a>
<a href="#" target="_blank" title="ВКонтакте">
  <span class="fa-stack fa-lg">
    <i class="fa fa-square fa-stack-2x"></i>
    <i class="fa fa-vk fa-stack-1x fa-inverse"></i>
  </span>
</a>
<a href="#" target="_blank" title="Одноклассники">
  <span class="fa-stack fa-lg">
    <i class="fa fa-square fa-stack-2x"></i>
    <i class="fa fa-odnoklassniki fa-stack-1x fa-inverse"></i>
  </span>
</a>
<a href="#" target="_blank" title="Google+">
  <span class="fa-stack fa-lg">
    <i class="fa fa-square fa-stack-2x"></i>
    <i class="fa fa-google-plus fa-stack-1x fa-inverse"></i>
  </span>
</a>

В итоге получится следующий код футера, который необходимо поместим в чанк "chunk.footer", созданный на предыдущих уроках:

<footer>
  <div class="container">
    <div class="row">
      <div id="footer-info" class="col-sm-4 col-md-3 col-lg-2">
        © МОЙ БЛОГ, 2015.
        <img class="center-block" src="assets/images/logo/logo-footer.png" alt="Логотип блога">
      </div>
      <div class="col-sm-8 col-md-9 col-lg-10">
        <div id="social-icons">
          <a href="#" target="_blank" title="Twitter">
            <span class="fa-stack fa-lg">
              <i class="fa fa-square fa-stack-2x"></i>
              <i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
            </span>
          </a>
          <a href="#" target="_blank" title="Facebook">
            <span class="fa-stack fa-lg">
              <i class="fa fa-square fa-stack-2x"></i>
              <i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
            </span>
          </a>
          <a href="#" target="_blank" title="ВКонтакте">
            <span class="fa-stack fa-lg">
              <i class="fa fa-square fa-stack-2x"></i>
              <i class="fa fa-vk fa-stack-1x fa-inverse"></i>
            </span>
          </a>
          <a href="#" target="_blank" title="Одноклассники">
            <span class="fa-stack fa-lg">
              <i class="fa fa-square fa-stack-2x"></i>
              <i class="fa fa-odnoklassniki fa-stack-1x fa-inverse"></i>
            </span>
          </a>
          <a href="#" target="_blank" title="Google+">
            <span class="fa-stack fa-lg">
              <i class="fa fa-square fa-stack-2x"></i>
              <i class="fa fa-google-plus fa-stack-1x fa-inverse"></i>
            </span>
          </a>        
        </div>
      </div>
    </div>
  </div>
</footer>
...

MODX - Чанк, содержащий футер страницы

Кроме этого не забываем скачать и подключить FontAwesome. Для этого открываем сайт FontAwesome, скачиваем архив, распоковываем его в директорию assets на сервере и подключаем её с помощью элемента link в чанке "chunk.head":

...
<link href="assets/font-awesome/css/font-awesome.min.css" rel="stylesheet">
...

Оформление футера выполним с помощью стилей CSS:

  • элементу footer установим: цвет фона #f2f4f7, внутренние отступы сверху и снизу по 10px, цвет текста #6762e6, а также выравнивание контента по центру.
  • элементу, имеющему id="social-icons" установим: размер шрифта 20px, внутренние отступы сверху и снизу по 3px.
  • ссылкам, находящимся в элементе с id="social-icons" установим цвет текста #6762e6, а также уберём эффект подчёркивания.
  • при поднесении курсора к ссылке, находящейся в элементе с id="social-icons" установим: размер шрифта 22px, цвет текста #2c26bf, а также уберём подчёркивание у ссылок.
  • для блоков с помощью медиа-запросов добавим разделяющую линию, которая будет горизонтальной на устройствах с экраном sm, md и lg, и вертикальной на устройствах с экраном xs.
footer {
  background-color: #f2f4f7;
  padding-top:10px;
  padding-bottom: 10px;
  color: #6762e6;
  text-align:center;
}
#social-icons {
  font-size: 20px;
  padding-top: 3px;
  padding-bottom: 3px;
}
#social-icons a {
  color: #6762e6;
  text-decoration: none;
}
#social-icons a:hover {
  font-size: 22px;
  color: #2c26bf;
  text-decoration: none;
}
@media (min-width: 768px) {
  #footer-info {
    border-right: 2px solid #6762e6;
  }
}
@media (max-width: 768px) {
  #footer-info  {
    padding-bottom: 10px;
  }
  #social-icons {
    padding-top: 10px;
    border-top: 2px solid #6762e6;
  }
}

Добавим созданные стили в файл styles.css, расположенный каталоге /assets/bootstrap/css на сервере.

Созданный футер продемонстрируем с помощью следующих изображений:

MODX - Вид футера на устройствах, имеющих экран больше или равный 768px
MODX - Вид футера на устройствах, имеющих экран больше или равный 768px
MODX - Вид футера на устройствах sm, md и lg во время поднесения курсора к социальной кнопки
MODX - Вид футера на устройствах sm, md и lg во время поднесения курсора к социальной кнопки
MODX - Вид футера на устройствах, имеющих экран меньше 768px
MODX - Вид футера на устройствах, имеющих экран меньше 768px
MODX - Вид футера на xs-устройствах во время поднесения курсора к социальной кнопки
MODX - Вид футера на xs-устройствах во время поднесения курсора к социальной кнопки


   MODX Revo 0    3049 +1

Комментарии (4)

  1. Демьян Золин # 0
    Здравствуйте.
    Подскажите пожалуйста где установить код кнопок социальных сетей «поделиться» или «мне нравиться» как у Вас в конце статей?
    Спасибо.
    1. Александр Мальцев # 0
      Здравствуйте. Для этого можете воспользоваться блоком «Поделиться» от Яндекса.
      Страница проекта доступна по следующему адресу: https://tech.yandex.ru/share/
      1. Демьян Золин # 0
        Шаблон «Пост».
        между [[*content]]
        и [[TicketMeta]]
        1. Александр Мальцев # +1
          А я про что.
          Создайте чанк, например с именем tpl.yandexshare и поместите в него следующее содержимое:
          <script type="text/javascript" src="//yastatic.net/es5-shims/0.0.2/es5-shims.min.js" charset="utf-8"></script>
          <script type="text/javascript" src="//yastatic.net/share2/share.js" charset="utf-8"></script>
          <div class="ya-share2" data-services="vkontakte,facebook,odnoklassniki,gplus,twitter" data-counter=""></div>
          
          После этого вызывайте его в нужных местах (шаблонах) так:
          [[$tpl.yandexshare]]
          

    Вы должны авторизоваться, чтобы оставлять комментарии.