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

Автор: Рустам Борисов
Рубрика: Социальные медиа
Опубликовано:
просмотров: 7529

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Бесплатный сервис - share42

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

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

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

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

Генератор скрипта (конструктор кнопок социальных закладок и сетей)

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

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

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

Выбор опций

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

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

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

Горизонтальная панель кнопок в 3х размерах

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

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

  • Следующее поле «Ограничить видимое кол-во иконок» не активно, оставляем как есть — оно нам не нужно!
  • Поле «Кодировка вашего сайта» — оставляете 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/ — здесь хранятся все наши плагины.

Загрузка скрипта на сервер с помощью программы Filezilla

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

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

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

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

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

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

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

http://deffekt.ru/wp-content/plugins/share42/

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

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

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

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

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

<!--?php the_content( '' ); ?-->
<!-- Вставляйте код сразу после строки что сверху -->
<!-- Или вставьте код сразу перед строчкой что снизу -->
<div class="comments"></div>

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

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

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

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

<!--?php the_content( '' ); ?-->
<!-- End content -->
<div class="share42init" data-url="&lt;?php the_permalink() ?&gt;" data-title="&lt;?php the_title() ?&gt;" data-top1="150" data-top2="20" data-margin="0"></div>
<script type="text/javascript" src="http://deffekt.ru/socv/share42.js"></script>

Панель появилась таким образом. См. рисунок ниже. Как видите она наехала на область контента. Сейчас поправим. Для этого, в самом коде есть 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 – теперь уже они нажимают на кнопочки социальных сетей и отмечают вашу статью в своих аккаунтах социальных сетей (заметьте, разных социальных сетей) – в свою очередь анонс теперь попадает в ленту новостей их друзей – те переходят и т.д.

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

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

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

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

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

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

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

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

С уважением, Борисов Рустам.

Подпишись на обновления!
  1. Елена

    Как же все это интересно и хочется выставить естественно у себя на сайте.Но у меня еще нет этой самой Filezilla…

  2. Рустам Борисов

    Елена, посмотрите на главной, я писал об этой программе! Там все просто!

  3. Игорь

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

    • Рустам Борисов

      Игорь, пожалуйста!

  4. Надежда

    Если плагин уменьшает скорость сайта, можно просто код кнопок взять на сайте api.yandex.ru/share/ и вставить их в сайт бар. Они действуют и при открытии статей и просто в рубриках.

    • Рустам Борисов

      C плагинами лучше не связываться, в них 2 страницы кода, а в таком скрипте 5 строчек. Плагины конфликтуют с другими плагинами, появляются внешние ссылки.

      • Надежда

        Все равно без плагинов пока не обходимся. Хотела интернет магазин залить на сайт, скачала его папкой zip, но так и не разобралась. Я и раньше способ партнерства с магазином искала, но пока только нашла способ, как открыть свой интернет магазин. Просто вставив HTML код.

        • Рустам Борисов

          Надежда, вы говорите о плагине wp-shop? Партнерскую программу могу вам подсказать хорошую, напишите мне на почту!

  5. Надежда

    А за статью отдельное спасибо, я к ней еще вернусь.

    • Рустам Борисов

      Надежда, Пожалуйста!

  6. Razbirishka

    Огромное спасибо за совет. Слона то я, и не заметил. ))) Правда для меня все это филькина грамота. К сожалению могу производить изменения только по урокам или конкретным советам. Боюсь, что если что то напортачу, то потом без шаблона останусь. Убрать ссылку из футера можно прямо в редакторе? Как правильно убрать, чтобы не нарушить целостность шаблона. Да, если захотите написать мне, то пишите сюда: pav100moj@yandex.ru
    Еще раз спасибо ))

    • Рустам Борисов

      Пожалуйста!
      «К сожалению могу производить изменения только по урокам или конкретным советам»
      Всегда так по началу! Да файл footer.php открываете в редакторе и вы увидите там ссылку, даже две, в тегах, аккуратненько их оттуда удаляете и все! Перед тем как удалять сделайте резервную копию файла footer.php и вы вседа сможете вернуть все как было если что то у вас не получиться. 😉

  7. Ivan

    Подскажи у меня тема Вордпресс Матала, не могу разобраться куда вставить скрипт Share42, пробовал в single,index,header,style, ничего не помогает, адрес проверял несколько раз не отображается! вставлял и в начало и в конец и посередине(

    Помоги, что это может быть?!!!

    • Рустам Борисов

      Иван, какой у Вас сайт? :) Необходимо вставить в single.php, page.php и в index.php

  8. Seoexam

    Ох сколько уже таких постов наплодилось то))) На каждом шагу встречаю т.к сам недавно задавался этим вопросом)

    • Рустам Борисов

      Может быть у меня хоть в чем-то чуточку понятнее! Тем более я всегда рад помочь, если что-то не получается ;-)

  9. Анастасия

    добрый день! у меня на сайте стоит тема toyzine_fleximag. Я вставила в файле single.php , index .php и page.php код (из пункта 5.) после echo $metadataContent; т.к. тега php the_content я там не нашла=(. Но кнопки не появились, помогите ,пожалуйста,
    как настроить правильно?

  10. Светлана

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

    Успехов Вам!

    • Рустам Борисов

      Большое спасибо! И Вам успехов!

Оставить свой комментарий
:) :-D ;-) :-| [star] [good] [flower] [present] [:-))] [:))] [:--_)] [:-|]

Subscribe without commenting