Главная Часть 2. Раскрутка и оптимизация блога Глава 1. Поисковики Урок 54. Как красиво разместить кнопки «Мне нравится» под статьями?

Урок 54. Как красиво разместить кнопки «Мне нравится» под статьями?

Кнопка мне нравится вордпресс

Привет!

Пишу я этот урок по просьбе одного из читателей. В нем я расскажу, как сделал панель из 4-х соц кнопок: «Мне нравится» от вконтакте, «Рекомендую» от фэйсбука, «Твитнуть» от твиттера, и «Гугл+» соответственно от гугла. Зачем нужны эти кнопки? В одной из статей по SEO я писал, что эти кнопки напрямую влияют на авторитетность страницы, чем больше лайков, тем больше авторитета. Так же это очень хорошая вещь для расрутки сайта. Допустим я ретвитнул Вашу запись, у меня 500 читателей. Из них 60 перешли по ссылке к Вам. Вот так и увеличивается трафик.

Урок состоит из 2-х частей:

  1. Регистрация в соц сетях, получение html кода кнопок.
  2. Создание таблицы (4 столбца, 1 строка) и внедрение в каждый столбец кода нужной кнопки.

Этап 1. Регистрация в соц сетях, получение кода кнопок.

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

Твиттер

  1. Идем на страницу получения кнопки Твиттера. Переходим по этому адресу http://twitter.com/goodies/tweetbutton
  2. Выбираем одну из кнопок. Я выбрал первую.
    кнопки твиттера
  3. Настроек никаких не меняем, если не надо. У меня все автоматом заполнилось. Если Вам нужен другой язык или другой аккаунт, тогда измените в настройках.
  4. Копируем html код, пока заносим его в блокнот, чтобы не забыть. Ну или в ворд: вставьте куда удобно, чтобы был под рукой.
    html код кнопки твиттера

Вконтакте

  1. Переходим на страницу http://vkontakte.ru/developers.php?o=-1&p=Like (если не авторизованы, то авторизуйтесь).
  2. В графе «Сайт\приложение» выбираете «Добавить новый сайт», затем пишете название и адрес сайта. И нажимаете «Сохранить».
    настройки вконтакте
  3. Дальше настраиваем по своему вкусу (размер, вид кнопки, ее значение). Лично я выбрал кнопку с «текстовым счетчиком». Название кнопки - «Мне нравится».
    настройка кнопки мне нравится
  4. Теперь надо скопировать код. Как Вы видите. он состоит из 2-х частей. Первую часть, что помечена

    Нужно вставить в header.php. Вот эта часть:
    1 часть кода
  5. Открываем header.php и вставляем этот код над закрывающим тегом .
    head
  6. Теперь копируем оставшийся код, и так же вставляем, например, в блокнот. Чтобы тоже под рукой был.

Гугл+

  1. Переходим сюда http://www.google.com/webmasters/+1/button/index.html
  2. Меняем настройки. Я выбрал размер «Medium» (20 пикселей), т.к. остальные кнопки от вконтакта и тп, примерно такого же размера. Выбрал русский язык, и в графе «Annotation» выбрал «bubble». Но это на мой вкус, Вы, разумеется, можете выбрать любую другую.
    кнопка гугл+
  3. Теперь копируем код. Он, как и в случае с Вконтактом, тоже состоит из 2-х частей. Но вот тут есть небольшая проблема. Когда я ставил себе эту кнопку, я открыл 2 мануала по размещению ее кода. В первом говорилось, что размещать надо так же перед , во втором, что надо размещать перед в файле footer.php. Как я помню, эта кнопка у меня не работала не в том и не в другом случае. И вот я начал экспериментировать. И в конечном итоге просто вставил все 2 кода вместе в панельку, и кнопка заработала! Поэтому скопируйте весь код, но в другом порядке. Сначала пускай будет

    А затем:

  4. Сохраните этот код там же где сохраняли коды твиттера и вконтакта.

Фэйсбук

  1. Идем сюда http://developers.facebook.com/docs/reference/plugins/like
  2. Вот какая картина предстала перед Вами
    фэйсбук лайк
    URL to Like (Ссылка на страницу с лайком) - Оставляйте пустым это поле.
    Send Button (Кнопки «Отправить») - она довольно большая и не нужная. Я убрал эту галочку, и Вам советую.
    Layout Style (Вид кнопки) – кому как нравится, лично я выбрал «button_count», на мой взгляд самая красивая.
    WIdth (Ширина) – Я оставил стандартную, но можете рассчитать ее специально для своего шаблона.
    Show Faces (Показывать аватарки) – тоже зависит от Вашего вкуса. Я убрал эту галочку.
    Verb to display (Слово на кнопке) – Тут 2 варианта: Like и Recommend. Я выбрал лайк.
    Color Scheme (Цветовая схема) – Можете выбрать один из двух вариантов: светлый, темный. Я выбрал светлый, так лучше смотрится.
    Font (Шрифт) – советую выбирать шрифт, который у Вас на блоге. В моем случае это Segoe UI
  3. Нажимаем на кнопку «Get Code».
  4. Снова 2-х видовой код. Тут есть выбор языка, я выбрал HTML5. Копируем первый код, который имеет вид:

    И вставляем его в файле footer.php перед тегом закрывающим

  5. Вторую часть кода так же сохраняем.

Этап 2. Создаем панель социальных кнопок

И так, у нас есть код 4-х кнопок. Наша задача разместить их по горизонтали друг за другом. Получиться должно как-то так:

Твитнуть «Мне нравится» ВК Гугл+ Фэйсбук

Как это сделать? Если у Вас есть хотя бы базовые знания в html, то Вы, разумеется, знаете о таблицах. Раньше даже был популярным вид верстки сайта - табличный. Когда весь сайт представляли в виде одной большой таблице с большим количеством столбцов и строк. И в каждой ячейке прописывали свой код. В одной меню, в другой шапку, в третьей контент. Так и получался целый сайт.

В данном случае предлагаю сделать тоже самое. Создать таблицу с 1-й строкой и 4-мя стобцами и в каждой ячейке прописать код нужной кнопки.

Ниже я приведу код такой таблицы:

<!Начало четвертого столбца-->

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

Вот как у меня получилось:

Таблица с кодом

И да, чуть не забыл. В таблице надо немного подправить стиль. Сделать это можно с помощью css. Мы задали «имя» для таблицы, чтобы в файле style.css задать стили и прописать имя таблицы, для которой эти стили будут работать.

Идем в style.css и прописываем, если нет, следующий код:

А саму таблицу вставляем сразу после поста. Как вы помните, за посты отвечает файл single.php, открываем его. находим конец поста, и вставляем туда код таблицы. Я вставил ее после кода:

Все! Наслаждаемся самодельной панелькой 🙂

Рекомендую подписаться на RSS-ленту (как подписаться?) чтобы быть всегда в курсе выхода новых уроков, и успеть модернизировать свой блог одним из первых.

На этом я прощаюсь с Вами, успехов!

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

Полезные статьи Вам на почту!

Нас более 700 человек!

Комментарии

Лариса
0

Добрый день! Спасибо за урок, как всегда полезныйи понятный.Слежу их выходом, многое применяю...
У меня вопрос не совсем по этой теме,
Но на вашем блоге вверху (стоит кнопка retweet). Вы какой плагин использовали? Случайно не Topsy Retweet Button?
Дело в том, что после его установки у меня при проверке на валидность выдает: Ошибка значения : background. И дальше такую ерунду.... Честно сказать не знаю как и исправить... Если что-то можете посоветовать буду благодарна.
Вообще часто после установки плагина, приходится разбираться с ошибками, которые выдает валидатор, хотелось бы в будущем тоже почитать советы от WPguru.ru

14.11.2012
Sly
0

Добрый вечер! Меня очень радуют Ваши слова 🙂
Перейдем к проблеме. Скажите, каким именно валидатором Вы пользуетесь? Например, мой любимый валидатор не выдает никаких подобных ошибок. Пользуюсь я именно Topsy Retweet Button, как и говорил в этой статье. Да и не стоит особо заморачиваться с валидаторами. Как говорил мой любимый преподаватель SEO - «Даже Яндекс содержит ошибки, если его проверить валидатором».

14.11.2012
Лариса
0

Вечер добрый! Я пользуюсь http://www.w3.org , сейчас я убрала с главной кнопки, оставив только в статьях. Поэтому c CSS на главной сейчас ОК
Я, знаю, что "крутые"сайты содержат ошибки, но видимо им уже можно не обращать внимание на валидацию :), а мой еще молоденький, хочется как можно меньше допускать ляпов...А знаний не всегда хватает... Да и ошибка там такая на вид какая-то кошмарная (вот кусочек скопировала Ошибка значения : background url(data:,%7B%20%22url%22%3A%20%22http%253A%252F.....) и продолжение в строк 10...

14.11.2012
Sly
0

Да-да, у себя наблюдаю тоже самое, однако исправив данную проблему, мы увеличим шансы на «поломку» плагина. Вот, например, дизайн на блоге SlyArt. В нем огромное количество ошибок, как html, так и сss. Однако, стоит исправить одну ошибку, появляются другие, либо дизайн начинает отображаться некорректно. Все дело в том, что плагины, дизайн и так далее используют в своих кодах различную «абракадабру» которая хоть и считается неверной чепухой в глазах валидатора, на самом деле имеет логическое объяснение. И без данных «ошибок» перестанут работать другие части кода. Я, думаю, что вы обеспокоены большим количеством ошибок потому что прочитали где-то, что неверный код является причиной низких позиций в поисковиках. Спешу развеять этот, от части, миф. На самом же деле неправильный код является причиной низких позиций лишь в том случае, когда он самым прямым образом влияет на работоспособность сайта. Например, из-за этой ошибки браузеры грузят сайт аж на секунду дольше. Либо когда из-за небольшой ошибки в коде, теряет логику в коде большая часть сайта. В остальных же случаях, как эта, когда у вас незначительные ошибки, которые даже ошибками не являются, при том их количество невелико (до 70-100 ошибок), на позиции в выдаче это никак не влияет. Это проверил я лично, когда не поверил словам преподавателя и некоторым авторитетным блоггерам.

14.11.2012
Лариса
0

Спасибо, Олег,за пояснение. А то я не могла понять, что за длинный хвост выдает валидатор... И вообще, с какой стороны к нему подойти...

14.11.2012
nicol
0

Вот ещё вариант: http://www.likebtn.com/ru/

03.03.2013
Sly
-1

и все бы хорошо, но там нормальный функционал - платный. Лучше своими руками сделать, это, к тому же, приятнее.

03.03.2013
Павел
0

Вообще, если не сильно заморачиваться с оформлением, то есть абсолютно бесплатный сервис от Яндекса https://tech.yandex.ru/share/
Другое дело, если бы Вы описали возможность оформления этих кнопок на примере тех, что у Вас сейчас в блоге, уж очень понравилось, как они выглядят и вписываются в общий шаблон, ведь даже в том же API ВКонтакта не описано, как заменить стандартную картинку на свою. Было бы очень здорово.

15.06.2016
0

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

18.06.2016

Добрый день!
Почему-то не отображается кнопка фейсбук. И ещё, куда в таблице стилей именно ставить код?

03.04.2017
0

Добрый вечер!
Используйте вот эту статью: http://wpguru.ru/sozdanie-bloga/kak-dobavit-na-wordpress-socialnye-knopki.html , для новичка окажется полезнее. Здесь Вы автоматически разместите нужные соц кнопки.
По поводу стилей - в любое место можно вставлять. Просто запомните, что есть конструкция элемент { }. Вот между этих фигурных скобок располагаются стили конкретного элемента. Если Вы хотите вставить стили другого - вставляйте либо перед этим элементом, либо после него. Разницы нет. Главное не вставить другой внутрь фигурных скобок. Иначе получите просто нерабочий код.

04.04.2017

طراحی سایت

30.10.2017

Оставить комментарий

Поделиться