> ## Content Index
> Fetch the complete content index at: https://blog.themarfa.name/llms.txt
> Use this file to discover other available public pages before exploring further.

# Хитрости Postach.io. Как подключить Pluso к своему блогу
- URL: https://blog.themarfa.name/khitrosti-postach-io-kak-podkliuchit-pluso-k-svoemu-blogu/
- Published: 2014-07-04T13:32:51.000Z
- Updated: 2018-08-22T07:46:25.000Z
- Author: Константин Докучаев
- Tags: postachio, pluso

По [многочисленной просьбе](https://blog.themarfa.name/khitrosti-postachio-gde-khranit-skripty-dlia-svoego-bloga#comment-1467702788 "Хитрости Postachio. Где хранить скрипты для своего блога") трудящихся я написал подробную инструкцию о том как подключить кнопки [Pluso](http://share.pluso.ru/ "Pluso") к своему блогу. Рассказывать буду на примере движка [Postach.io](http://postach.io/ "Postach.io"), но сути это не меняет.

### Генерируем код кнопок

Первым делом, на странице [Pluso](http://share.pluso.ru/ "Pluso") нужно сгенерировать код кнопок. Думаю, это каждому под силу. Выбираем внешний стиль, социальные сети и получаем код.

![](https://storage.ghost.io/c/71/cf/71cf070c-b8aa-467e-9efd-cf18f7dcf253/content/images/2015/12/ec574717-29e9-4791-b967-8feb67fd7258.png)

![](https://storage.ghost.io/c/71/cf/71cf070c-b8aa-467e-9efd-cf18f7dcf253/content/images/2015/12/dc90e58a-ba2c-44a0-91dd-f8c860f7e706.png)

### Подключаем скрипт к блогу

Код, который вы скопировали на предыдущем шаге, нужно добавить в .html код вашего блога. Если вы хотите чтобы кнопки были видны на всех страницах, то лучше всего код добавить перед закрывающим тегом body:

![](https://storage.ghost.io/c/71/cf/71cf070c-b8aa-467e-9efd-cf18f7dcf253/content/images/2015/12/a8f91d23-f69e-4910-8b62-5c72a81ed532.png)

Если вы хотите чтобы кнопки отображались только внутри постов, то этот код лучше всего добавить в начале или конце кода поста. У себя я вставил скрипт перед заголовком. Найти код поста достаточно легко:

##### Теги Postach.io

1. {{ post.title }} - указывает на заголовок поста;
2. {{ post.content }} - указывает, что здесь будет текст;
3. {{ link.content }} - здесь будет содержимое поста-ссылки;
4. {{ page.content }} - пост-страница.

Важно добавить код к каждому из трех типов постов.

![](https://storage.ghost.io/c/71/cf/71cf070c-b8aa-467e-9efd-cf18f7dcf253/content/images/2015/12/14f013f2-b301-4be6-bf61-c8f9a1300c23.png)

### Делаем красиво

[Pluso](http://share.pluso.ru/ "Pluso") не дают изменять внешний вид своих кнопок. Поэтому чтобы повлиять на них нужно добавлять к нужным тегам свойство !important.

Где это можно сделать? В css.

> CSS (англ. Cascading Style Sheets — каскадные таблицы стилей) — формальный язык описания внешнего вида документа, написанного с использованием языка разметки.
> 
> [Wiki](http://ru.wikipedia.org/wiki/CSS "CSS")

Другими словами вам нужно прописать свойства css для кнопок либо в отдельном файле и подключить его к блогу, либо сделать это прямо в коде блога.

#### CSS в коде блога

CSS можно прописать прямо в HTML коде вашего блога. Для этого весь нужный вам код нужно включить внутрь тегов style сразу же после открывающего тега body. Даю картинку, т.к. код поплывет:

![](https://storage.ghost.io/c/71/cf/71cf070c-b8aa-467e-9efd-cf18f7dcf253/content/images/2015/12/225d818e-5088-43a7-a31e-569a88c15a2a.png)

#### Отдельным файлом

Но лучше весь CSS блога и кнопок вынести в отдельный файл. Для этого создайте в любом редакторе текстовый файл с расширением .css и уже прямо в нем прописывайте код. Потом этот файл нужно выгрузить на сервер и подключить к блогу. Делается это уже внутри тегов head:

![](https://storage.ghost.io/c/71/cf/71cf070c-b8aa-467e-9efd-cf18f7dcf253/content/images/2015/12/15f5e1f5-03de-41d0-9c49-066029cdb09b.png)

Путь к файлу указывается строкой link href="//путь\_к\_файлу/имя\_файла.css". rel="stylesheet" говорит о том, что это файл стилей.

#### Вернемся к красоте

Мой код для кнопок [Pluso](http://share.pluso.ru/ "Pluso") выглядит вот так:

\`.pluso {

position: fixed !Important;

margin-left: -35px;

top: 60%;}

.pluso-more {display: none !important;}

.pluso-001011001010-06 .pluso-wrap a {border:none;}

.pluso-001011001010-06 .pluso-counter {

position: static !important;

display: block;

margin-top: 20px;

width: 100%;

text-align: center;

}\`

Этот код нужно либо вставить в файл .css, который вы создали ранее, или вставить внутрь тегов style в коде темы [Postach.io](http://postach.io/ "Postach.io").

Разберем код:

\`.pluso {

position: fixed !Important;

margin-left: -35px;

top: 60%;}

\`

Эта часть кода говорит о том, что кнопки всегда должны находится слева от текста поста а расстоянии 35 пикселей. Так же кнопки отступают от верха экрана на 60%. Так мы добиваемся того, что кнопки при прокрутке страницы всегда находятся в одном и том же месте.

`.pluso-more {display: none !important;}`

###### 

Убирает плюсик между кнопками социальных сетей и счетчиком.

`.pluso-001011001010-06 .pluso-wrap a {border:none;}`

Убирает подчеркивание у цифры в счетчике.

\`.pluso-001011001010-06 .pluso-counter {

position: static !important;

display: block;

margin-top: 20px;

width: 100%;

text-align: center;

}\`

Не уверен, что код универсален, но у меня он выравнивает цифру в счетчике по середине. Важная часть кода со свойством !important, все остальное я взял из .css самих кнопок.

### Fin

Вот, собственно, и все, что я хотел рассказать. Если что-то не понятно или вы хотите что-то еще изменить/узнать, всегда рад помочь.