Сейчас в интернете очень популярны всякие социальные сервисы, поэтому каждый, уважающий себя блогер 
, старается добавить на свой сайт разнообразные кнопки этих сервисов, чтобы читатели смогли твинуть, плюсануть и пр. посты на сайте.
Благо кнопок для этих целей предлагается великое множество.
Вот и мне захотелось добавить на свой блог очередную кнопку, на этот раз от Одноклассников.
Задумано - сделано.
Поразило только, что для добавления малюсенькой кнопки, нужно подключить файл стилей и скрипт с "родительского" сайта. А, поскольку у меня уже стоят кнопки твиттера, вконтакте и фейсбука, получается, что только для работы социальных кнопок на сайте будет загружаться четыре скрипта.
Многовато будет!
Короче, снесла я эту кнопку нафиг и добавила свою кнопку в тот набор, который у меня на сайте уже был. Заодно сделала кнопку ya.ru и убрала google-buzz.
То, что у меня получилось, можно увидеть внизу этого поста.
Вы, также, можете воспользоваться моими кнопками.
Для этого скачайте архив, распакуйте его и добавьте папку icons в папку вашей WordPress-темы.
Эти кнопки можно поставить на сайт так:
<div class="icons">
<noindex><a rel="nofollow" onclick="window.open('http://vkontakte.ru/share.php?url=<?php the_permalink(); ?>', 'vkontakte', 'width=626, height=436'); return false;" href="http://vkontakte.ru/share.php?url=<?php the_permalink(); ?>" title="Поделиться ВКонтакте">
<img src="<?php bloginfo('template_url'); ?>/icons/vkontakte.png" width="81" height="25" alt="Поделиться ВКонтакте" />
</a></noindex>
<noindex><a rel="nofollow" onclick="window.open('http://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>', 'facebook', 'width=1000, height=1024'); return false;" href="http://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>" title="Поделиться в Facebook">
<img src="<?php bloginfo('template_url'); ?>/icons/facebook.png" width="78" height="25" alt="Поделиться в Facebook" />
</a></noindex>
<noindex><a rel="nofollow" rel="nofollow" onclick="window.open('http://twitter.com/home?status=Читаю <?php the_permalink(); ?>: <?php the_title(); ?>', 'twitter', 'width=1000, height=1024'); return false;" href="http://twitter.com/home?status=Читаю <?php the_permalink(); ?>: <?php the_title(); ?>" title="Добавить в Twitter">
<img src="<?php bloginfo('template_url'); ?>/icons/twitter.png" width="66" height="25" alt="Добавить в Twitter" />
</a></noindex>
<noindex><a rel="nofollow" onclick="window.open('http://wow.ya.ru/posts_share_link.xml?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>', 'yaru', 'width=1000, height=1024'); return false;" href="http://wow.ya.ru/posts_share_link.xml?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>" title="Поделиться с друзьями на Я.ру">
<img src="<?php bloginfo('template_url'); ?>/icons/yaru.png" width="85" height="25" title="Поделиться с друзьями на Я.ру" />
</a></noindex>
<noindex><a rel="nofollow" onclick="window.open('http://www.livejournal.com/update.bml?event=<?php the_permalink(); ?>&subject=<?php the_title(); ?>', 'lj', 'width=1000, height=1024'); return false;" href="http://www.livejournal.com/update.bml?event=<?php the_permalink(); ?>&subject=<?php the_title(); ?>" title="Опубликовать в своем блоге livejournal.com">
<img src="<?php bloginfo('template_url'); ?>/icons/livejournal.png" width="86" height="25" alt="Опубликовать в Livejournal" />
</a></noindex>
<noindex><a rel="nofollow" onclick="window.open('http://www.odnoklassniki.ru/dk?st.cmd=addShare&st.s=1&st._surl=<?php the_permalink(); ?>', 'odkl', 'width=1000, height=1024'); return false;" href="http://www.odnoklassniki.ru/dk?st.cmd=addShare&st.s=1&st._surl=<?php the_permalink(); ?>" title="Поделиться с друзьями в Одноклассниках">
<img src="<?php bloginfo('template_url'); ?>/icons/class.png" width="74" height="25" title="Поделиться с друзьями в Одноклассниках" />
</a></noindex>
<noindex><a rel="nofollow" onclick="window.open('http://connect.mail.ru/share?share_url=<?php the_permalink(); ?>', 'mmir', 'width=1000, height=1024'); return false;" href="http://connect.mail.ru/share?share_url=<?php the_permalink(); ?>" title="Поделиться В Моем Мире">
<img src="<?php bloginfo('template_url'); ?>/icons/moy-mir.png" width="72" height="25" alt="Поделиться В Моем Мире" />
</a></noindex>
</div>Вставьте этот код в файл single.php после после функции < ?php the_content(); ?>
Вот еще один набор кнопок, часть из которых я нашла и интернете - они свободны для любого использования. А другую часть нарисовала сама.
Вставьте их на сайт так:
<div class="icons">
<noindex>
<a rel="nofollow" target="_blank" href="Ваш_профиль">
<img class="grup" src="<?php bloginfo('template_url'); ?>/icons/twit.png" title="Присоединиться в Твиттере" width="32" height="32">
</a>
<a rel="nofollow" target="_blank" href="Ваш_профиль">
<img class="grup" src="<?php bloginfo('template_url'); ?>/icons/google-plus.png" title="Присоединиться в Google Плюс" width="32" height="32">
</a>
<a rel="nofollow" target="_blank" href="Ваш_профиль">
<img class="grup" src="<?php bloginfo('template_url'); ?>/icons/vk.png" title="Присоединиться ВКонтакте" width="32" height="32">
</a>
<a rel="nofollow" target="_blank" href="Ваш_профиль">
<img class="grup" src="<?php bloginfo('template_url'); ?>/icons/fbk.png" title="Присоединиться в Facebook" width="32" height="32">
</a>
<a rel="nofollow" target="_blank" href="Ваш_профиль">
<img class="grup" src="/icons/li.png" title="Присоединиться в liveinternet" width="32" height="32">
</a>
<a rel="nofollow" target="_blank" href="Ваш_профиль">
<img class="grup" src="<?php bloginfo('template_url'); ?>/icons/lj.png" title="Присоединиться в Живом Журнале" width="32" height="32">
</a>
<a rel="nofollow" target="_blank" href="Ваш_профиль">
<img class="grup" src="<?php bloginfo('template_url'); ?>/icons/cs.png" title="Присоединиться в Однокласниках" width="32" height="32">
</a>
<a rel="nofollow" target="_blank" href="Ваш_профиль">
<img class="grup" src="<?php bloginfo('template_url'); ?>/icons/mm.png" title="Присоединиться в Моем Мире" width="32" height="32">
</a>
<a rel="nofollow" target="_blank" href="Ваш_профиль">
<img class="grup" src="<?php bloginfo('template_url'); ?>/icons/ya.ru.png" title="Присоединиться в в Яндекс-блогах" width="32" height="32">
</a>
<a rel="nofollow" target="_blank" href="Ваш_профиль">
<img class="grup" src="<?php bloginfo('template_url'); ?>/icons/youtube.png" title="Присоединиться в youtube" width="32" height="32">
</a>
</noindex>
</div>Надпись Ваш_профиль в адресе ссылки нужно заменить на адрес вашего профиля в каждом социальном сервисе.
И немного стилей для оформления кнопок:
.icons {
float: left;
border: 1px solid #ddd;
padding: 15px;
margin: 15px 0 0 0;
}
.icons img {
float: left;
margin: 0 5px 0 0;
border: 0;
}Условия использования:
Вы можете использовать этот набор для ваших личных сайтов.
При условии сохранения в папке с кнопками файла лицензии со ссылкой на мой блог, вы можете использовать набор кнопок для сайтов ваших клиентов и распространять его бесплатно в составе других проектов.
Обратные ссылки не требуется, но всегда приветствуется!
Просьба, не выкладывать этот набор на других сайтах, а дать ссылку на http://prodengiblog.ru/archives/2441
Кнопка "Вконтакте" по цвету ассоциирует с одноклассниками.
Уже нет
- поменяла цвет кнопки.
Спасибо! Поставил кнопки на свой сайт! Кнопка "Вконтакте" действительно не в "родной" цветовой гамме.
img {
float: left;
margin: 0 5px 0 0;
border: 0;
}
прописывать в style.css? и куда именно его там прописывать?
В любом месте.
Можете написать в конце файла.
спасибо. пригодилось.
что-то я не понял.
я добавил кнопку для контакта. все работает. только она запись добавляет на стену.
а можно сделать так чтобы добавилось в закладки контакта.
спасибо
Можно. Делайте.
В каком месте файла single.php помещать этот код. Что-то в моём шаблоне нет такого.
После функции the_content();
Поставила кнопки, а они отображаются без изображения, прозрачными кирпичиками, причем так было не только с вашими закладками. Подскажите, пожалуйста, что сделать, чтобы картинки появились.
Указать путь к ним правильно.
А мне понравилось, неординарно и стильно, спасибо Ксана! Думаю, что ваш вариант мне наиболее подходит
Ксана, спасибо, поставила, обновила кнопочки у себя. А можешь показать , как поставить кнопки Мне нравится, как это у тебя стоит? чтоб в одну линию выстроить? И как ты делаешь это в рамочке, все в кучке? Заранее благодарю!
Это вот все отсюда:
http://vk.com/pages.php?act=share
https://twitter.com/about/resources/buttons#tweet
http://developers.facebook.com/docs/reference/plugins/like/
Это расположит картинки в линию:
.icons img {
float: left;
width: 100px;
margin: 0 5px 0 0;
border: 0;
}
А это рамочка:
.icons {
border: 1px solid #ddd;
margin: 15px 0 15px 0;
padding: 15px;
}
Ксаночка. еще вопросик. Как ты делаешь форму подписки в конце статьи? Все в одну линию и кнопку подписаться? Спасибо.
Принудительно указываю стили для элементов формы.
Для input указываю размер ( width: 200px; ) и float: left (чтобы они обтекали друг друга).
У меня не получается выстроить кнопки отсюда
Это вот все отсюда:
http://vk.com/pages.php?act=share
https://twitter.com/about/resources/buttons#tweet
http://developers.facebook.com/docs/reference/plugins/like/
в одну линию, как у тебя. Они становятся друг под другом.
Придется вам учить CSS
.
В примере я привела стиль для кнопок из моего поста.
Для других кнопок нужно посмотреть селекторы, которые там используются и сделать аналогично.
Оксана, я подписана на обновления блога уже давно, Ваш пример меня вдохновил и я уже почти год учусь на дизайнера, но ни в каком письме и нигде не нашла ссылки на скачивание, где код находится? На почту пришло подтверждение, что я буду получать книги, а на счет кода на скачивание кнопок ничего не поняла.
Оксана, уже нашла, просто письмо на почту пришло с опозданием, буду разбираться!
То, что нужно - как раз обновил дизайн и нужны новые кнопки социалок...
Отлично давно хотел заменить стандартные на какие то необычные. Спасибо за информацию. Буду разбираться.
Оксана, у меня кирпичики вместо изображения, где пишется путь?
Вот он - путь:
<?php bloginfo('template_url'); ?>/icons/Это значит, что иконки находятся в папке icons внутри папки с вашей темой.
У меня не появляются картинки, я перенесла папку Icons в тему, а также еще допорлнительно в images. Но ничего не происходит. В чем причина?
В том, что вы перенесли дополнительно в images.
В посте ведь написано, добавьте папку icons в папку вашей WordPress-темы, а не в папку images.
Забрала из папки images, все равно висят кирпичики,я ничего не понимаю...Что не так делаю?
Приведите путь к папке icons на вашем сайте.
Ура! кнопка одноклассники, Ксана вы супер, спасибо большое
установил кнопки,всё ок...а не подскажите как сделать такую же рамочку как у вас? заранее спасибо...
В комментариях выше уже писала об этом.
это да,я видел,в от только как центрировать иконки в этой рамочке, они упрямо не хотят быть в рамке
У меня ничего не получилось, пришлось все удалить, завтра в Академии спрошу преподавателей, как писать путь.
Зашла на ваш блог в поисках кнопочек. Скачала. А вот как добавить в папку темы не знаю. Это нужно на хостинге делать?
Ура!!! Методом научного тыка я сделала это! Супер! Мне очень нравиться! Спасибо!
Мне очень интересен Ваш блог и я подписана на обновление статей. Но у меня не получилось вставить кнопки соц. сетей, а как будто все делала правильно. Что я могла сделать не так?
К сожалению, мне отсюда не видно, что именно вы сделали
, поэтому, я не знаю, что там "не так".
Но, у нас на форуме есть экстрасенс
- модератор раздела . Задайте ваш вопрос ему.
Ксана, мне очень нравяться ваши статьи и ваш сайт в целом. Читаю с удовольствием. По теме текущего поста хотелось бы спросить. Почему владельцы сайтов "со стажем" не очень любят яндексовский сервис "Поделись" ? По моему очень удобно, особенно для "чайников", все в одном месте, аккуратно, работает без проблем. Занимает меньше места, не отвлекает читателя от контента. Или тут какая-то иная фишка?
Я не знаю, почему другие владельцы сайтов не любят этот сервис
.
Могу сказать только о себе - я им не пользуюсь потому, что:
- Кнопки очень мелкие и не привлекают внимания.
По ним не хочется кликнуть - а именно такое желание у читателя сайта должны вызывать кнопки.
- Лишний скрипт на сайте, без которого можно обойтись.