Скрипт Share42 — настройка и установка кнопок социальных сетей на сайт

Здравствуйте, уважаемые читатели блога Goldbusinessnet.com! Мне уже давно хотелось ознакомить вас с замечательной панелью Share42, которая позволяет иметь на вашем сайте кнопки практически от всех наиболее значимых сервисов, в том числе от Гугл+, Контакта, Твитера, Фейсбука (почитайте о настройке Моей страницы в Facebook).

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

Я уже писал о том, как добавить социальные кнопки для Google+ и Facebook с помощью их конструкторов, а также подробно информировал об установке кнопок социальных сетей для сайта Вордпресс от Twitter, VKontakte и других. Однако, размещение одиночных кнопок, хотя и имеет достаточно плюсов, не всегда устраивает, поскольку занимает достаточно много драгоценного времени. Скрипт Share42 позволяет это сделать за считанные минуты.

Преимущества панели Share42

Прежде, чем перейти непосредственно к технической стороне дела, хочу сказать несколько слов благодарности автору этого замечательного скрипта, коим является известный в рунете специалист под ником Dimox, который и создал одноименный сервис для помощи вебмастерам. Для того, чтобы выделить все плюсы, на странице Share42 даже есть отдельная вкладка «Преимущества», где все сразу становится ясно:

Думаю, что достоинства оттенены и добавить к этому нечего. Конечно, в мире идеала нет, однако в данном случае минусы минимальны. В качестве таковых можно отметить, пожалуй, лишь необходимость владения хотя бы на начальном уровне HTML и CSS, а также иметь представление об устройстве темы WordPress. Но мне кажется, что данное обстоятельство вполне преодолимо.

Настройка Share42 и ее установка на сайт

Для начала необходимо перейти на официальную страницу, а точнее, в русскоязычный раздел share42.com/ru. На первом шаге нужно выбрать иконки, которые будут отображать кнопки тех сервисов, которые вы захотите иметь на своем сайте, а также их размер:

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

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

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

Если отметите опцию «Ограничить видимое кол-во иконок», то активируется рядом располагающееся поле, в котором отмечаем количество кнопок, которые будут видимыми, остальные можно извлекать нажатием на значок треугольника. Например, если впишите 4 шт., то блок будет выглядеть так:

Кодировка для стандартного блога или сайта обычно UTF-8. Также можете добавить кнопку сайта Share42.com, которая может оказаться полезной для читателей и с помощью которой они смогут перейти на страницу скрипта и установить себе точно такую же панель. Если вы не уверены, подключен ли к вашему сайту jQuery, то лучше не отмечать эту опцию, правда в этом случае вы не сможете воспользоваться такой важной составляющей как счетчик публикаций.

Дальше можно воспользоваться опцией предварительного просмотра и увидеть, как будет выглядеть панель Share42 на вашем вебсайте:

Если вас все устроило, то скачивайте на свой компьютер готовый скрипт, нажав на соответствующую кнопку. Переходим к четвертому шагу, который включает в себя действия по установке панельки Share42 на сайт:

Вначале распакуем архив на компьютере:

Выбираем путь до папки и активируем процесс извлечения:

В результате получаем такую картину:

Данная папка Share42 будет содержать файлы с выбранными вами иконками и непосредственно скрипт:

Теперь загружаем папку «Share42» (не первую, а внутреннюю, которая непосредственно содержит файлы) на сервер хостинга с помощью соответствующего FTP менеджера (рекомендую FileZilla).

Лично я поместил папку Share42 в директорию «Plugins» на хостинге, где расположены файлы сайта. В результате она заняла свое место в иерархии:

Теперь в соответствии с пунктом 3 четвертого шага установки скрипта (смотрите шестой скриншот выше) нужно прописать в соответствующую строчку путь до папки, у меня он получился таким:

/wp-content/plugins/share42

Вы можете выбрать другую директорию, если данный вариант вам не подходит. Только в таком случае не забудьте прописать свой URL. Для проверки правильности указанного пути вам будет предложено перейти по ссылке. Если в результате увидите содержание скрипта, значит адрес указан верно. Также я отметил тип сайта WordPress, поскольку именно на этой CMS создан мой блог.

Далее в пункте 5 будет сгенерирован код, который нужно вставить после или перед текстом статьи. В Вордпресс за отображение страниц с постами обычно отвечает файл SINGLE.PHP (либо шаблон, в состав названия которого входит SINGLE). Открываете его используя подходящий HTML редактор (например, Notepad++) и находите строчку:

<?php the_content('Сontinue reading &raquo;'); ?>

и внедряете полученный код (шестой скриншот выше, пункт 5) ниже этой строки:

<?php the_content('Сontinue reading &raquo;'); ?>
<div class="share42init" data-url="<?php the_permalink() ?>" data-title="<?php the_title() ?>" data-top1="100" data-top2="20" data-margin="-90"></div>

<script type="text/javascript" src="/wp-content/plugins/share42/share42.js"></script>

Это касается и случая, если вы выберете горизонтальную панельку социальных кнопок и захотите разместить ее после окончания статей вашего блога. Кроме страниц со статьями, плавающую вертикальную панель Share42 можно разместить и на других вебстраницах, например, на главной (размещаете код в шаблоне INDEX.PHP) или на страницах категорий (CATEGORY.PHP).

Регулировка позиции вертикальной панели Share42

Обратите внимание на первый участок кода, который вы копируете:

<div class="share42init" data-url="<?php the_permalink() ?>" data-title="<?php the_title() ?>" data-top1="100" data-top2="20" data-margin="-90">

Здесь по умолчанию даны несколько атрибутов со значениями, которые помогают отрегулировать местоположение блока кнопок соцсетей. Атрибут DATA-TOP1 позволяет установить отступ от верхнего края видимой области в пикселах (px), когда страница находится в самом верхнем положении (по умолчанию значение равнялось 150px, я уменьшил до 100px).

Атрибут MARGIN позволяет позиционировать панель по горизонтали, причем отрицательное значение смещает блок кнопок влево, положительное — вправо (по умолчанию установлен показатель 0, я для своего блога изменил его на -90px).

После начала прокрутки можно зафиксировать панельку и при дальнейшей прокрутке страницы вниз она будет оставаться на месте и все время находиться перед глазами читателя ваших материалов. Это даст возможность ему в любое время воспользоваться кнопками социальных сетей, которые будут у него под рукой. Это достигается с помощью установки значения атрибута TOP2 (по умолчанию было 20, я это число и оставил, поскольку такой вариант мне подошел).

Если теперь вернуться еще раз к скриншоту, на котором расписана пошаговая установка скрипта Share42, то там есть ссылка «Параметры, которые вы можете указать». Кликнув по ней, вызовете список дополнительных атрибутов, кроме тех, что даются по умолчанию, с подробным объяснением их предназначения при установке как горизонтальной, так и вертикальной плавающей панели.