Социальные сети для многих блоггеров являются основным источником трафика на сайт. Обычно для того, чтобы приманить человека на сайт, в этих социальных сетях делают анонсы статей (теперь это делают, используя социальные кнопки). Когда, собственно, дело доходит до анонсирования статьи, то возникают небольшие трудности – вся эта кропотливая работа занимает немало времени. Поэтому стали автоматизировать этот процесс, а именно: добавляют социальные кнопки в конце каждой статьи, нажав на которую вас перекинет на ту или иную социальную сеть, и вам останется только нажать кнопку опубликовать. Сегодня я расскажу, как добавить социальные кнопки. Легче всего сделать социальные кнопки при помощи специальных плагинов, но я уже начал плавно отказываться от плагинов, и делать все вручную. Причин на это не много, но все они достаточно веские. Также мы поступим и сегодня.
Для начала предлагаю посмотреть, какие социальные кнопки, получатся в итоге. А окончательный вариант можете увидеть в конце данной статьи. Как видите, нам потребуются картинки. Их скачать можно по ссылке. В архиве 10 кнопок.
Чтобы расположить социальные кнопки после статьи, как у меня, то все действия будем проводить в файле single.php, который находится в папке вашей темы (это самый оптимальный вариант, где расположить социальные кнопки). Открываем его и перед
<?php comments_template(); ?>
создаем новый див, допустим social-button. Чтобы сделать заголовок, после созданного дива, напишите
<h3> Понравилась статья, добавь к себе в:</h3>
конечно слова внутри тега, можете поменять на свое усмотрение.
Добавляем кнопку Twitter
Забыл сказать, все нужные картинки загрузите на сервер, и приготовьте ссылки на них. После того как это сделали, можно приступать к созданию кнопки. Нам понадобится ссылка, для отправки на твиттер заголовка и ссылки. Выглядит она следующим образом:
<a rel="nofollow" target="_blank" href="http://twitter.com/home/?status=<?php the_title(); ?> <?php the_permalink(); ?>"> </a>
Если добавить просто ссылку, то ничего не отобразится. Теперь между данной ссылки прописываем код
<img src="адрес вашей картинки"/>
, в итоге получится так
<a rel="nofollow" target="_blank" href="http://twitter.com/home/?status=<?php the_title(); ?> <?php the_permalink(); ?>"> <img src="адрес вашей картинки" /></a>
Думаю объяснять, как работает ссылка не нужно, да оно и не к чему. Следующие этапы будут абсолютно одинаковыми, разница в ссылках, поэтому пишу без объяснений.
Добавляем кнопку Вконтакте
Ссылка для добавления заметки Вконтакте
<a href="http://vkontakte.ru/share.php?url=<?php the_permalink(); ?>" target="_blank" rel="nofollow></a>
Перед тегомвставляем картинку:
<img src="адрес вашей картинки"/>
Получится
<a href="http://vkontakte.ru/share.php?url=<?php the_permalink(); ?>" target="_blank" rel="nofollow"><img src="адрес вашей картинки"/></a>
Добавляем кнопку Я.ру
<a target="_blank" rel="nofollow" href="http://my.ya.ru/posts_add_link.xml?title=<?php the_title(); ?>&URL=<?php the_permalink(); ?>"><img src="адрес вашей картинки"/></a>
Добавляем кнопку FriendFeed
<a title="Добавить в FriendFeed" target="_blank" rel="nofollow" href="http://www.friendfeed.com/share?title=<?php the_title(); ?> <?php the_permalink(); ?>"><img src="адрес вашей картинки"/></a>
Добавляем кнопку Google Buzz
<a href="http://www.google.com/reader/link?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>&srcURL=http://адрес вашего сайта.ru/" rel="nofollow" target="_blank"><img src="адрес вашей картинки"></a>
Добавляем кнопку Мой Мир
<a target="_blank" rel="nofollow" href="http://connect.mail.ru/share?share_url=<?php the_permalink(); ?>"><img src="адрес вашей картинки"></a>
Добавляем кнопку Facebook
<a rel="nofollow" target="blank" href="http://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>"><img src="адрес вашей картинки"></a>
Добавляем кнопку Blogger
<a target="_blank" rel="nofollow" href="http://www.blogger.com/blog_this.pyra?t&u=<?php the_permalink(); ?>&n=<?php the_title(); ?>&a=ADD_SERVICE_FLAG&passive=true&alinsu=0&aplinsu=0&alwf=true&hl=ru&skipvpage=true&rm=false&showra=1&fpui=2&naui=8"><img src="адрес вашей картинки"></a>
Добавляем кнопку LiveInternet
<a href="http://www.liveinternet.ru/journal_post.php?action=l_add&cnurl=<?php the_permalink(); ?>" target="_blank"><img src="адрес вашей картинки"></a>
Добавляем кнопку Livejournal
<a target="_blank" rel="nofollow" href="http://www.livejournal.com/update.bml?event=<?php the_permalink(); ?>&subject=<?php the_title(); ?>" ><img src="адрес вашей картинки"></a>
Если хотите оформить данную панельку, то в style.css прописываете оформление с классом social-button. А если хотите сделать так же как у меня: при наведении на кнопку она загорается, то нужно в style.css прописать следующее:
.social-button a img{ opacity:0.5;}
.social-button a:hover img{opacity:1.0;}
Вот так вот мы сделали социальные кнопки без плагинов. Достаточно легко. Не так ли?
В субботу ждите: Оформляем социальные кнопки и делаем панель.
Постовой: Хотите научиться хорошо и вкусно готовить? Уверен, прочитав эти кулинарные рецепты, вы будете покорять людей своими умениями в кулинарии.
Похожие записи:
ух ты… можно сделать 1ну тестовую страницу с результатами трудов?
вы хотите чтобы я сделал тестовую страницу? вот пожалуйста http://apisklov.ru/social-button.html
спасибо за хороший урок. А как добавить форму для подписки как у тебя под кнопками?
завтра напишу пост.
спасибо, буду ждать
Спасибо за инфу, очень актуально!
Благодарю за нужный урок .
хорошая работа. плагин тяжеловато будет а вот скрипт в самый раз
да тут даже не скрипт. а просто ссылки
[...] на всем известном движке? Значит, стоит установить социальные кнопки для WordPress без плагинов, так как это, без сомнений, очень удобная [...]
Хорошо в любом случае.))
Я пока остановился на другом решении, схожем с твоим.
Тоже можешь подработать до такого варианта. популярно и разнообразие добавишь к исполнению.
Спасибо, очень пригодилась статья, но ссылки на социальные сети не «обернулись» атрибутом nofollow, так плагин sequake показывает…
Спасибо за решение, только вот в какой файл это прописывать? Я пока не сильно в структуре файлов разбираюсь.
Заранее спасибо.
Давайте вы обратитесь мне на email, находится он в разделе «контакты». Я вам все объясню
Очень хорошая статья. Только не понятно. Кнопки каждый раз в новую статью надо вставлять??
Очень хорошая статья. Только не понятно. Кнопки каждый раз в новую статью надо вставлять??
Вопрос. А вот как вы так сделали что после записи комментария предлагается подписка на статьи. Вот тоже хочу, только когда из сайта выходишь. Подскажите пожалуйста.
для этого есть специальный плагин. В каждой статье кнопки не нужно, ёсть файл single.php, после определённого кода и нужно вставлять данный скрипт
У меня на сайте http://vmirepodelok.ru есть плагин с кнопками. Только нет некоторых кнопок. А добавить не знаю
вместо плагина можно данный код использовать. Вставлять коды нужно в файл single.php
Ну я поняла что в файл single.php. Я только не знаю где он находится
напишите мне в icq
у меня аськи нет . Есть агент и почта есть адрес vmirepodelok@gmail.com
пришлите мне на apisklov@bk.ru содержимое файла single.php
А я у себя на сайте http://pda-kino.net/ по другому сделал! Через сервис специальный. Удобно!
Да Дима — просто красота. Очень хорошо сделано. А как сделали не поделитесь??
[...] Попробуйте сделать социальные кнопки без плагинов. Понравилась статья? Поделитесь с друзьями! [...]
[...] себе Социальные кнопки без плагинов. Самый легкий [...]
А как создать кнопку для Одноклассников. И надпись над кнопками пишется кракозябрами, почему?
Как делается кнопка для Одноклассников отправил Вам на e-mail.
А по поводу кракозябр, тут нужно поработать над кодировкой. Когда работал с Джумлой такая же фигня была очень часто. Поэтому попробуйте менять кодировку при сохранении, для кириллических символов используется кодировка utf-8. Если не изменяет память делается это в базе данных.
Так кнопка одноклассников и не проявилась, твиттер автоматически не подгружается, а майл ру выдает краказябры.
Огромное спасибо. Очень люблю вручную всё прописывать, не люблю плагины и разные там сервисы!
Кнопка твиттера не работает, у меня такая же проблема
[...] Попробуйте сделать социальные кнопки без плагинов [...]
А тему тоже сами делали?
Подскажите, как сделать, чтобы при клике происходила передача ссылки на сам пост, передача изображения и названия поста как у ваших кнопок? При использовании вышеуказанных инструкций, у меня передается лишь ссылка.
как вы сказали нужно уже скрипт, который и отвечал бы за выборку названия поста, ссылки и картинки.
Спасибо, а не могли бы вы дать наводку, где можно прочесть о способе установки кнопок, который реализован на вашем сайте?
как у меня после каждой статьи?
ну да
http://apisklov.ru/wordpress/sozdaem-panel-s-socialnymi-knopkami-i-podpiskoj-na-email/
вот тут все понятно описано вроде
[...] дня назад – в среду, я писал пост о том как сделать социальные кнопки на WordPress без плагинов. В комментариях к этой статье [...]
[...] друзья! Я уже писал несколько статей про социальные кнопки без плагинов на WordPress. Мы их устанавливали, заключали в [...]
[...] плагинов. На эту тему уже написал 2 статьи: социальные кнопки без плагинов и форма обратной связи без плагинов. [...]
[...] ссылке на сайт в анонсе. Очень распространены сейчас социальные кнопки, которые облегчают добавление анонса в соц. сеть. Like [...]
На тестовой страничке кнопки «не зажигаются». Стили забыли добавить или не работает?
стили не добавил.
Хорошая статья! Но кнопку для одноклассников тоже бы не помешало сделать! На некоторых тематиках (кулинарной к примеру) толку от нее будет больше чем с твитера, ЖЖ,Фейсбук, ММир вместе взятых
Отличные кнопки, спасибо.
Все кнопки сделаны ссылками и работают великолепно, но на них нет счетчиков, а как установить скрипты?