Как добавить социальные иконки на сайт.

Доброго времени суток, уважаемые читатели блога jCover.ru. Сегодня предлагаю поговорить с Вами о том, как мы можем установить иконки социальных сетей на наш WordPress-сайт. Для этого необходимо скачать нужные и понравившиеся нам иконки. И разместить их в папке нашего сайта. Если кто-то не сможет найти их посредством поисковиков в интернете, пишите в комментарии, я помогу. Я создал специальную для этого папку с названием minisocial (полный путь к расположенным иконкам в моем случае wp-content\themes\theme\images\minisocial). Стоит сказать, что иконки в моем примере с расширением png, будьте внимательны.

Теперь необходимо отредактировать нашу тему WordPress. Для добавить социальные иконки на страницу любой нашей заметки нам понадобится файл single.php.

На своем блоге, на странице заметки я установил иконки семи социальных сетей.

На их примере и расскажу как это сделать самостоятельно. Для этого на странице заметки в файле single.php необходимо добавить следующие строчки (предположу, что иконки вы разместили по указанному выше адресу в папке minisocial):

Иконка Facebook

<a rel="nofollow" target="blank" href="http://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>"><img src="<?php bloginfo('template_url'); ?>/images/minisocial/facebook.png" title="FaceBook"></a>

Иконка Vkontakte

<a href="http://vkontakte.ru/share.php?url=<?php the_permalink(); ?>" target="_blank" rel="nofollow"><img src="<?php bloginfo('template_url'); ?>/images/minisocial/vkontakte.png"title="ВКонтакте"></a>

Иконка Мой мир

<a target="_blank" rel="nofollow" href="http://connect.mail.ru/share?share_url=<?php the_permalink(); ?>"><img src="<?php bloginfo('template_url'); ?>/images/minisocial/moi-mir.png" title="Мой Мир"></a>

Иконка Twitter

<a rel="nofollow" class="addthis_button_twitter"><img src="<?php bloginfo('template_directory'); ?>/images/minisocial/twitter.png" alt="Twitter" /></a>

Иконка LiveJournal

<a target="_blank" rel="nofollow" href="http://www.livejournal.com/update.bml?event=<?php the_permalink(); ?>&subject=<?php the_title(); ?>" ><img src="<?php bloginfo('template_url'); ?>/images/minisocial/livejournal.png" title="Livejournal"></a>

Иконка Blogger

<span style="color: #000000;">&lt;a target="_blank" rel="nofollow" href="http://www.blogger.com/blog_this.pyra?t&amp;u=&lt;?php the_permalink(); ?&gt;&amp;n=&lt;?php the_title(); ?&gt;&amp;a=ADD_SERVICE_FLAG&amp;passive=true&amp;alinsu=0&amp;aplinsu=0&amp;alwf=true&amp;hl=ru&amp;skipvpage=true&amp;rm=false&amp;showra=1&amp;fpui=2&amp;naui=8"&gt;&lt;img src="&lt;?php bloginfo('template_url'); ?&gt;/images/minisocial/blogger.png" title="Blogger"&gt;&lt;/a&gt;</span>

Иконка FriendFeed

<a title="FriendFeed" target="_blank" rel="nofollow" href="http://www.friendfeed.com/share?title=<?php the_title(); ?> <?php the_permalink(); ?>"><img src="<?php bloginfo('template_url'); ?>/images/minisocial/friendfeed.png"></a>

Если все сделано правильно, то иконки социальных сетей будут добавлены на ваш WordPress сайт.

Также вы можете воспользоваться уже готовым сервисом Yandex.ru, блоком Поделиться. Для этого необходимо зарегистрироваться на сервисе вебмастера и скопировать предложенный код на этой странице.

На моем сайте в файле sidebar.php я внес этот код:

<script type="text/javascript" src="//yandex.st/share/share.js" charset="utf-8"></script>
<div class="yashare-auto-init" data-yashareL10n="ru" data-yashareType="none" data-yashareQuickServices="yaru,vkontakte,facebook,twitter,odnoklassniki,moimir,lj,friendfeed,moikrug,gplus"></div>

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

Кавычки в коде на странице блога могут отображаются некорректно, уверен вы сможете поправить их ручками в редакторе.

Это все, что я хотел вам рассказать сегодня. До новых встреч.

Оставить комментарий