Сейчас в интернете очень популярны всякие социальные сервисы, поэтому каждый, уважающий себя блогер :), старается добавить на свой сайт разнообразные кнопки этих сервисов, чтобы читатели смогли твинуть, плюсануть и пр. посты на сайте.
Благо кнопок для этих целей предлагается великое множество.
Вот и мне захотелось добавить на свой блог очередную кнопку, на этот раз от Одноклассников.
Задумано - сделано.
Поразило только, что для добавления малюсенькой кнопки, нужно подключить файл стилей и скрипт с "родительского" сайта. А, поскольку у меня уже стоят кнопки твиттера, вконтакте и фейсбука, получается, что только для работы социальных кнопок на сайте будет загружаться четыре скрипта.
Многовато будет!
Короче, снесла я эту кнопку нафиг и добавила свою кнопку в тот набор, который у меня на сайте уже был. Заодно сделала кнопку 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> <img class="grup" src="<?php bloginfo('template_url'); ?>/icons/twit.png" title="Присоединиться в Твиттере" width="32" height="32"> <img class="grup" src="<?php bloginfo('template_url'); ?>/icons/google-plus.png" title="Присоединиться в Google Плюс" width="32" height="32"> <img class="grup" src="<?php bloginfo('template_url'); ?>/icons/vk.png" title="Присоединиться ВКонтакте" width="32" height="32"> <img class="grup" src="<?php bloginfo('template_url'); ?>/icons/fbk.png" title="Присоединиться в Facebook" width="32" height="32"> <img class="grup" src="<?php bloginfo('template_url'); ?>/icons/li.png" title="Присоединиться в liveinternet" width="32" height="32"> <img class="grup" src="<?php bloginfo('template_url'); ?>/icons/lj.png" title="Присоединиться в Живом Журнале" width="32" height="32"> <img class="grup" src="<?php bloginfo('template_url'); ?>/icons/cs.png" title="Присоединиться в Однокласниках" width="32" height="32"> <img class="grup" src="<?php bloginfo('template_url'); ?>/icons/mm.png" title="Присоединиться в Моем Мире" width="32" height="32"> <img class="grup" src="<?php bloginfo('template_url'); ?>/icons/ya.ru.png" title="Присоединиться в в Яндекс-блогах" width="32" height="32"> <img class="grup" src="<?php bloginfo('template_url'); ?>/icons/youtube.png" title="Присоединиться в youtube" width="32" height="32"> </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/grafika-dlya-sajta/knopki-socialnyx-zakladok.html
Кнопка "Вконтакте" по цвету ассоциирует с одноклассниками.
Уже нет 🙂 - поменяла цвет кнопки.
Спасибо! Поставил кнопки на свой сайт! Кнопка "Вконтакте" действительно не в "родной" цветовой гамме.
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 :).
В примере я привела стиль для кнопок из моего поста.
Для других кнопок нужно посмотреть селекторы, которые там используются и сделать аналогично.
Оксана, я подписана на обновления блога уже давно, Ваш пример меня вдохновил и я уже почти год учусь на дизайнера, но ни в каком письме и нигде не нашла ссылки на скачивание, где код находится? На почту пришло подтверждение, что я буду получать книги, а на счет кода на скачивание кнопок ничего не поняла.
Оксана, уже нашла, просто письмо на почту пришло с опозданием, буду разбираться!
То, что нужно - как раз обновил дизайн и нужны новые кнопки социалок...
Отлично давно хотел заменить стандартные на какие то необычные. Спасибо за информацию. Буду разбираться.
Оксана, у меня кирпичики вместо изображения, где пишется путь?
Вот он - путь:
Это значит, что иконки находятся в папке icons внутри папки с вашей темой.
У меня не появляются картинки, я перенесла папку Icons в тему, а также еще допорлнительно в images. Но ничего не происходит. В чем причина?
В том, что вы перенесли дополнительно в images.
В посте ведь написано, добавьте папку icons в папку вашей WordPress-темы, а не в папку images.
Забрала из папки images, все равно висят кирпичики,я ничего не понимаю...Что не так делаю?
Приведите путь к папке icons на вашем сайте.
Ура! кнопка одноклассники, Ксана вы супер, спасибо большое
установил кнопки,всё ок...а не подскажите как сделать такую же рамочку как у вас? заранее спасибо...
В комментариях выше уже писала об этом.
это да,я видел,в от только как центрировать иконки в этой рамочке, они упрямо не хотят быть в рамке 🙂
У меня ничего не получилось, пришлось все удалить, завтра в Академии спрошу преподавателей, как писать путь.
Зашла на ваш блог в поисках кнопочек. Скачала. А вот как добавить в папку темы не знаю. Это нужно на хостинге делать?
Ура!!! Методом научного тыка я сделала это! Супер! Мне очень нравиться! Спасибо!
Поделитесь. Я тоже не пойму где это все? Где искать эту папку темы?
Папку темы искать на хостинге, а папке /wp-content/themes/название_темы
Мне очень интересен Ваш блог и я подписана на обновление статей. Но у меня не получилось вставить кнопки соц. сетей, а как будто все делала правильно. Что я могла сделать не так?
К сожалению, мне отсюда не видно, что именно вы сделали :), поэтому, я не знаю, что там "не так".
Но, у нас на форуме есть экстрасенс 🙂 - модератор раздела Проблемы с версткой. Задайте ваш вопрос ему.
Ксана, мне очень нравяться ваши статьи и ваш сайт в целом. Читаю с удовольствием. По теме текущего поста хотелось бы спросить. Почему владельцы сайтов "со стажем" не очень любят яндексовский сервис "Поделись" ? По моему очень удобно, особенно для "чайников", все в одном месте, аккуратно, работает без проблем. Занимает меньше места, не отвлекает читателя от контента. Или тут какая-то иная фишка?
Я не знаю, почему другие владельцы сайтов не любят этот сервис :).
Могу сказать только о себе - я им не пользуюсь потому, что:
- Кнопки очень мелкие и не привлекают внимания.
По ним не хочется кликнуть - а именно такое желание у читателя сайта должны вызывать кнопки.
- Лишний скрипт на сайте, без которого можно обойтись.
Ксана я тут на форуме выложил готовый код, может новичкам пригодится:) http://prodengiblog.ru/forum/index.php?topic=230.new#new
Спасибо, я думаю, что пригодится.
Спасибо за информацию....а где можно взять вертикальный блог?
Спасибо за кнопки
На вопрос Алекса можно отвечу? Есть сервис share42.com, там можно будет получить вертикальный блок соц. кнопок
Большое спасибо за кнопки. Дали возможность обойтись без плагина. Кнопки вписались как родные.
Немного глупые вопрос. А какой вариант менее прожорливый?
Вариант чего :)?
Уже не важно. Все равно спасибо 🙂
Добрый день.Подскажите,пожалуйста,нужно создать файт singl.php и туда вставить все о кнопках,а потом этот файл в корневой каталог?или как?
Файл single.php, как правило, есть в любой теме - это именно файл темы, а не worpress поэтому, класть его в корень сайта не нужно.