Share42 — скрипт для добавления на сайт кнопок социальных сетей и закладок (есть вариант плавающей панели)

Выбираем лучшие кнопки социальных сетей для сайта

В Интернете, вероятно, не осталось сайтов, на которых бы не были размещены кнопки для постинга материалов в социальные сети. Последние давно и прочно заняли место в наших жизнях. Мы там общаемся, знакомимся, раскручиваем бизнес, читаем новости и прочее. Полный спектр. Неудивительно, что веб-мастера стремятся расширить присутствие своих сайтов в соцсетях любыми доступными методами. Ведь там лежат тонны потенциального траффика, который нужен абсолютно всем. Поток посетителей – это деньги, репутация, рост. Всё строится вокруг него. Лакомый кусок.

Соцкнопки необходимы, это очевидно. Вопрос в другом – какие выбрать? Мы для вас протестировали ТОП 5 различных сервисов для добавления кода кнопок на сайты. Цель – выявить оптимальный и показать его в деталях. Начнём с отборочного этапа.

Выбор лучшего сервиса социальных кнопок

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

Состав команды аттестуемых таков:

  1. uSocial – конструктор социальных кнопок.
  2. Поделиться – скрипт соцкнопок от Яндекса.
  3. Pluso – генератор соцкнопок для сайта.
  4. AddThis – сервис для создания кнопок поделиться.
  5. UpToLike – сервис социальной активности.

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

Особенности кнопок uSocial

uSocial – это мощный конструктор социальных кнопок «Поделиться» и «Мне нравится» для сайта. Имеет собственную функциональную кнопку для шаринга uLike, виджет для привлечения посетителей (завлекающее pop-up окно), приложение для ВК сообществ, конструктор мета-данных и инструмент отладки (очистки кэша). Отдельно стоит выделить наличие такой полезной опции как «Социальный замок» позволяет скрывать заданный контент (ссылку, промокод и т.д.) на страницах сайта и предоставлять к нему доступ по истечению определенного времени или при выполнении условия – «Поделиться» сайтом в социальных сетях! Само собой, есть поддержка мобильной версии блока, счетчика репостов/лайков, доступна масса гибких настроек для отображения, а также подробная статистика репостов в личном кабинете. Кнопки можно установить на сайт любого конструктора или CMS: uCoz, uKit, Wix, Jimdo, WordPress, Joomla и остальных движков.

Приведем некоторые факты, убедившие нас в правильности принятого решения.

  • Во-первых, конструктор соцкнопок uSocial обладает удобным, понятным и эргономичным дизайном.
    Перемещаясь по панели функционала, которая включает в себя несколько пунктов, вы можете всегда слева видеть окно предпросмотра, что является большим плюсом. При этом, конструктор не выглядит перегруженным. Он полностью на русском языке, но имеет также и полноценную английскую локализацию. Многие аналогичные сервисы поддерживают русский язык, но не все. Например, AddThis не имеет такой возможности, что резко снижает его привлекательность для российских вебмастеров.
  • Во-вторых, uSocial предоставляет реально широкий функционал. В конструкторе можно настроить блоки “Поделиться” и “Мне нравится” так, чтобы они максимально органично смотрелись на вашем сайте. Круглые или квадратные иконки, пять различных эффектов при наведении, расположение – вертикальное, горизонтальное или статичное в заданном месте, три вида размеров, наличие общего счетчика и для каждой кнопки в отдельности, добавление кнопки “Наверх”, настройки мобильного вида, привлечение внимания к кнопкам и призыв к действию – в общем всё, что душе угодно. Таким обширным функционалом не сможет похвастаться ни один из приведенных в нашем обзоре конкурентов.
  • В-третьих, сервис дает возможность добавления, хранения и редактирования наборов в личном кабинете. Такой функции нет, например, в Яндекс Поделиться и Pluso. Эта фича очень удобна, если вы разработчик однотипных сайтов, а потому изменений в блоке “Поделиться” нет совсем или они незначительные.
  • В-четвертых, удобство использования самого блока. Для пользователя сайта работа с блоком не должна вызывать затруднений, иначе он просто откажется им пользоваться. Как, например, в случае с блоками от сервиса Яндекс.
    Для того, чтобы найти нужную вам соц. сеть, если она изначально не представлена в блоке, придется пролистать вниз внушительный список и отрываться при этом от содержимого сайта, что не слишком удобно.
    uSocial никак не мешает просмотру страницы. Если вдруг пользователь не хочет постоянно видеть данный блок на сайте, он может его скрыть и развернуть вновь при необходимости.

Словесного сравнения многим окажется мало. Поэтому мы составили сравнительную таблицу кнопок от uSocial и остальных дебютантов (используемая шкала оценки – от 1 до 5). Все эти данные получены в процессе тестирования.

Кнопки социальных сетей и закладок от Share42.

Здравствуйте друзья, уважаемые читатели блога — www.deffekt.ru. Сегодня я расскажу вам о том, как поставить кнопки социальных сетей — от SHARE42, и покажу какую незначительную ошибку, допускают новички при установке этих кнопок на свой сайт.

Пройдемся по распространенным проблемам и поговорим о пользе кнопочек социальных медиа…

Во-первых, стоит немного рассказать о том, кто создал этот чудо бесплатный и очень простой в использовании сервис (генерации скрипта) кнопок социальных сетей и установке его на наши с вами блоги и сайты…

Автором этого бесплатного сервиса – Share42.com (генерирующий скрипт) является Дмитрий a.k.a. Dimox .

Спасибо ему за кнопки и просто респект за то что он хороший человек, постоянно пишет на своем блоге очень полезные материалы с подробным и простым объяснением того как их применять!

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

Как установить кнопки социальных сетей share42

В этой части, одновременно с тем, что мы поставим скрипт кнопок на свой сайт, еще мы научимся работать с нашим сайтом по ftp. А именно, закачивать туда файлы.

Можно было бы обойтись простым словосочетанием «закиньте папку со скриптом на сервер вашего хостинга», но я решил объяснить этот момент подробно. Специально для Надежды, которая писала в комментариях к статье о программе Filezilla Ftp Cliet о том, что хотела бы этому научиться!

Надежда, это для вас!

Теперь пойдем по порядку

Переходим на сайт скрипта наших социальных кнопок – share42.com

Здесь видим следующее:

На этот блок не обращайте внимания, это рекламный блок «daos». Если захотите разместить тут свою рекламную строчку, то пожалуйста, все в автоматическом режиме.

Нас интересует первая вкладка «Генератор»

1. Первым делом нужно выбрать размер и отметить кнопки сервисов, которые мы хотим видеть на нашем сайте:

Здесь (под кнопкой «Генератор») представлено на выбор 3 размера кнопочек, я рекомендую вам использовать 32×32.

Итак, выбрали размер, теперь отмечаем (простым нажатием левой кнопки мыши) кнопки закладок и социальных сетей. С помощью ссылки «Выбрать/снять все» можно одним нажатием выбрать или снять отметки со всех кнопок.

И что немаловажно, изменить их расположение (порядок), в котором они будут следовать на вашем сайте, можно банальным захватом левой кнопкой мыши и перетаскиванием в нужное место. Сделали! Молодцы!

2. Переходим к выбору опций.

  • Тип панели с иконками:

Для тех кто не понимает как это может выглядеть, показываю наглядно:

Горизонтальная панель, представлена в трех размерах.

Выбрали горизонтальную панель! Идем дальше…

  • Следующее поле «Ограничить видимое кол-во иконок» не активно, оставляем как есть — оно нам не нужно!
  • Поле «Кодировка вашего сайта» — оставляете UTF-8.
  • Добавить кнопку «share42» — на ваше усмотрение.
  • Ссылка на RSS вашего сайта (фид): если ваш блог или сайт работает на движке WordPress то ссылка будет выглядеть так http://deffekt.ru/feed/.

Если на Joomla, то сначала необходимо включить создание rss ленты для определенного раздела вашего сайта, затем с помощью браузера Опера открыть ваш сайт и в адресной строке нажать на кнопочку rss, далее нажимаете на «Подписаться на rss 2.0». Браузер откроет ленту и в адресной строке вы сможете увидеть ссылку. Скопируйте ее и вставьте в поле на сервисе share42.

  • К вашему сайту подключен jQuery: Если не знаете — не ставьте галочку!

3. Готово! Переходим к третьему шагу… Посмотрим что у нас получилось!

Нажмите на эту кнопку (на сервисе share42) и откроется страница в новом окне, где будет продемонстрирована ваша горизонтальная панель.

Читать еще:  Что такое франшиза простыми словами

Друзья, при выборе количества кнопок учитывайте особенности дизайна вашего сайта. Не делайте слишком длинную панель. Если у вас шаблон с фиксированными размерами (как у меня), в пределах 15ти кнопок достаточно. Если резиновый шаблон (на весь экран) и область «контента» статьи большая,то не стоит забывать о том что при просмотре его с мелких экранов, он будет сужаться и кнопки будут переноситься на следующую строчку.

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

4. Установка скрипта на сайте.

1). Итак, скрипт скачали — распакуйте его! С помощью программы WinRar или другой.

Вот здесь многие допускают мелкую ошибку, из-за которой кнопки точно не будут работать.

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

Люди пишут мне что кнопки не работают, я смотрю к ним на сервер, а там такое. 🙂

2). Открываем программу Filezilla, устанавливаем соединение с нашим сервером.

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

В правой части, программа показывает содержимое вашего сервера. Зайдите в директорию /deffekt.ru/wp-content/plugins/ — здесь хранятся все наши плагины.

Теперь нажмите правой кнопкой на папке «share42» и выберите пункт «Закачать на сервер». Папка загрузится именно в директорию: /deffekt.ru/wp-content/plugins/

Проверьте что бы в «Журнале сообщений» было сказано:

Ответ: 150 Opening ASCII mode data connection for MLSD
Ответ: 226 Transfer complete
Статус: Список каталогов извлечен

Говорит о том что файл успешно передан (закачен) на сервер.

Отлично! Скрипт с вашими кнопочками на сервере, теперь осталось настроить их отображение.

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

3). Указать путь до папки на сервере:

4). Тип сайта: выбираем — «Wordpress».

5). Копируете код из поля и вставляете его в код файла single.php сразу после текста вашей статьи.

Давайте я покажу где найти и как открыть файл статей single.php
Через программу Filezilla заходите в директорию сервера:
deffekt.ru/wp-content/themes/название вашей темы/

находите там файл single.php, давите на нем правой кнопкой мыши и нажимаете «Просмотр/Правка» после чего он откроется в вашем (html/php) редакторе установленном по умолчание. Если у вас ее нет, скачайте и установите. Называется «Notepad++».

После того как файл откроется, ищите там такую строчку:

На отдельных страницах нашего сайта кнопки нам тоже понадобятся, поэтому этот код нужно добавить и в файл page.php. Аналогично добавлению в файл single.php.

6). Из поле в пункте 6 копируете весь CSS код необходимый для стилизации панели и добавляете куда-нибудь в самый конец файла style.css, найти его вы сможете в той же директории что и файл single.php. Открыть, вставить и сохранить. Очистить кэш и обновить страницу — это стандартная процедура после всех изменений.

Вертикальная панель (плавающая).
Здесь все по аналогии, только в «Опциях» на шаге 2 нужно указать кол-во видимых иконок. Если вы выберете размер «32×32» то лучше указать максимум 8 иконок. Все остальные будут видны при нажатии на стрелочку внизу панели. Как на рисунке выше, где я показал пример вертикальных панелек. Либо протестируйте это на панели самого сервиса.

Код я расположил следующим образом, последние 2 строчки — это код кнопок! Можно вставить его сразу после тега php the_content, я вставил немного по дальше.

Панель появилась таким образом. См. рисунок ниже. Как видите она наехала на область контента. Сейчас поправим. Для этого, в самом коде есть 3 параметра:
data-top1=»150″ — расстояние от верха страницы до панели;
data-top2=»20″ — расстояние от верха (при прокрутки страницы);
data-margin=»0″ — смещение панели по горизонтали. Что бы сдвинуть ее влево, поставьте значение, например -70, если в вправо, установите значение например 50.

Отсюда следует что мне нужно изменить последний параметр для того что бы сдвинуть влево. Выставляю значение data-margin=»-70″, сохраняю, удаляю кэш, обновляю страницу и видим результат. Панель сдвинулась влево, за пределы области контента (статьи).

Снова как в пункте 6 копируем код CSS и вставляем его в файл style.css.

Кстати, если вы загрузите папку со скриптом например в корневую директорию сайта, то вам необходимо будет закрывать эту директорию в файле «robots.txt» от индексации поисковых машин. Если в папку с плагинами, то она должна уже быть закрыта, при условии конечно если вы понимаете о каком файле я говорю, иначе «криндец»

7). Готово!

Внимательно подходите к установке кнопок, указывайте верный путь, перед тем как закачать папку со скриптом на сервер убедитесь что именно она является конечной директорией и именно в ней лежит скрипт. Позиционирование (расположение) плавающей панели корректируется 3-мя параметрами в коде, который вы вставляете в файлы single.php и page.php, если вы вставите код в файл single.php и будете проверять появилась ли панель при перезагрузке на главной странице, не удивляйтесь что ее не будет. Для появления ее на главной необходимо добавить код в файл index.php.

О преимуществах этих кнопок:

Такие кнопки будут загружаться значительно быстрее нежели различные плагины т.к. код максимально оптимизирован и сам по себе очень маленький. Кешируется браузером. Не появиться ни каких лишних исходящих ссылок!

Зачем нужны кнопки социальных сетей?

Суть размещения любых кнопок социальных сетей как вы понимаете, заключается в том, что бы посетители вашего сайта могли публиковать анонсы ваших материалов в своих аккаунтах различных социальных медиа (социальных сетях). Тем самым делясь ими со своими друзьями!

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

В идеале это должно происходить следующим образом : Вы пишете классную статью – посетители вашего сайта нажимают на кнопочки социальных сетей (share42) тем самым помещая ссылку с анонсом статьи на своей страничке в социальной сети – этот анонс попадает в новостную ленту друзей ваших посетителей – они читают и переходят по ссылке на ваш сайт – конвертируются в вашего подписчика посредством формы подписки (feedburner) либо подписываются в вашу рассылку, например от smartresponder – теперь уже они нажимают на кнопочки социальных сетей и отмечают вашу статью в своих аккаунтах социальных сетей (заметьте, разных социальных сетей) – в свою очередь анонс теперь попадает в ленту новостей их друзей – те переходят и т.д.

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

Не целевой трафик тоже важен, часто он становиться целевым! Повторюсь, друзья в идеале, посещаемость должна расти и конвертироваться в вашего подписчика!

Вот, к примеру, вы нажмете кнопочку после моей статьи и поместите ее к себе на страничку в контакте или еще где-нибудь, твиттере например, кто-нибудь из ваших друзей увидит, заинтересуется и перейдет. Прочтет статью и она ему понравиться, он найдет ее полезной для себя! Кому он будет благодарен? Вам! Потому что это вы ему порекомендовали этот материал. Значит, ему у вас есть чему по учиться – подумает он и также подпишется на рассылку ваших новостей и станет внимательнее относиться к тому, что вы ему рекомендуете в социальных сетях! Такой вот круговорот доверия! А доверие это залог успеха блоггера!

Читать еще:  Surfearner — заработок в расширении браузера (пассивный доход )

И еще один небольшой момент друзья, развивайте свои странички в социалках, находите с другими людьми общий язык. Тем более что, например во вконтакте есть лимит (ограничение) на количество друзей, не помню сколько, скажу потом! Отсюда следует, что будет гораздо лучше, если вы будете добавлять в друзья людей солидарных с вами в ваших интересах. Единомышленников. Отклик от таких друзей будет гораздо выше!

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

Соответственно вывод: Давайте чаще делиться нашими материалами, нажимать кнопочки! Ведь это так просто, а сколько от этого пользы.

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

На этом все! Жму кнопку «Опубликовать» и убегаю в спортзал! жду ваших комментариев, пока! Ниже кнопки и подписка!

Как добавить кнопки закладок и социальных сетей на сайт или блог. И зачем они нужны.

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

Зачем нужны эти кнопки на сайте?

Ну как зачем?:) Для того чтобы поделиться своей новой статьёй или новостью с друзьями, с людьми. Это дополнительный трафик на Ваш сайт, хотя и не большой, но всё же. Во вторых, для того, чтобы Вашу свеженькую статью побыстрее проиндексировали поисковые системы, и чтобы она побыстрее появилась в поисковой выдаче.

А вот эта причина, наверное, одна из самых важных в современном интернете.

В настоящий момент очень много появилось людей, веб мастеров, которые копируют Вашу информацию с сайта (плагиат), и непосредственно размещают её у себя на ресурсе, хуже того не ссылаясь на источник. Теперь представьте ситуацию: Вы написали статью, над которой трудились 5 часов, она уникальна, Вы её разместили, а в социальные закладки и сети не добавили. В один прекрасный момент на Ваш ресурс заходит нехороший человек копирует статью и размещает у себя на сайте. Очень повезёт если Вашу новую статью успеет проиндексировать поисковик на Вашем сайте. А если он её проидексирует на сайте нехорошего человека раньше чем на вашем? Соответственно статью, на которую Вы затратили много времени, поисковик засчитает как плагиат и может наказать за это. Не справедливо, правда?

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

Как добавить кнопки социальных закладок и сетей на сайт

Ну а теперь давайте рассмотри как же добавить эти заветные кнопочки на наш сайт:)

В этом нам поможет замечательный сайт share42.com. Почему именно этот сайт? Потому что всё очень просто и ясно по русски написано:) Скачал скрипт установил код на сайт и радуйся:) Теперь подробнее:

Заходим на share42.com, и видим список социальных сетей и закладок.

По умолчанию разрешение иконок стоит 32*32, Вы можете выбрать и меньше. Далее в представленном списке просто кликаем (выделяем) на иконки которые будут отображаться на Вашем сайте.

Ниже Вам предоставляются такие опции:

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

Скачали скрипт, теперь нужно зайти на вкладку «Установка».

Вам предоставят выбор движка сайта (в данном случае WordPress). Теперь нужно скинуть скачанный скрипт в корневую папку на хостинге, только чтобы папка с скриптом была доступна по адресу http://ваш сайт/share42/. Скинули?:) Затем заходим в админку блога далее в вкладку Внешний вид и выбираем редактор. Далее ищем файл (справа) single.php И теперь после записи вставляем вот этот код:

Естественно beloweb.ru заменяем на свой сайт.

У меня это выглядит так:

Желательно найти строчку наподобие

Или что то в этом роде всё зависит от вашего шаблона. Вы экспериментируйте. Ставьте код закладок выше или ниже, потом проверяйте, и всё получится. Я, например, так и делал:)

Добавляем стили

Ну а теперь нужно добавить стили к данному скрипту. Опять же заходим в админку — внешний вид — редактор. Справа (внизу) выбираем стили. И в открывшееся окно вставляем вот этот код:

Теперь в коду нужно присвоить

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

Желаю Вам успешной установки скрипта на сайт. Пока.

Дмитрий Амоти

Блог обо мне для меня

Share42 — скрипт для добавления на сайт кнопок социальных сетей и закладок (есть вариант плавающей панели)

  • WEB-разработка
  • WordPress

— 02.12.2013 02.12.2013

Хочу сегодня поговорить про плавающую панель от Share42 для их расшаривания в наиболее популярных социальных сетях (Твиттере, Фэйсбуке, Вконтакте и Google+). Зачем она нужна? — спросите вы. Наверное, пытаюсь идти в ногу со временем — мы плетемся в хвосте буржунета, а у них раскрутка сайта несколько отличается от нашей текущей действительности.

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

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

Зачем нужна панель Share42, ее достоинства

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

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

Блока Поделиться от Яндекса мне явно не хватает для решения этой проблемы, ибо он отображается в конце довольно длинных статей, которые не все дочитывают (или долистывают) до конца.

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

Сначала я пробежался по всем плагинам для WordPress, которые выводят нечто похожее:

Ну, во-первых, они все поголовно буржуйские и придется Вконтакте прикручивать вручную, а во-вторых, подгрузка в панель иконок со счетчиками шла довольно таки медленно и, похоже, подтормаживала сайт (а за скорость загрузки я боролся довольно долго). В общем, ничего не понравилось. Но тут я наткнулся на сервис Share42, который уже оказывается существует пару лет и его автором-создателем является безмерно мною уважаемый Dimox.

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

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

Читать еще:  Что такое дроп, дропнутый или освобождающийся домен

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

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

  1. Сервис позволяет добавлять кнопки популярных (или имеющих хоть какое-нибудь значение) именно в рунете социальных сетей и закладок, что само по себе имеет большое значение, да и к тому же вы можете выбрать один из трех возможных размеров этих самих кнопок:
  2. По вашему желанию вы можете располагать блок полученных кнопок как горизонтально (обычно в конце публикации), так и вертикально в виде плавающей панели, которая будет не слишком назойливо преследовать пользователя во время чтения или пролистывания ваших материалов
  3. Dimox не только талантливый верстальщик и дизайнер, но и сеошник. Поэтому вам не нужно будет озабочиваться тем, что вместе с кнопками социальных сетей вы добавляете на свой сайт N-ное количество открытых для индексации поисковиками внешних ссылок. Все ссылки на социальные сервисы будут закрыты через rel=nofollow и, как я понимаю, вставлены посредством ДжаваСкрипта (через onclick), что, возможно, еще пока не по зубам поисковикам.
  4. Все картинки выбранных вами социалок и закладок будут объединены в один файл формата PNG, который будет из себя представлять так называемый sprites. Это позволит уменьшить количество запросов вашего браузера к серверу до одного вне зависимости от числа выбранных вами соцсервисов и, следовательно, скорость загрузки сайта не уменьшится.
  5. Никаких подгрузок изображений и скриптов с других сайтов, которые могут работать не ахти как быстро, не будет — скрипт и спрайт с иконками сервисов будет размещаться на вашем собственном ресурсе.
  6. По умолчанию иконки социальных сетей и закладок на панели будут несколько засвечены, чтобы не резать глаз читателям. А при наведении курсора мыши на панель она очень приятно расцветает.
  7. Ну, и стоит сказать об универсальности скрипта Share42. Конечно же, я сам не проверял это утверждение, но если так говорит Dimox, то грешно будет сомневаться. На WordPress работает все замечательно и без каких-либо проблем.

Теперь про минусы:

  1. Нужно иметь хотя бы базовое представление о Html и CSS. Не думаю, что вы сразу же броситесь читать мои публикации, но все же надеюсь на ваше намерение сделать это в будущем (ведь я старался, писал, а появление этих статей вызывало только бурный отток подписчиков — печально).
  2. Так же нужно будет представлять хотя бы примерно, как устроена используемая вами CMS. Ну, в Joomla, например, не обязательно копаться в коде — можно использовать модуль с произвольным Html кодом (правда, для этого скрипта не пробовал).Но вот в WordPress лучше будет сначала прочитать статью про устройство тем (шаблонов) WordPress, ибо там отдельные файлы отвечают за формирование отдельных частей веб страниц.

Если минусы для вас не существенны (или вы готовы потоптаться на месте в поиске истины), а плюсы являются значимыми, то милости прошу читать данную статью дальше. Что называется — не переключайтесь. Я расскажу про очень простую настройку и просмотр созданной панели кнопок соцсетей на Share42, а так же про ее установку на WordPress. Не обессудьте, но именно на этом движке работает мой блог.

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

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

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

При желании вы сможете добавить еще и кнопочки из нижней области «Прочее» — добавление в избранное браузера пользователя, печать статьи, отправка ссылки на нее по E-mail или подписка на указанный вами чуть ниже адрес RSS ленты. На мой взгляд еще не хватает кнопок для Пинми или Pinterest, ибо эти фото-социалки сейчас очень серьезно набирают популярность.

На втором шаге мастера настройки сервиса Share42 вам предложат выбрать «Тип панели с иконками» — горизонтальную или же плавающую вертикальную, которую, собственно, выбрал я. Далее у вас будет возможность разбить все кнопки будущей панели на блоки по N штук и получить возможность переключения между ними. Для моих четырех штучек это оказалось излишним.

В поле «К вашему сайту подключен jQuery» я сначала поставил галочку, но скачанный после этого скрипт потом не заработал, поэтому галочку пришлось вернуть на место. Обязательно посмотрите как будет выглядеть ваш шедевр на примере, а уже потом скачивайте его себе на компьютер.

Распакуйте архив и киньте папку share42 (внутреннюю, т.е. ту, в которой непосредственно будет лежать файл PNG с изображениями выбранных вами иконок и файл скрипта) по FTP в любое место на вашем сайте (можно для этого скачать ФТП клиент или же использовать популярную программу для Windows — Total Commander).

P.S. Недавно у меня увели пароли из Файлзилы, ибо там, равно как и в Тотал Коммандере они не шифруются при хранении. В результате после проверки сайтов на вирусы выяснилось, что они все заражены и заблокированы в поисковых системах.

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

Я кинул эту папку в директорию с плагинами WordPress, поэтому на четвертом шаге мастера мне пришлось указать именно этот путь:

А так же я вынужден был поставить галочку напротив WordPress, ибо именно этот движок использует мой блог. Все, с настройками Share покончено и осталось только вставить предложенный на пятом и шестом шаге мастера Html и CSS код. Собственно, здесь обычно и возникают серьезные проблемы у неподготовленных пользователей.

Обратите внимание, что содержимое этого кода мгновенно изменяется при внесении изменений в ваши настройки (Аякс, очевидно, великий и ужасный). Поэтому, при выборе вертикальной плавающей панели, вам придется вставлять два фрагмента CSS кода вместо одного (при выборе горизонтальной панели). Но это все детали, хотя и очень даже впечатляющие и приятные (славься Димокс).

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

В WordPress он обычно называется Style.css и живет в папке с используемой вами темой оформления (/wp-content/themes/название темы). В Joomla файл стилей нужно искать в папке с используемым вами сейчас шаблоном (/templates/название шаблона)

Просто открываете этот файл на редактирование, например, в Html и CSS редакторе notepad ++ и добавляете в самый конец скопированные вами фрагменты именно стилевого кода (Html код будем вставлять в другое место). Сохраняете изменения и не забываете, зайдя в Файлзилу, эти изменения применить, согласившись с всплывающим предложением.

Ну, а теперь пришла пора разобраться с тремя строчками Html кода скрипта Share42. Автор советует вставить их перед или после статей. В WordPress сделать это не просто, а очень просто. Открываете на редактирование файл single.php из папки с вашей темой оформления (помните, она живет по адресу /wp-content/themes/название темы WordPress).

Можно вставить код сразу после статей. Для этого найдите строчку с функцией the_content и вставьте предложенный фрагмент сразу после нее, например, так:

Ссылка на основную публикацию
Adblock
detector