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

Share42 – онлайн конструктор кнопок соцсетей. Описание, настройка скрипта и добавление на сайт

22.01.2017

Здравствуйте дорогие читатели сайта. Ранее мы рассматривали что такое кнопки социальных сетей и как добавить их на сайт. Это были кнопочки официальных соцсетей и поисковых систем.

Сегодня же поговорим о сторонних сервисах, которые позволяют устанавливать подобные share buttons.

Речь пойдет о сервисе Share42, позволяющий разместить на своем ресурсе красивые и функциональные социальные кнопки и закладки.

Share42.com – это онлайн конструктор кнопок всех популярных социальных сетей и закладок.

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

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

Представьте себе такой случай.

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

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

Достоинства

1. Можно добавлять в панель иконки всех популярных (и не очень) социальных сетей и закладок. Выбирать размер иконок, на выбор предложено три варианта
2. Как и в любом конструкторе, вы можете самостоятельно настраивать внешний вид. Удалять, добавлять иконки, менять их местами, то есть, выбирать какие, и  в какой последовательности кнопки будут отображаться на вашей панели
3. Установив скрипт иконок, вы не добавляете на сайт лишние исходящие ссылки выбранных сетей. Так как все выводится при помощи одного Java скрипта
4. Скрипт не замедлит скорость сайта. Так как не будет происходить дополнительных загрузок со сторонних ресурсов, все нужные файлы (сам скрипт и файл с иконками) будут размещены на вашем сервере
5. Все иконки выполнены в виде одного спрайта. Что исключает дополнительные обращения клиента (браузера) к серверу при загрузке панели. В независимости от количества выбранных вами соцсетей в панели, ваш браузер обратиться только один раз к серверу при ее загрузке
6. Универсальность. Можно установить на сайт с любой CMS, или с чистым HTML кодом
7. При всей своей навязчивости плавающей панели иконок она будет засвечена, чтобы меньше мусолить глаза посетителю. Только при наведении на нее она приобретет цвета

Недостатки

1. Обладание начальными знаниями HTML. Но это не критический минус, прочитав этот обзор, вы сможете запросто установить у себя на сайте панель кнопок сервиса Share42.com
2. Уметь разбираться в устройстве вашей CMS (если вы таковой пользуетесь)
3. Плавающая панель не работает в старых браузерах (Opera 12.18)

Как говорилось выше этот сервис настоящий конструктор кнопок соцсетей и закладок. Поэтому настройка панели должна быть простой. Рассмотрим этот процесс детально.

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

Вторым этапом в конструкторе Share42 является настройка внешнего вида

Здесь мы видим:

1. Тип панели. Вы можете выбирать какой блок кнопок желаете горизонтальный (классический) или вертикальный (плавающий)
2. Ограничить количество кнопок. Этот пункт будет активен в случае выбора вертикального типа отображения блока. Он ограничивает видимость кнопок на вашей панели. Если число картинок больше указанного вами, то остальные будут скрыты
3. Кодировка. Выбираете в какой кодировке написан ваш сайт. Если не верно указать ее, то панель может не корректно отображаться
4. В следующем пункте вы можете поставить галочку, если хотите видеть в вашем блоке картинку сайта Share42.com
5. Ссылка на RSS. Здесь указываете адрес вашей рассылки. Она будет работать, если у вас в панели будет кнопка RSS рассылки
6. Следующим пунктом подтверждается, что сайт подключен к jQuery. Это необходимо для публикации счетчиков расшариваний
7. Далее, будут ли показываться счетчики. Это зависит от предыдущего пункта настройки

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

Теперь переходим к процессу установки панели Share42 на сайт. Рассмотрим установку на простой сайт с HTML.

Для начала скачиваем архив, сгенерированный конструктором. Распаковываем его и видим папку /share42/, а в ней 2 файла:

1. icons.png – файл картинок
2. share42.js – непосредственно скрипт блока иконок

Помещаем папку в корень вашего сайта на сервере. Далее заполняем поля формы установки панели картинок

В поле «Укажите путь до этой папки» указываем путь к распакованной папке /share42/ (как показано на скриншоте вверху). Указав путь, ниже появится ссылка на файл java, находящийся в папке, для проверки правильности указания URL.

Если проверка была успешной, тогда выбираем тип сайта, на который устанавливается блок кнопок. В моем случае выбрано «Любой сайт», так как я пишу на HTML без поддержки каких либо CMS. Если у вас не так, то указывайте свою оболочку сайта.

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

Если вы в конструкторе выбрали вертикальную (плавающую) панель, ваш сгенерированный код будет выглядеть вот так:

Как видите, в коде появились новые параметры. Давайте их рассмотрим подробнее.

1. data-top1 – это расстояние до верхнего края панели от начала страницы
2. data-top2 – это расстояние от верхнего края экрана до панели
3. data-margin – смещение панели по горизонтали. Если значение отрицательное, то смещение влево, если положительное, то вправо

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

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

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

Как видите, онлайн конструктор кнопок Share42.com очень прост в использовании. Как настройка блока картинок, так и установка кода этого блока на сайт не должна у вас вызвать затруднений.

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

Всем удачи и до скорых встреч на страницах моего сайта!!!

Источник: http://1st-finstep.ru/konstructor_socialnix_knopok_share42.php

Практичные социальные кнопки от share42.com

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

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

Сервис share42 предлагает на выбор 3 размера кнопок 32х32 пикселей, 24х24 пикселей и 16х16 пикселей каждая. Помимо этого в этой менюшке есть ссылки для выделения всех значков одним кликом или инвертирования выделения (те, которые были выделены, станут не выделенными и наоборот).

Определившись с размером мы должны создать список необходимых нам социальных сервисов + по желанию можем добавить кнопки из раздела «Прочие».

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

Поэтому разработчики продумали этот момент и создали возможность перетаскивать значки в нужном нам порядке.

После того, как мы создали свой набор, прокручиваем страницу вниз. Там мы видим возможные настройки блока. Сначала выбираем тип блока: горизонтальный или плавающий вертикальный.

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

Как правило я не пользуюсь этим ограничителем.

Кодировку сайта ставим UTF-8 (стандартная для wordpress). Ежели у вас вдруг в последующем будут кракозябры, то попробуйте создать скрипт заново, указав кодировку windows.

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

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

Галочку у «добавить иконку сайта share42.com» убираем, если не хотим рекламировать этот сервис. Затем вставляем необходимые настройки для определённых кнопок (если потребуются). Я выбрал кнопку rss-ленты, поэтому меня просят ввести ссылку на мой rss. Что я и сделал.

Что касается вопроса про jQuery, то если вы не уверены, что он у вас на сайте используется, то не ставьте галочку (лучше скрипт закинуть к закрывающему , чтобы конфликтов не вызывать).

Если знаете, что он установлен — то смело ставим галочку.

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

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

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

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

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

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

Загружаем на хостинг не сам архив, а папку, которая в нем. Для этого нужно его разархивировать и затем уже папку закачивать на сервер.

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

Первые 2 пункта мы уже успешно выполнили, поэтому можем приступить к пункту 3, который позволяет нам проверить, правильно ли мы загрузили папку на наш хостинг.

Для этого указываем в поле для ссылки адрес вашего сайта (в моем случае https://mywpnote.ru/) и затем добавляем имя папки (если не переименовывали, то share42/).

Для моего блога я получаю вот такую ссылку: https://mywpnote.ru/share42/

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

В пункте 4 выбираем тип сайта, куда будем вставлять код. Я вставляю к себе на вордпрес, поэтому выбираю соответствующий пункт.

Пункт 5 нам даёт код, который нужно интегрировать к себе на блог. Если хотите чтобы социальные кнопки отображались на всех страницах вашего блога, тогда вставьте этот код в footer.php (через редактор темы) перед закрывающим тегом . Обратите внимание на параметры data-top1=”150″ и data-top2=”20″.

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

На остальные параметры можете не обращать внимания.

Что же касается пункта 6, то он не обязательный, однако для красивого отображения блока я рекомендую добавить этот код в конец файла темы style.css (опять же через редактор темы).

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

Если у вас возникнут вопросы при установке этого скрипта, то вы можете оставить их в комментариях к статье, и я постараюсь вам помочь.

Источник: https://mywpnote.ru/skriptyi-i-gotovyie-resheniya/praktichnyie-sotsialnyie-knopki-ot-share42-com/

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

Поделится ПоделитсяТвитнутьGoogle

Данный пост является продолжением цикла постов «Социальные кнопки«.

Как я и обещал в предыдущем видеоуроке «Кнопка twitter – Как добавить кнопку twitter на свой сайт» речь пойдет про социальные кнопки, которые очень сильно могут привлечь к вашему посту большое количество посетителей с социальных сетей и сервисов, естественно при условии высокого качества самого поста.

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

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

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

Социальные кнопки share42.com

Демо можно посмотреть с левой стороны страницы данного поста.

Основные преимущества социальных кнопок закладок и сетей от Share42.com

• Единый стиль иконок.
• Выбор размера иконок: 32х32, 24х24, 16х16
• Оптимизированный код скрипта, кэшируется браузером, код скрипта устанавливается на ваш блог и не зависит от сторонних сайтов. Данный метод позволит избежать потери в скорости загрузки блога.
• Простая установка на ваш блог.
• Все ссылки формируются с помощью JavaScript и поэтому на блоге не увеличится количество внешних ссылок.
• Оптимальный HTML-код. В шаблон блога вставляется всего одна строка кода, а весь код формируется с помощью JavaScript.
• Скрипт работает на любых CMS и платформах.
• Набор иконок группируется в одну картинку (спрайт), что так же снижает количество обращений к серверу.
• Большой выбор социальных сервисов (45 кнопки).
• Возможность использования css стилей для иконок.

Как установить кнопки социальных сетей на wordpress мы рассмотрим в видеуроке
на примере социальных кнопок от Share42.com

1. В первую очередь заходим на сервис  и настраиваем нужные вам кнопки и параметры для их вывода.
2. Скачиваем на свой компьютер сформированный архив.
3. Закидываем папку из скаченного архива на хостинг в корень блога.
4. Вставляем в шаблон полной новости блога single.php следующий код:

Источник: http://studio-gost.ru/kak-ustanovit-knopki-socialnyx-setej-na-wordpress/

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

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

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

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

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

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

 Теперь представьте ситуацию: Вы написали статью, над которой трудились 5 часов, она уникальна, Вы её разместили, а в социальные закладки и сети не добавили.

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

 А если он её проидексирует на сайте нехорошего человека раньше чем на вашем? Соответственно статью, на которую Вы затратили много времени, поисковик засчитает как плагиат и может наказать за это. Не справедливо, правда?

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

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

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

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

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

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

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

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

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

Вам предоставят выбор движка сайта (в данном случае WordPress).

 Теперь нужно скинуть скачанный скрипт в корневую папку на хостинге, только чтобы папка с скриптом была доступна по адресу http://ваш сайт/share42/.

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

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

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

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

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

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

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

Теперь в коду нужно присвоить . В общем код закладок будет выглядеть так:

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

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

Источник: http://beloweb.ru/wp/kak-dobavit-knopki-zakladok.html

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

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

Но минус плагинов в том, что они нагружают сайт тем самым теряется скорость загрузки страниц. И поэтому недавно я отключил этот плагин и поставил на свой сайт блок кнопок от сервиса Share42. О том как установить эти соц-кнопки от этого сервиса я и хочу вам поведать. Тем более меня уже просили об этом некоторые мои читатели.

Update: сейчас на сервисе Share42 скрипт видоизменился. А на блог я установил кнопки от другого сервиса. 

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

Перейду сразу к делу без лишней воды. Сразу хочу предупредить о том, что эту процедуру установки скрипта кнопок, будет удобнее всего провести при помощи FTP клиента FileZilla и очень удобного и не менее полезного блокнота Notepad++   Поэтому, кто не установил их себе для работы и не научился ими пользоваться, прочитайте эти статьи и сделайте это.

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

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

1. выбрать кнопки, кликая по ним.
2. выбрать опции.
3. посмотреть как они будут выглядеть на вашем сайте.
4. указать путь до папки со скриптом (адрес вашего сайта).
5. указать тип движка сайта.
6. скачать архив сгенерированного скрипта на свой компьютер.
7. распаковать архив и загрузить папку на хостинг.
8. вставить сгенерированный код в файл single.php.
9. вставить специальный код в файл style.css.

А теперь разберём всё по порядку:

1) Нужно сначала определиться с размером кнопок. Я выбрал 32х32. И потом нажимая на кнопки (при нажатии-выделяется, при повторном нажатии выделение снимается), выбрать те, которые вы собираетесь поставить на свой сайт.

Кнопки можно перетаскивать. Почему их нужно правильно скомпоновать? Потому что, в каком порядке вы их составите слева-направо, в такой последовательности они и будут у вас отображаться на сайте.

Я выбрал вертикальную панель, поэтому сверху у меня топовые и знакомые мне социальные сети — ВКонтакте, Фейсбук, Мой Мир, Твиттер, Однокласники и Гугл+, а при нажатии на маленький треугольник внизу панельки, — выплывают остальные 7 кнопок…

Вообще всего на этом сервисе 45 кнопок, из которых есть 5 Прочих:

Я выбрал 14 кнопок, в которых есть и соц-закладки и кнопка подписки по RSS. А ещё добавил кнопку Вверх, тем самым немного разгрузив свой блог, отключив плагин Scroll To Top

2) Выбираем нужные нам опции.

•  Выберите Тип панели. Сразу предупреждаю, что горизонтальную будет проще установить, но мне понравилась плавающая.
• Ограничить видимое кол-во кнопок. Если бы я не поставил тут галочку и не выбрал бы количество, то у меня панелька была бы очень длинной и естественно не эстетичной. Ну зачем делать такой паровоз? Вы можете ограничить до 4-5 кнопок, а остальные будут выплывать при нажатии на стрелочку.
• Кодировка в  WordPress — UTF-8.
• Язык подсказок естественно русский.
• Я не добавлял иконку Шаре.
• Если вы выбрали в панель кнопку RSS, то тут вам нужно вставить адрес вашей RSS ленты. Как узнать адрес вашей ленты — читайте тут.
• Я не знаю что такое Кверри, поэтому галку не ставил.

3) Смотрим как блок кнопок будет выглядеть у нас на сайте и ничего пока не скачиваем.

Если вам всё понравилось, идём в следующий пункт.

4 и 5)  — Укажите путь до папки со скриптом. Т.е. пропишите адрес главной страницы вашего сайта и добавьте в конце /share42/

-Укажите тип движка.

6) Вот теперь скачиваем сгенерированный скрипт к себе на комп.

7) Распаковываем скачанный архив программой Win Rar и закачиваем эту папку со скриптом себе на хостинг в дирректорию public_html. Ещё раз повторю, что это делать удобнее всего через  FTP клиент FileZilla , либо другой файловый менеджер.

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

Внимание!!! Перед этим действием — сделайте копию вашего файла single.php, дабы обезопасить свой сайт от неприятностей. Если что-то сделаете ни так и сайт сломается, то загрузите этот файл обратно и всё опять будет чики-пуки…

8 ) Блокнотом Notepad++ открываем на редактирование файл single.php, который находится по адресу /public_html/wp-content/themes/ название вашей темы/single.php/  и вставляем 3 строчки этого скрипта  в верхнюю часть (у нас вертикальная плавающая панель) файла single.php

Я подчеркнул зелёным цифры 150 и 20, потому что от этого зависит в каком месте появится блок кнопок. У меня подошло значение 400,20. Т.е вставляете код в файл и исправляете значение 150 на подходящее вашему сайту. Поэкспериментируйте с этим значением.

И ещё, Важно!!!У каждого сайта разные шаблоны и по разному написан html код файлов, поэтому не удивляйтесь что у вас не получится с первого раза-как было и у меня. У меня всё заработало, когда я код вставил вот в это место, за тегом get_header(); ?>

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

9) Настроим стиль панели. Блокнотом Notepad++ открываем на редактирование файл style.css  Он находится по адресу /public_html/wp-content/themes/название вашей темы/style.css. И в самый низ этого файла вставляем 2 кода стилей.

 Со значением смещения панели влево margin-left придётся «поиграть». Я например настроил со значением  75. А вы экспериментируйте.

Источник: http://dengi-iz-ineta.ru/knopki-socialnyx-setej-dlya-sajta-share42-kak-razmestit-ix-na-sajt/

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

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

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

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

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

Что в итоге вы получаете:

1) Увеличивается ссылочная масса сайта, что положительно скажется на ранжировании страниц площадки в выдаче ПС.

2) Вы получаете бесплатный трафик на сайт.

3) Рост показателей ТИЦ — тематический индекс цитирования и PR — page rank.

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

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

Share42.com

Благодаря Dimox, популярнейшего блогера, появился отличный сервис Share42.com. Он настолько прост в использовании, что с помощью него установить кнопки соц сетей на сайте сможет даже школьник.

Первое. Переходим на сайт Share42.com. Далее выбираем какого размера будут значки кнопок 32×32, 24×24 или 16×16.

Теперь кликаем по тем кнопкам, которые будут добавлены к вам на сайт. Можете накликать хоть штук 20. Я выбрал самые основные одноклассники, в контакте, твиттер, фейсбук.

Не забывайте и про кнопки из вкладки «Прочие». Они помогут оформить RSS  подписку или сделать закладку страницы.

Второе. Теперь настраиваете необходимые под себя опции и выбираете горизонтальное или вертикальное размещение кнопок.

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

Ставим кодировку сайта UTF-8. Выбираем язык подсказки иконок «Русский». Если есть желание добавить иконку сайта Share42.com, тогда ставим напротив галочку.

Прописываем ссылку на RSS вашего фида (Например, у моего блога фид feeds.feedburner.com/seoslim).

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

Четвертое. Самая сложная часть установить работу скрипта на блоге. Распаковываем скаченный ранее скрипт на компьютере. С помощью FTP — менеджера закачиваем папку share42 к себе на хостинг.

Я для своего удобства в корне файлов блога создал отдельную папку file и залил папку share42 именно туда.

Вот такой получился адрес к папке:

http://seoslim.ru/file/share42

http://seoslim.ru/file/share42

Так как я делаю социальные кнопки для wordpress, поэтому выбирал из списка тип сайта: wordpress.

Источник: http://SEOslim.ru/wordpress/kak-ustanovit-knopki-socialnyx-setej-yandeks-knopki-socialnyx-setej-dlya-sajta.html

Интернет помощник в сети

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

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

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

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

Ссылки уже закрыты от индексации, а также скорость страницы не изменится.

Установка плавающей панели соц. кнопок на WordPress

Предлагаю скачать скрипт

jQuery скрипт плавающей панели кнопок социальных сетей

Скрипт и значки соц. сетей помещаем в 1 папку вместе.

1. Убедитесь, что у вас на сайте подключен jQuery. Для этого зайдите на сайт, нажмите правой кнопкой мыши по странице и выберите «Исходный код страницы» или комбинацией «Ctrl + U». Далее надо найти строчку со словом «jquery» возможно, в вашем шаблоне установлен, например у меня строка выглядит так «js/jquery/jquery.js?ver=1.8.3», тогда пропускаем шаг, если нет, то устанавливаем на сайт:Стоит установить последнюю версию jQuery, поэтому зайдите на сайт jquery.com и скачайте последнюю версию
   После чего загружаем скрипт в любое место по FTP клиенту FileZilla, затем открываем файл header.php, лучше использовать редактор кода Notepad и добавляем между тегами код:
2. Далее устанавливаем скрипт самой плавающей панели кнопок. Загружаем его на сайт, а далее открываем тотже файл header.php и между тегами добавляем код:
3. Далее добавляем функцию, которая будет выводить панель кнопок соц. сетей. Если хотите выводить только в статьях, то добавьте код в файл single.php перед началом статьи, строка выглядит так: ( у вас может быть и другой, но находится в верху файла с кодом). Добавляем эту функцию:
4. Далее идем в файл стилей и добавляем

   Здесь ширина значков предполагается 50х50, если у вас картинки другого размера, то поменяйте это значение

5. Осталось открыть скрипт ( ссылка выше в 1 пункте). Редактируем строчку

   Здесь указываем полный путь до файла, т.е. http://вашсайт.ru/wp-content/uploads/sociak.js, к примеру такой путь.

Блок социальных кнопок для WordPress

1 Пример

Заметили? Эти кнопки точь в точь, как в плагине Social Share Buttons, но только без помощи плагина. Поэтому напишу, как заменить плагин Social Share Buttons на код:

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

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

Источник: http://iglous.ru/knopki-socialnyx-setej-bez-plaginov-plavayushhaya-panel-knopok-socialnyx-setej/