Кнопки социальных сервисов

Автор:
(Людмила Лунева)

Веб-дизайнер и разработчик сайтов на wordpress

Сейчас в интернете очень популярны всякие социальные сервисы, поэтому каждый, уважающий себя блогер :), старается добавить на свой сайт разнообразные кнопки этих сервисов, чтобы читатели смогли твинуть, плюсануть и пр. посты на сайте.
Благо кнопок для этих целей предлагается великое множество.

Вот и мне захотелось добавить на свой блог очередную кнопку, на этот раз от Одноклассников.

Задумано - сделано.
Поразило только, что для добавления малюсенькой кнопки, нужно подключить файл стилей и скрипт с "родительского" сайта. А, поскольку у меня уже стоят кнопки твиттера, вконтакте и фейсбука, получается, что только для работы социальных кнопок на сайте будет загружаться четыре скрипта.

Многовато будет!

Короче, снесла я эту кнопку нафиг и добавила свою кнопку в тот набор, который у меня на сайте уже был. Заодно сделала кнопку 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(); ?>&amp;title=<?php the_title(); ?>', 'yaru', 'width=1000, height=1024'); return false;" href="http://wow.ya.ru/posts_share_link.xml?url=<?php the_permalink(); ?>&amp;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(); ?>&amp;subject=<?php the_title(); ?>', 'lj', 'width=1000, height=1024'); return false;" href="http://www.livejournal.com/update.bml?event=<?php the_permalink(); ?>&amp;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&amp;st.s=1&amp;st._surl=<?php the_permalink(); ?>', 'odkl', 'width=1000, height=1024'); return false;" href="http://www.odnoklassniki.ru/dk?st.cmd=addShare&amp;st.s=1&amp;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

↓ Как всегда, архив с кнопками доступен для моих подписчиков

Уже скачали 561 раз(а)

Открыть ↓

Хотите получать сообщения о скидочных акциях,
новых постах и темах для wordpress?
  1. Людмила, большое спасибо за Ваши советы! Очень много полезного можно почерпнуть на Вашем сайте.

    Хотел спросить вот еще что. У Вас красивая кнопка "читать далее". В интернете как-то попадалась инструкция, как ее вставить без плагина. Но сейчас не могу найти. Можете посоветовать, как ее можно использовать?
    Заранее спасибо!

    • Нужно вставить в файлы index.php и archive.php после функции

      <?php the_excerpt(); ?>

      следующий код:

      <a rel="nofollow" href="<?php the_permalink() ? rel="nofollow">" title="<?php the_title(); ?>">Читать далее</a>

Внимание: все отзывы проходят модерацию.

Топ комментаторов
АватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватар
Самые комментируемые записи
Самые читаемые записи

Для того чтобы снять блок и увидеть скрытый контент или ссылку на закачку, подпишитесь на обновления блога.

В каждом письме публикуется код разблокировки.

Пользуйтесь кодом только из последних, пришедших вам на Email, писем. Закрыть »

Постов 195
Отзывов 4349