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

При­вет­ствую вас, доро­гие читатели!

В этой ста­тье я пока­жу вам, как сде­лать кноп­ки соци­аль­ных сетей для сай­та WordPress. Мы будем исполь­зо­вать пла­ги­ны, темы и видже­ты HTML. Послед­ний вари­ант под­хо­дит не всем и не все­гда. Но я все рав­но рас­ска­жу об этом, пото­му что не все веб­ма­сте­ра хотят поку­пать отдель­ный шаб­лон или уста­нав­ли­вать допол­ни­тель­ные рас­ши­ре­ния на свою CMS.

Как я строю свой дом на юге Пере­хо­ди на канал и подписывайся 

Для чего нужны социальные кнопки

С помо­щью этих кно­пок ваши гости могут лег­ко делить­ся инте­рес­ным кон­тен­том в сво­их соци­аль­ных сетях. Это поз­во­лит полу­чить ссыл­ку из тол­пы и улуч­шить пове­ден­че­ские фак­то­ры на сай­те. В свою оче­редь, все эти аспек­ты сыг­ра­ют поло­жи­тель­ную роль в посещаемости.

Поми­мо кно­пок «Поде­лить­ся», вы може­те про­сто раз­ме­щать ссыл­ки на свои соци­аль­ные сети. Люди, зашед­шие на ваш сайт из поис­ко­вых систем, уви­дят, что, напри­мер, в ВКон­так­те есть груп­па с рекла­мой. Они будут чаще под­пи­сы­вать­ся и захо­дить на ваш про­ект, а чем боль­ше посто­ян­ных чита­те­лей зай­дет на ваш сайт, тем выше вы буде­те в резуль­та­тах поиска.

Кро­ме того, соци­аль­ные кноп­ки повы­ша­ют удоб­ство исполь­зо­ва­ния сай­та. А сей­час, как извест­но, робо­ты поис­ко­вых систем уде­ля­ют это­му фак­то­ру осо­бое вни­ма­ние. Осо­бен­но это акту­аль­но для ком­мер­че­ских пло­ща­док, таких как интер­нет-мага­зи­ны или круп­ные порталы.

Так что, каза­лось бы, про­стая вещь несет в себе мас­су полез­ных пре­иму­ществ для ваше­го про­ек­та. Что мы можем ска­зать, даже если стра­ни­ца с ошиб­кой 404 ока­зы­ва­ет огром­ное вли­я­ние на ран­жи­ро­ва­ние? Тут нече­му удивляться.

Плагины

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

Но перед этим сто­ит отме­тить, что рас­ши­ре­ния могут нагру­жать вашу CMS или кон­флик­то­вать с дру­ги­ми пла­ги­на­ми или шаб­ло­на­ми. Если ваш сайт пере­ста­ет рабо­тать после уста­нов­ки одно­го из сле­ду­ю­щих рас­ши­ре­ний, не вол­нуй­тесь. Вам про­сто нуж­но уда­лить пла­гин, после чего все сде­лан­ные им изме­не­ния будут авто­ма­ти­че­ски отменены.

Так­же сове­тую делать резерв­ную копию всех фай­лов сай­та перед любы­ми изме­не­ни­я­ми. Затем вы може­те лег­ко вос­ста­но­вить его в преж­нее состояние.

AddToAny Share Buttons

Один из самых попу­ляр­ных пла­ги­нов для раз­ме­ще­ния кно­пок «Поде­лить­ся» на стра­ни­цах сай­та с ВП. Рас­ши­ре­ние име­ет инту­и­тив­но понят­ный интер­фейс и мно­же­ство настро­ек этих самых кно­пок. Базо­вую вер­сию мож­но уста­но­вить пря­мо из ката­ло­га, за рас­ши­рен­ную при­дет­ся платить.

Тем не менее, бес­плат­ной вер­сии долж­но быть доста­точ­но для вас. На скрин­шо­те выше пока­зан толь­ко один вари­ант этих кно­пок. На самом деле в рас­ши­ре­нии гораз­до боль­ше, вы сами в этом убе­ди­тесь, когда уста­но­ви­те его и зай­де­те в настройки.

Все икон­ки мож­но настро­ить, выбрать их раз­мер и поря­док раз­ме­ще­ния. Вы так­же може­те выбрать места, где будут отоб­ра­жать­ся эти самые знач­ки. Как пра­ви­ло, они раз­ме­ща­ют­ся внут­ри ста­тей и стра­ниц после мате­ри­а­ла. Но поста­вить их мож­но и в любое дру­гое место, нуж­но толь­ко изме­нить пара­метр «Рас­по­ло­же­ние» в настройках.

Вы так­же може­те изме­нить текст, кото­рый будет отоб­ра­жать­ся при наве­де­нии кур­со­ра на кноп­ки. Для это­го есть отдель­ный пункт в настрой­ках. Под­дер­жи­ва­ют рус­ский язык, но каче­ство пере­во­да остав­ля­ет желать луч­ше­го. Но об этом мож­но не бес­по­ко­ить­ся – настрой­ка инту­и­тив­но понят­на и про­ста, он обя­за­тель­но разберется.

Вы може­те уста­но­вить это рас­ши­ре­ние пря­мо из ката­ло­га WordPress. Про­сто зай­ди­те в «Пла­ги­ны» — «Доба­вить новый», вве­ди­те назва­ние в поле поис­ка и нажми­те кноп­ку «Уста­но­вить», затем «Акти­ви­ро­вать». Пара­мет­ры пла­ги­на мож­но най­ти в меню «Настрой­ки» — «Соци­аль­ные закладки”.

Social Media Share Buttons & Social Sharing Icons

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

К сожа­ле­нию, под­держ­ки рус­ско­го язы­ка нет, а само рас­ши­ре­ние выгля­дит доволь­но гро­мозд­ко и страш­но. Но это не меша­ет ему выпол­нять свою основ­ную функ­цию: добав­лять кноп­ки соци­аль­ных сетей на ваш сайт.

Поэто­му при жела­нии мож­но разо­брать­ся во всех пара­мет­рах пла­ги­на. Это не соста­вит тру­да, интер­фейс хоть и гово­рит по-англий­ски, но все рав­но вполне понятен.

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

В осно­ве более-менее попу­ляр­ных у поль­зо­ва­те­лей СНГ вари­ан­тов — Twitter, YouTube, Instagram. Но не спе­ши­те рас­стра­и­вать­ся, мож­но сде­лать кастом­ную кноп­ку и доба­вить туда любую соци­аль­ную сеть. Прав­да, для это­го при­дет­ся потру­дить­ся: най­ти каче­ствен­ную икон­ку, доба­вить ссыл­ку самостоятельно.

В моду­ле так­же есть воз­мож­ность доба­вить фор­му под­пис­ки на email-рас­сыл­ку. Его мож­но раз­ме­стить как виджет в сайдба­ре, сайдба­ре сайта.

Вы може­те уста­но­вить базо­вую вер­сию моду­ля пря­мо из ката­ло­га. После акти­ва­ции вы може­те выпол­нять настрой­ку шаг за шагом. Как гово­рят раз­ра­бот­чи­ки пла­ги­на, в слу­чае воз­ник­но­ве­ния про­блем вы може­те обра­щать­ся на их форум (уве­дом­ле­ние со ссыл­кой появит­ся в админ­ке) пря­мо на рус­ском язы­ке. Они поста­ра­ют­ся помочь.

В ката­ло­ге есть очень похо­жее рас­ши­ре­ние, но с кри­вым рус­ским пере­во­дом. Мож­но уста­но­вить, если совсем не дру­жи­те с английским.

WordPress Share Buttons Plugin – AddThis

Про­стой на вид модуль, поз­во­ля­ю­щий раз­ме­щать кноп­ки на сай­те WordPress. Этот пла­гин пред­став­ля­ет собой инте­гра­цию извест­но­го сер­ви­са AddThis, с его помо­щью мож­но создать кноп­ку «Поде­лить­ся» прак­ти­че­ски для любой соци­аль­ной сети. Сам модуль так­же очень уни­вер­са­лен и поз­во­ля­ет рабо­тать с боль­шим коли­че­ством сер­ви­сов из раз­ных стран.

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

Икон­ки мож­но раз­ме­щать в любом месте на сай­те. С настрой­ка­ми там конеч­но не очень понят­но. Мно­гие нович­ки про­сто не пони­ма­ют зна­че­ния той или иной переменной.

Вы так­же може­те исполь­зо­вать шорт­ко­ды для настрой­ки отоб­ра­же­ния того или ино­го набо­ра ико­нок для каж­дой ста­тьи или стра­ни­цы. То же самое мож­но сде­лать с помо­щью спе­ци­аль­но­го окна «AddThis Tools», кото­рое будет появ­лять­ся в каж­дой таксономии.

HTML-код

Кноп­ки так­же мож­но доба­вить с помо­щью html-кода. Здесь мы не будем рас­смат­ри­вать само­сто­я­тель­ную раз­ра­бот­ку скрип­тов, добав­ля­ю­щих икон­ки. Вме­сто это­го мы обра­тим­ся к гото­вым дизай­не­рам, кото­рые помо­гут нам лег­ко создать соб­ствен­ную вер­сию пане­ли «Поде­лить­ся”.

Блок “Поделиться” от Яндекса

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

Вы може­те выбрать один из несколь­ких вари­ан­тов отображения:

• Толь­ко знач­ки — Про­стые знач­ки, как на скриншоте.
• Счет­чи­ки: рядом с икон­ка­ми будет отоб­ра­жать­ся коли­че­ство людей, кото­рые поде­ли­лись вашим материалом.
• Икон­ки и меню: несколь­ко ико­нок и кноп­ка рядом с ней, откры­ва­ю­щая окно со все­ми остальными.
• Неболь­шой раз­мер: толь­ко малень­кие иконки.

После завер­ше­ния настрой­ки необ­хо­ди­мо ско­пи­ро­вать содер­жи­мое поля «Код», а затем вста­вить его в нуж­ное место на сайте.

AddThis

Англо­языч­ный сер­вис, кото­рый помо­жет вам создать соци­аль­ные кноп­ки по сво­е­му вку­су и полу­чить гото­вый код инте­гра­ции. Чаще все­го исполь­зу­ет­ся для само­пис­ных сайтов.

Для VP есть отдель­ный пла­гин, под­дер­жи­ва­ю­щий инте­гра­цию с этим сер­ви­сом. Но вы, если не хоти­те пере­гру­жать систе­му, може­те про­сто вста­вить код в шаб­лон страницы.

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

Share42.com

Очень про­стой и понят­ный сер­вис на рус­ском язы­ке. Он содер­жит боль­шое коли­че­ство раз­лич­ных настро­ек и опций. Вы може­те зай­ти на офи­ци­аль­ный сайт и убе­дить­ся в этом сами.

После выбо­ра знач­ков и их раз­ме­ра мож­но выбрать тип кода. Есть спе­ци­аль­ные опции для WordPress и Joomla. Для всех осталь­ных CMS – стан­дарт­но. Но это все рав­но будет работать.

Код так­же нуж­но будет вста­вить в шаб­лон страницы.

Темы оформления

В неко­то­рых шаб­ло­нах WordPress уже есть кноп­ки соци­аль­ных сетей. Это могут быть бес­плат­ные темы из ката­ло­га или пре­ми­ум-вер­сии из мага­зи­нов. Если вы най­де­те такую ​​тему, вам не при­дет­ся уста­нав­ли­вать допол­ни­тель­ные пла­ги­ны или раз­ме­щать какой-либо код.

Если вы толь­ко дума­е­те о созда­нии сво­е­го про­ек­та, не поме­ша­ет загля­нуть в мага­зин шаб­ло­нов и поис­кать там вари­ан­ты с соци­аль­ны­ми кнопками.

Если вы еще не опре­де­ли­лись, могу про­кон­суль­ти­ро­вать по вопро­су Root. В нем про­сто есть все воз­мож­но­сти для созда­ния кру­то­го инфор­ма­ци­он­но­го про­ек­та и кно­пок соци­аль­ных сетей сре­ди них.

Вы так­же може­те посе­тить мага­зин шаб­ло­нов ThemeForest, что­бы про­смот­реть темы кно­пок. Почти все попу­ляр­ные шаб­ло­ны име­ют этот функционал.

Заключение

Есть мно­го спо­со­бов раз­ме­стить кноп­ки соци­аль­ных сетей на веб-сай­те. Кто-то пред­по­чтет соб­ствен­ный хостинг-код кон­струк­то­ра, кто-то захо­чет уста­но­вить пла­гин и не думать ни о чем дру­гом, а кто-то пред­по­чтет выбрать пра­виль­ный шаблон.

При выбо­ре нуж­но огля­ды­вать­ся на соб­ствен­ный ресурс. Слиш­ком мно­го пла­ги­нов и добав­ле­ние еще одно­го будет про­бле­мой? Затем вы може­те создать с помо­щью кон­струк­то­ра и раз­ме­стить код вручную.

Они не хотят? Затем вы може­те про­сто изме­нить шаб­лон на тот, кото­рый под­дер­жи­ва­ет такой функ­ци­о­нал. Все зави­сит от ваше­го реше­ния. Каж­дый вари­ант име­ет свои плю­сы и минусы.

Если вы хоти­те луч­ше понять, как зара­бо­тать на инфор­ма­ци­он­ных сай­тах, пред­ла­гаю вам посе­тить курс Васи­лия Бли­но­ва “Как создать сайт”. В ней автор мак­си­маль­но подроб­но рас­смат­ри­ва­ет все нюан­сы созда­ния соб­ствен­но­го про­ек­та моне­ти­за­ции. Весь курс раз­бит на бло­ки с уро­ка­ми. Обу­че­ние после­до­ва­тель­но про­во­дит­ся в удоб­ной интер­ак­тив­ной фор­ме с зада­ни­я­ми и обще­ни­ем с опыт­ны­ми веб-мастерами.