Главная / Веб-дизайн / Кнопки соцсетей на WordPress без плагина

Кнопки соцсетей на WordPress без плагина

Кнопки соцсетей на WordPress без плагинаМы уже немного освоились в шаблоне WordPress – узнали о странице header, о страницах index и single, разобрались в основных параметрах таблицы стилей CSS. Но самый лучший путь научиться взаимодействовать с темой своего блога – внести в нее какие-нибудь изменения. Естественно, полезные и нужные читателям. Кнопки «Поделиться в социальных сетях» — что может быть полезнее?!

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

— Почему бы не поставить плагин для соцсетей? – спросит кто-то.

— Одно другому не мешает! – отвечу я. К тому же, кнопки соцсетей, вставленные прямо в код шаблона WordPress, позволят теме загружаться намного легче. Вместе с плагином мы можем получить еще и ссылки на его автора и кучу всякого мусора…

Кнопки соцсетей должны быть всегда под рукой

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

Разбираем код кнопок

<!-- ShareButtons -->
<span style="display:scroll;position:fixed;bottom:460px;right:100px;">
<noindex><nofollow><a rel="nofollow" target="blank" href="http://connect.mail.ru/share?share_url=<?php the_permalink(); ?>"><img src="http://ваш_сайт/mail.png" width="30" height="30" title="Поделиться в Mail.ru"></a></nofollow></noindex></span>
<span style="display:scroll;position:fixed;bottom:420px;right:100px;">
<noindex><nofollow><a onclick="window.open('https://plusone.google.com/_/+1/confirm?hl=ru&url=<?php the_permalink(); ?>', 'gplusshare', 'width=626, height=436'); return false;" href="https://plusone.google.com/_/+1/confirm?hl=ru&url=<?php the_permalink(); ?>" rel="nofollow"><img src="http://ваш_сайт/GP.png" width="30" height="30" title="Поделиться в Google+"></a></nofollow></noindex></span>
<span style="display:scroll;position:fixed;bottom:380px;right:100px;">
<noindex><nofollow><a rel="nofollow" target="blank" href="http://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>"><img src="http://ваш_сайт/FB.png" width="30" height="30" title="Поделиться в Facebook"></a></nofollow></noindex></span>
<span style="display:scroll;position:fixed;bottom:340px;right:100px;">
<noindex><nofollow><a rel="nofollow" target="_blank" href="http://twitter.com/intent/tweet?text=RT @Ваш ник <?php the_title(); ?>: <?php the_permalink(); ?>" title="Добавить в Twitter"><img src="http://ваш_сайт/tw.png" alt="Опубликовать в twitter.com" width="30" height="30"></a></nofollow></noindex></span>
<span style="display:scroll;position:fixed;bottom:300px;right:100px;">
<noindex><nofollow><a rel="nofollow" target="blank" href="http://vkontakte.ru/share.php?url=<?php the_permalink(); ?>"><img src="http://ваш_сайт/vk.png" width="30" height="30" title="Поделиться В Контакте"></a></nofollow></noindex></span>
<span style="display:scroll;position:fixed;bottom:260px;right:100px;">
<noindex><nofollow><a rel="nofollow" target="blank" href="http://feeds.feedburner.com/blogotey/new">
<img src="http://ваш_сайт/rss.png" width="30" height="30" title="Подписаться!"></a></nofollow></noindex></span>
<!-- ShareButtons -->

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

Следующая строка, которая с некоторыми изменениями будет повторяться для каждой кнопки — это описание стиля. Другими словами, в ней записано, как будет отображаться элемент, который заключен в теги <span></span>. Мы видим, что могут быть не только стили, применяющиеся для всего шаблона WordPress, но и самые разнообразные стили, которые применяются к конкретному фрагменту контента.

Что у нас тут записано?

  • display:scroll;position:fixed;bottom:460px;right:100px; — элемент (в нашем случае, каждая кнопка соцсетей)  прокручивается вместе с экраном и остается на одной и той же позиции.
  • bottom:460px; — расстояние от низа кнопки до низа экрана.
  • right:100px; — расстояние от правого края кнопок до правого края экрана.

Эти две позиции мы можем менять:

  • bottom: — выставляем в зависимости от количества кнопок (может, вы захотите убрать парочку из списка). У меня расстояние между нижними краями кнопок — 40 пикселей. Если вы увеличите или уменьшите размеры кнопок, захотите сделать расстояния между ними больше или меньше — то меняйте и это число. В любом случае, стоит попробовать несколько вариантов, чтобы заметить, что вы способны активно и конструктивно менять свой шаблон WordPress.
  • right: — это расстояние от края экрана. Вообще, я неправа, выставляя здесь значение 100px. Ведь у читателя может быть маленький экран и кнопки налезут на содержание страницы. Разумно ставить здесь 1-10px. У меня кнопки соцсетей живут справа ( right). Если хотите поставить их слева — поменяйте на left.

Далее идут теги, закрывающие наши ссылки от индексации Яндексом и Гуглом <noindex><nofollow> и их закрывающие собратья, после ссылок. В принципе, nofollow у нас и в самой ссылке стоит. Но, лучше перебдеть)))

Дальше идет сама ссылка на социальную сеть — <a rel= «nofollow» target= «blank» href= «http://ссылка на соцсеть<?php the_permalink(); ?> «> Для каждого ресурса эта ссылка — своя:

  • http://connect.mail.ru/share?share_url=
  • onclick=window.open(‘https://plusone.google.com/_/+1/confirm?hl=ru&url=
  • http://www.facebook.com/sharer.php?u=
  • http://twitter.com/intent/tweet?text=RT @Ваш ник
  • http://vkontakte.ru/share.php?url=
  • http://feeds.feedburner.com/blogotey/new

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

Наконец, ссылка на изображение кнопки — <img src= «http://ссылка на адрес картинки» width= «30» height= «30» title= «Поделиться в название соцсети»>Можно загрузить картинки прямо на свой блог, можно использовать сторонний файлообменник (это для блогов на Блогспоте, например). width= «30» height= «30»  — это ширина и высота картинки в пикселях. Попробуйте сделать кнопку побольше и поменьше — выбирайте, какие больше подходят вашему блогу. В title пишем все, что, как нам кажется, заставит читателя жмакнуть на кнопку.

Если решите убрать одну из кнопок — удаляйте весь контейнер, начинающийся с тега <span style… до закрывающего тега </span>.

Ставим социальные кнопки в шаблон WordPress

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

На каком бы языке ни была написана ваша тема для WordPress — эта страничка, как слоеный пирог, будет делиться на следующие фрагменты:

  • вывод методанных (header)
  • вывод поста
  • вывод комментов
  • вывод боковой колонки
  • вывод подвала

Они могут идти в несколько другой последовательности. Например, боковая колонка может быть прописана выше поста. Но это не важно! Ведь наши кнопки будут елозить самостоятельно, вне связи с каким-либо элементом страницы. Поэтому нам нужно просто найти, где кончается один фрагмент кода и начинается другой. Например, они могут быть заключены в теги <div>код боковой колонки sidebar</div>вот тут наша вставка<div>код подвала footer</div>.

Вуаля! Сохраняем и смотрим, получилось ли. Если что-то криво — проверьте, все ли скобки, слеши и прочие знаки на месте. Как правило, именно из за отсутствия или лишней скобки происходит весь бардак. все вопросы задавайте здесь в комментах.

И не забудьте поделиться этой статьей в соцсетях!

Читайте также

Веб дизайн и html коды цветов

Уроки непринужденного веб дизайна

Есть проблема, с которой большинство авторов сталкиваются постоянно – это веб дизайн сайта или блога. ...

Один комментарий

  1. Вячеслав

    Реанимированные комменты

    ladosha:
    11.05.2012 в 20:32
    Да, в плагинах вечно ссылки сторонние торчат, мусор… это точно. И вообще, плагины много дискового пространства занимают.

    katyaru:
    11.05.2012 в 20:37
    Да, об чем и спич — нужно в шаблон вставлять такие вещи!

    Кнопки для социальных сетей | БлоготеЙ!:
    11.05.2012 в 21:04
    […] том, как вставить кнопки соцсетей прямо в шаблон блога — читайте в статье «Шаблон WordPress и социальные […]

    Валерия:
    11.05.2012 в 22:01
    Катюш, а эти кнопочки подойдут для блогспота?..

    katyaru:
    11.05.2012 в 22:15
    Подойдут) Только грузить их нужно будет на сторонний хост, например, на Яндекс-картинки. Если затруднишься — спрашивай — я тебе подробнее подскажу, как сделать

    Александра:
    11.05.2012 в 23:06
    Вот я тоже все мучилась с этими штуками и никак не могла поставить. Спасибо, пойду заново попробую прикрутить)

    katyaru:
    11.05.2012 в 23:45
    Если что — спрашивай: будем вместе прикручивать)

    Александра:
    20.05.2012 в 15:22
    Короче говоря, у меня эта фишка работать не будет((
    Потрите предыдущий мой пост.

    katyaru:
    20.05.2012 в 17:13
    Странно это очень…

    Илона:
    11.05.2012 в 23:40
    А я тупо порыскала в инете, нашла готовый код того вида кнопок, которые мне понравились и вставила. Вот такая лентяйка))))

    katyaru:
    11.05.2012 в 23:47
    Я рыскала, но находила либо плагины с кучей ссылок на их авторов, либо коды с кучей лишнего… Картинки, опять же можно любые вставить. Кстати, я правильные ссылки для Гугл+ и еще чего-то (забыла ужеsmile нашла только недавно.

    anjelika:
    12.05.2012 в 01:36
    у меня плагин, правда там не все есть, а плавающие мне очень нравятся надо будет поставить, спасибо за код

    katyaru:
    12.05.2012 в 09:57
    Не за что — это мой любимый код)))

    Галина:
    12.05.2012 в 07:31
    А я попробовала плагины, так блоги стали очень медленно открываться. «Одна кнопка» вроде бы лёгкая, но работает плохо: по 2 окошка сразу вылезают. Тогда вставила кнопочки от Яшки и успокоилась. О вертикальных бродячих ещё подумаю. А АСТРОновости их не вставить (шаблон внешнего серого фона из админки, по словам переводчика темы, не регулируется, а в «С праздником!» — смысла нет: стишки короткие, кнопки и так торчат везде.

    katyaru:
    12.05.2012 в 09:57
    не поняла, почему серый фон мешает поставить на него кнопки)

    Редактируем таблицы стилей в WordPress | БлоготеЙ!:
    13.05.2012 в 00:09
    […] серии «О страницах шаблона WordPress». Продолжение «Шаблон WordPress и социальные сети — практика+подарки« Также, читайте на эту темуЭффект […]

    tanichka:
    01.08.2012 в 12:38
    Кать, вот смотри, я скачала у тебя кнопы соцсетей (картиночки), я их по отдельности должна загрузить на сайт в медиафайлы? Получается пять адресов, значит каждый адрес на каждую картинку нужно прописать отдельно под каждой кнопкой или как?

    katyaru:
    01.08.2012 в 12:46
    Да, пять адресов. Их вписываешь в код, для каждой кнопки (соответствующую картинку), где img src=»http://your_site.ru/…png&raquo;

    tanichka:
    01.08.2012 в 15:15
    чета они у меня встали вверху, горизонтально и не работают

    katyaru:
    01.08.2012 в 15:16
    Давай, Таня в чате на ФБ обсуждать — я тебе помогу…

    tanichka:
    01.08.2012 в 15:26
    щас еще раз попробую

    Диана:
    15.08.2012 в 17:20
    Приветствую.
    Такой вот интересный вопрос — а почему нельзя было теги noindex и nofollow поставить в начале и конце БЛОКА кнопок, а не в начале и конце каждой кнопки?
    Мне кажется так код чище будет smile

    katyaru:
    15.08.2012 в 17:45
    Их вообще можно убрать (nofollow внутри каждой ссылки есть, где они и должны быть). Ну как-то прижились они там… В общем, нет разумного объяснения)))

    Диана:
    15.08.2012 в 17:24
    И да — спасибо за ссылки для share разных сетей. Я могла бы поискать сама в принципе, но тут уже на блюдечке, да с каемочкой!!!
    Супер!
    Правда искать все равно придется — хочу побольше сервисов сделать. Сервисы закладок например (Яндекс.Закладки, БобрДобр, Delicious и тыды и тыпы), кнопку на «Распечатать», в ЖивыеЖурналы опять же…
    Ну это как всегда — расти есть куда smile

    андрей:
    25.10.2012 в 17:48
    просто, доступно, без воды, вообщем СПАСИБО огромное,
    перерыл за 2 дня много инфы, все не то или кривое, а тут спасла )))))

    katyaru:
    25.10.2012 в 17:56
    Я очень рада! Стараюсь, чтобы было полезно!

    Евгений:
    12.12.2012 в 08:48
    Вот бы для блогера полный мануал не с 5 а с 10 картинками зделать, вот это дп, в блогере в блогере вставить гаджет есть ,готовый скрипт втыкнуть и усе готова,щас пытаюсь по нять можно ли это осуществить с вашими картинками

    katyaru:
    12.12.2012 в 09:53
    В Блоггере — другой язык кода. У меня, честно говоря, никак руки не дойдут, чтобы его освоить…

    Евгений:
    13.12.2012 в 00:18
    Спасиб что честно ответили, благодарю за красивые кнопочки, я излазил весь интернет седня целый день прошол а я на тему своих рисунков как в блог прикрутить ниче не нашол,Все эти сервисы там 46 кнопок ад хис. одна кнопка и тд недали ровным счетом ни каких ответов они предлогали только свои формы и картинкиЮ блогеры тоже кто что по одной кнопке ,их и так мохно воткнуть как стандартный скрипт в наборе, вобщем у меня книжная темка поэтому книжечки скачал,Сейчас на этапе работают 3 кнопки из набора, знаю как зделал непойму почему работают)вобщем все сам плин и ваши кнопки я всетаки посажу на блог , кто ы че неговорил)
    Пожалуйста вышлете мне Ливеинжорнол одну книжки, вы упомянули что у вас есть… если еще какие есть из этой книжной темы? Буду счастлив,
    Непойму чего я в адресах понавыдумывал но плин нажимаю попадаю куда нажал)

    katyaru:
    13.12.2012 в 12:00
    Иконка есть, но нет для нее кода… В любом случае, отправить Вам не могу, т.к. Вы указали неверный e-mail…

    Евгений:
    13.12.2012 в 00:32
    Я так понял, щас мода не заворачиваться с дизайном кнопок , а скачать готовые сервисы, а мне вот захотелось другие картинки Вши мне например подошли, и что у меня в итоге будут они выходить на все соц сети,они и выходят смущают тока авто заполнение,а так же будут ли эти переходы учтены их ведь по вашим словам от поисковика закрыли,В общем каркас использовал Ваш, перешил адрес, воткнул в нтмл скрипт и теперь отдельной панелью они у мя торчат, в шаблон я их не прикручивал,там другие прикрутки, и работает плин, объясните плиз почему? и какие последствия не вредно ли?

    Ксения Юрьевна:
    20.01.2013 в 16:20
    Здравствуйте, Катя, у меня ничего не получилось с кнопочками к сожалению.Встали 2 хрустальные кнопочки сказачной красоты, а остальные -нет. Мало того куда-то вверх ушел рамблер из футера, а верхняя панель опустилась наоборот вниз на 2 см. Убрала весь код и больше к нему не вернусь. После того как убрала, все встало на свои места, я и этому рада.
    Мне еще не нравиться в вашем блоке кнопок, что гугл+ стоит посреди кода, но не работает. Не работающие кнопки производят ошибку 404.

    katyaru:
    20.01.2013 в 17:04
    smile Мы начинали этот разговор в другой статье, с другим кодом))) Эти кнопки должны плавать сбоку. Там я уже ответила Вам про Гугл+ (кстати, его в том коде для горизонтальных кнопок уже нет).
    В любом случае, убрать строку кода для Гугл+ — очень просто — выделить и удалить.
    То, что шаблон начал разъезжаться, показывает, что Вы куда-то «не туда» ставили код… Ну, ничего. потом постепенно придут и эти навыки.

    Александр:
    22.04.2013 в 02:31
    Здравствуйте!
    Мой сайт на движке WordPress.
    Разместил кнопки как на странице каждого поста, так и в ленте новостей под каждым постом (вставил код в single.php и index.php).
    Но. Зачастую люди просматривают ленту новостей не заходя на отдельную страницу поста, и кликают на кнопки соцсетей прямо с ленты новостей. И я неожиданно обнаружил, что с ленты новостей при клике на кнопки всегда вставляется один и тот же адрес — адрес Главной страницы, а не адрес цитируемого поста.
    Пожалуйста, подскажите, как сделать так, чтобы при нажатии с ленты новостей цитировалась ссылка поста, а не Главной страницы сайта?
    Это действительно очень важно для блога, особенно если посты лаконичные, и пользователь просто не заходит на страницу поста.
    Спасибо!

    katyaru:
    22.04.2013 в 09:37
    Вы совершенно правы — кнопки передают именно урл той страницы, на которой они отображаются… Первое и основное, что я могу посоветовать: подумайте над структурой анонсов. Очень важно все-таки сделать так, чтобы читатели переходили на страницы отдельных записей. Может быть, сделать анонсы короче, но «завлекательнее». Сходу не скажу, можно ли с главной расшаривать отдельные посты. Отвечу чуть позже.

    Александр:
    22.04.2013 в 12:41
    Спасибо за ответ. Описанный мной функционал реализован, например, в ЖЖ. Функционал очень логичный. Например, особенность моего сайта — короткие лаконичные посты, которые читаются прямо с ленты. Во-многом, это создает привлекательность сайта, т.к. при нынешнем потоке информации, люди все чаще выбирают лаконичное и легко доступное. Догадываюсь, что реализовать это очень просто, но для этого нужны знания php и MySQL, которых у меня, к сожалению, нет.

    katyaru:
    22.04.2013 в 12:46
    Я понимаю, о чем вы говорите. Действительно, такой сайт может быть привлекательным. Но даже в ЖЖ все самое вкусное скрывается под катом… В принципе, теоретически, нужно сделать так, чтобы кнопки являлись частью анонса и в них был прописан урл отдельной записи. Мне кажется, я так даже делала на блоге у себя. Вспомню — расскажу)

    Александр:
    22.04.2013 в 13:21
    Кнопки — часть анонса…интересная идея. Если вспомните — буду очень благодарен.
    А меня посетила идея размещать код кнопок прямо в тексте поста. Но во-первых, пришлось бы редактировать все посты в блоге (а их несколько сотен), и каждый раз вставлять в пост. А во-вторых, не уверен что скрипт кнопок захватит урл поста, а не как до этого — урл Главной.

    katyaru:
    23.04.2013 в 11:06
    Александр, вот я написала отдельный пост с ответом на Ваш вопрос http://blogotey.ru/rassharivat-posty/

    Artem:
    27.01.2014 в 12:35
    Здравствуйте,
    У вас, когда нажимаю «поделиться» на страничке с vk.com под блоком комментария есть галочка «прикрепить изображение» и есть заголовок и все красиво оформлено.
    А у меня когда, я вставляю кнопочки(такой же код, как у вас в примере) то появляется только ссылка на мой сайт и никаких красивостей.
    Помогите, пожалуйстаsmile

    Katyaru:
    27.01.2014 в 12:58
    Здравствуйте, Артем!
    У меня совершенно такой же код на кнопках.
    Если посмотреть, какие «красивости появляются у меня — очевидно, что за изображения Vk принимает кнопки и виджеты (Фейсбук, тумблер, какие-то загрузки). А, собственно, картинок — не видит в упор.
    Так что, я думаю, что у Вас на сайте, наверное, нет бейджиков от Фейсбука или кнопки от Тумблера. Иначе Vk их бы тоже показал… Но зачем оно? — Совершенно незачем)

    Artem:
    27.01.2014 в 17:03
    А можно ди как-то определить какую картинку он будет предлагать сначала? Потому что у меня в шапке есть логотип сайта, а vk предлагает картинки которые идут дальше и у вас как раз начинается со 2й которую он предлагает по умолчанию.
    Спасибо вам огромнейшее за эту статью и очень быстрый ответ!

    Katyaru:
    27.01.2014 в 17:34
    Я лично не могу понять принцип, по которому разные социальные сети «видят» или «не видят» изображения на сайте. Задумывалась об этом, но ответа не знаю. Увы(((

    art:
    26.02.2014 в 20:02
    Как сделать так чтобы при нажатии на картинку, открывалось окно соц сети с возможностью опубликовать пост на странице (к примеру ВКонтакте)?

    Katyaru:
    26.02.2014 в 20:05
    Здравствуйте! Вот вся эта статья, собственно, об этом и рассказывает. Нужно добавить на страницу (в ее шаблон) коды (в них добавляете урлы своих картинок или моих, если хотите) — и получаются кнопки для расшаривания в соцсетях.

    art:
    26.02.2014 в 20:48
    Дело в том, что у меня стоит плагин в котором только можно добавить URL страницы для каждой картинки — Можно ли с этим что то сделать

    Katyaru:
    26.02.2014 в 20:51
    Вы прочитали статью?) Вот можно поставить эти коды и обойтись вообще без плагина. Если это сложно — можно добавить кнопки из разных систем (там прямо блоки с кнопками наиболее популярных соцсетей) — у Я.ру есть такие кнопки, Pluso… Плагин тут вообще не нужен, ИМХО

Добавить комментарий

Ваш e-mail не будет опубликован.