Как к share42 прикрутить метрику яндекс

Есть замечательный сервис социальных кнопок share42 о нем я рассказывал в данном посту “Как установить кнопки социальных сетей на wordpress” и есть такая штука как Яндекс метрика, предназначенная для сбора статистики посещаемости вашего блога. И в метрике есть раздел «Кнопка “Поделиться”» в нем отслеживается на какие страницы вашего блога и в каком количестве были оставлены ссылки в социальных сетях. И сейчас мы рассмотрим как можно объединить эти два сервиса.

[spoiler name=”ВидеоурокДля открытия – нажмите“]

[/spoiler]
[spoiler name=”Необходимые данныеДля открытия – нажмите“]

Что бы объединить share42 и Яндекс.Метрику нам потребуется часть социальных кнопок заменить, а именно те кнопки которые задействованы на сервисе Яндекс “Поделиться”. Но Вы скажете: “Там иконки совсем другого стиля и маленькие!”. И это не проблема мы приведем иконки к общему стилю, а именно все иконки будут как на share42. И так приступим.

Подключаем Яндекс “Поделиться”

C начала подключаем Яндекс “Поделиться” в файле single.php вставляем код:

[crayon lang=”html”]

[/crayon]

Данный код вставляет все кнопки которые задействованы на Яндексе, кому надо настроить под себя то идем на сервис и шаманим там сами.

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

Далее мы настраиваем все остальные кнопки и берем их с сервиса share42. Как установить иконки в этом статье мы рассматривать не будем, так как данную тему мы уже затрагивали в одном из предыдущем видеоуроке “Как установить кнопки социальных сетей на wordpress” там все подробно рассказано.

Вставляем CSS стили

Далее и самое главное вставляем css стили именно благодаря им мы и сможем заменить иконки на свои. Картинку с иконками можно взять ниже.

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

Нижеуказанный код вставляем в style.css вашего шаблона:

[crayon lang=”css”]
#share42 {
display: inline-block;
padding: 6px 0 0 6px;
}

#share42 a {opacity: 0.7;}
#share42 a:hover {opacity: 1}

.b-share-icon{margin: 0 1px 0 0;opacity: 0.7;width:24px !important;height:24px !important;background:url(Ссылка на картинку с иконками) 0 100% no-repeat !important}
.b-share-icon:hover {opacity: 1}
.b-share-icon_facebook{background-position:-48px 100% !important}
.b-share-icon_odnoklassniki{background-position:-96px 100% !important}
.b-share-icon_moimir{background-position:-120px 100% !important}
.b-share-icon_lj{background-position:-144px 100% !important}
.b-share-icon_friendfeed{background-position:-168px 100% !important}
.b-share-icon_moikrug{background-position:-192px 100% !important}

.b-share-icon_twitter{background-position:-72px 100% !important}
.b-share-icon_vkontakte, .b-share-icon_custom{background-position:-24px 100% !important}
.b-share-icon_gplus{background-position:-216px 100% !important}​
[/crayon]

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

[/spoiler]

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