В этой статье я расскажу, как разместить в блоге WordPress ссылки на ваши профили в социальных сетях в виде картинок-кнопок. Кнопки типа «Присоединяйся,»Подписывайся»,»Следи».

Кнопки  «Присоединяться» или «Подписаться» на ваши ленты в социальных сетях имеют большое значение в продвижении вашего блога/сайта WordPress.

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

Кнопки социальных сетей «Поделись»

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

Аватарку нужно загрузить в библиотеку медиафайлов вашего WP блога.

Консоль >>> Библиотека медиафайлов >>>Добавить новый

Для кода понадобиться URL аватарок. Узнать его просто. Открываете Библиотеку медиафайлов: Консоль >>> Медиафайлы

И открываете нужную вам аватарку в режиме «Редактировать». Справа в отдельной строке вы узнаете URL этой аватарки.

Имея URL аватарки и аккаунт, точнее URL аккаунта вашего профиля в соц. сети, составляем код для кнопки. Присоединяйся, кликнув по которой, посетитель откроет ваш профиль или ленту в соц. сети и сможет на нее подписаться или присоединиться к группе.

Код HTML кнопок профилей в социальных сетях

Простой код профилей в социальных сетях выглядит так:

<a href="https://twitter.com/Ваш_НИК_в Твиттер"><img src="URL иконки соц.сети,здесь Твиттер" alt="twitter"></a>

Пример кнопок моих профилей привожу ниже:

Сами коды:

<a href="https://twitter.com/wpj2abc"><img src="http://www.wordpress-abc.ru/wp-content/themes/zeedisplay/images/icons/twitter.png" alt="twitter"></a>
<a href="http://www.facebook.com/otdelochnik"><img src="http://www.wordpress-abc.ru/wp-content/themes/zeedisplay/images/icons/facebook.png" alt="facebook"></a>
<a href="https://plus.google.com/u/1/102651904776206112488/posts"><img src="http://www.wordpress-abc.ru/wp-content/themes/zeedisplay/images/icons/googleplus.png" alt="googleplus"></a>
<a href="http://www.linkedin.com/profile/view?id=128853127&amp;trk=tab_pro">
<img src="http://www.wordpress-abc.ru/wp-content/themes/zeedisplay/images/icons/linkedin.png" alt="linkedin"></a>
<a href="http://webonto.blogspot.ru/">
<img src="http://www.wordpress-abc.ru/wp-content/themes/zeedisplay/images/icons/blogger.png" alt="blogger"></a>
<a href="http://wpj2abc.tumblr.com/">
<img src="http://www.wordpress-abc.ru/wp-content/themes/zeedisplay/images/icons/tumblr.png" alt="tumblr"></a>
<a href="http://wpj2abc.wordpress.com/">
<img src="http://www.wordpress-abc.ru/wp-content/themes/zeedisplay/images/icons/wordpress.png" alt="wordpress"></a>
<a href="http://www.flickr.com/groups/2169963@N23/">
<img src="http://www.wordpress-abc.ru/wp-content/themes/zeedisplay/images/icons/flickr.png" alt="flickr"></a>
<a href="https://previous.delicious.com/otdelochnik">
<img src="http://www.wordpress-abc.ru/wp-content/themes/zeedisplay/images/icons/delicious.png" alt="delicious"></a>
<a href="http://feeds.feedburner.com/wordpress-abcru">
<img src="http://www.wordpress-abc.ru/wp-content/themes/zeedisplay/images/icons/rss.png" alt="rss"></a>

 

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

Читайте так же:  Выделить комментарии автора без плагинов

Вот код таблицы:

&lt;table&gt;
	&lt;tbody&gt;
		&lt;tr&gt;
			&lt;td&gt;
			<strong>Текст,код,</strong>
			 &lt;/td&gt;
					&lt;/tr&gt;
				&lt;/tbody&gt;
			&lt;/table&gt;

Эти коды можно вставить в виджет блога. Для этого войдите в Консоль>>> Внешний вид >>> Виджеты и вставьте коды в табличном виде в форму виджета :»Произвольный текст,код HTML».Результат можно посмотреть в виджетах этого блога.

Сложный,SEO правильный код для кнопок ваших профилей в социальных сетях

В более сложном,и с точки зрения оптимизации и иконки и ссылки более правильном  коде нужно указать дополнительные атрибуты картинки (ее размеры) и ссылки (title и alt теги).

Вот пример:

Приведу пример кнопки для соц сети Twitter: «Подписаться на мой твит».

Сам код со всеми атрибутами картинки и ссылки (код заблокирован тегом nofollow, от ненужной передачи seo веса страницы) :

<a href="httр://twitter.com/wpj2abc" target="_blank" rel="nofollow"><img alt="Я на Twitter | Подписаться на меня" title="Я на Twitter | Подписаться на меня" src="http://www.wordpress-abc.ru/wp-content/uploads/2013/02/twitter_backgrounds.jpg" border="0" width="128" height="128"></a>

А это вид полученного результата:
Я на Twitter | Подписаться на меня

Заполняемые теги в коде:

title= «text»;alt=»text»;border=»Значение» width=»Значение» height=»Значение». Тег title=»» будет виден в всплывающем окне.

На этом все! До встречи на страницах сайта WordPress-abc.ru

Другие статьи раздела «WordPress без плагина»


Кнопки социальных сетей, присоединяйся, в WordPress

Добавить комментарий