Добавете за споделяне още 4 бутона за социално споделяне – ние го пишем сами

Тук фразата „Кой иска да купи софтуер с 8% отстъпка от промоцията?“ написан от самия потребител, а по-долу е как изглежда връзката към сайта в социалната мрежа. Не е много красиво, нали?

тогава връзката в социалната мрежа ще изглежда така:

Тук „Днес е рожденият ден на allsoft.ru - 8 години :)“ е текстът, написан от потребителя, останалото е информация от мета тагове. Можете да прочетете повече за тези мета тагове на Facebook страницатаdevelopers.facebook.com/docs/share, други социални мрежи също ги разбират доста добре.

Как обикновено работи този механизъм:
1. Когато потребителят щракне върху бутона, джаджата предава връзка към страницата към сървъра на социалната мрежа.
2. Социален сървър Самата мрежа влиза в този линк и чете информация за страницата – заглавие, описание, снимка.
3. Социален сървър мрежата кешира информацията за страницата от своя страна и я показва на страниците на социалните мрежи

Как да изпратите различни описания за една страница.
Например, когато създавате промоционална страница на allsoft.ru с комичен тест, беше необходимо да изпратите различни описания в социалните мрежи за различния брой точки, отбелязани от потребителя в теста. Тъй като социалната мрежа получава описание на страница чрез щракване върху връзка, за различните описания са необходими различни връзки. Освен това Twitter позволява само 140 знака, така че се нуждае от отделно, по-кратко описание.

Нов Ya.share(( element: "ya_share_normal", elementStyle: ( "type": "none", "quickServices": ["facebook","twitter","odnoklassniki","vkontakte","moimir"] ), връзка: "http://allsoft.ru/promo/allsoft8let/?share=normal", serviceSpecific: ( twitter: ( заглавие: "Резултат от теста: Драконът е почти вашата силна страна! Все още не можете да преподавате драконология, но на прав път!" ) ) ));
1. Тук ya_share_normal е идентификаторът на елемента на страницата (), в който ще се появи блокът със социални бутони, връзката е връзката, плюс в serviceSpecific за Twitter посочваме заглавието, което се различава от това, което е в og: заглавен мета таг.

Така за задачата „3 различни резултата от теста плюс обща връзка към страница извън теста“ ще имаме 4 тагова:

и 4 блока JavaScript код, както по-горе.

Как да промените заглавието и описанието, кеширани от социалната мрежа.
1. Има най-добрият начин за Facebook: отидете на техния дебъгер

Здравейте, скъпи читатели на сайта на блога. Както вероятно вече се досещате от заглавието, ще говорим за така наречените социални бутони, които могат много сериозно да помогнат на статиите във вашия сайт да привлекат, при успешно стечение на обстоятелствата и високото качество на самата статия, голям брой посетители от социални мрежи и услуги.

Социалните сигнали също се вземат предвид от търсачките, когато класират вашия сайт. Голям брой споделяния с висококачествени акаунти в Twitter, Google+, Facebook (възможно е VKontakte и други мрежи също да бъдат взети под внимание) може да ви позволи да се издигнете с определен брой стъпки по-високо и може би да влезете в Топ и останете там, ако поведенческите фактори не ви разочароват.

Като цяло има много услуги, които предоставят скриптове (бутони) за споделяне на съдържание в социалните мрежи в интернет, но не на всички трябва да се вярва (те лесно могат да ви използват или по някакъв друг начин по лоши причини). И те са способни просто да „закачат сайт“, ако кодът им не е много добре поставен и изчислителните възможности на техните сървъри не са много мощни. Въпреки че има прилични опции, които са свободни от тези недостатъци, и аз ги изброих в края на тази публикация.

Също така е възможно да се покаже на бутоните броя на споделянията към определена социална мрежа. Освен това се вземат предвид всички публикации, а не само тези, направени с помощта на този блок (данните се зареждат чрез API). Вярно е, че не всички социални мрежи се поддържат (само facebook, Google+, Moi Mir, Odnoklassniki.ru, VKontakte), но повечето от основните. Тъжно е, че Twitter наскоро беше премахнат от този списък, защото... той спря да предоставя тези данни чрез API.

Например, тук можете да съкратите заглавия за споделяне в Twitter, тъй като има ограничение за тяхната дължина (прочетете как да направите това по-долу), да конфигурирате дали да се показват или не броячи за споделяне, да зададете указанията за разширяване на менютата с допълнителни бутони за социални мрежи , и още много. Изобщо разрови се и се огледай.

Като цяло, в сравнение с родните бутони за споделяне, които предлагат инсталиране на социални мрежи на сайта (прочетете за това по-долу), блокът Yandex печели при скорост на зареждане, компактност и лекота на инсталиране и конфигуриране. Например, в миналото официалният ми бутон в Twitter често не се зареждаше поради проблеми с техния сървър, така че лявото меню на блога ми, направено на Java скрипт, не се зареждаше дълго време. Възможно е този проблем вече да е решен, но много скриптове винаги ще бъдат по-лоши от един по отношение на оптимизирането на скоростта на зареждане на сайта.

Мисля, че Yandex едва ли ще има проблеми с достъпността, тъй като е добре печелеща търговска организация, която е доста чувствителна към имиджа си. Освен това, ако имате, тогава можете да проследите статистиката на кликванията върху тези бутони, което може да бъде полезно.

В допълнение към блок с икони с нормален размер, можете да направите блок с броячи, а Yandex също предлага добавяне на падащо меню с допълнителни социални мрежи, което ще бъде скрито под спойлер, разположен след показване на необходимия брой бутони за основните социални мрежи (като VKontakte, MoiMir, ):

Ако искате да добавите броячи към бутоните в този блок (с падащо меню), тогава просто вмъкнете още един атрибут в неговия код на сайта (между Div таговете): data-counter="“ и това е всичко. Както казах, не може да бъде по-просто Можете да използвате броячи, които също ще бъдат добавени към малките бутони, които са обсъдени по-долу:

Data-services="vkontakte,odnoklassniki,facebook,gplus,twitter,moimir,blogger,digg,reddit,linkedin,lj"

Можете също така да замените всички икони с техните по-малки миниатюри на бутони, което аз лично намерих за полезно при вмъкване на блок в горната част на всички статии в този блог:

В първата част отварящите и затварящите тагове SCRIPT съдържат пътя до скрипта, който ще бъде зареден от сървъра на Yandex, а втората част съдържа самия код за вмъкване, който трябва да бъде поставен на мястото във вашия шаблон, където този блок ще бъде показан.

Как да вмъкнете социални бутони от Yandex на уебсайт

Затова вмъквам кода за извикване на скрипта заедно с блока Div на мястото, където трябва да се показват бутоните на социалните медии. Е, така че зареждането му да не повлияе на скоростта на зареждане на главната страница, аз, следвайки съветите, дадени в документацията на Yandex, добавих към него атрибута async="async", като по този начин инициирах неговото асинхронно зареждане на скрипта:

Проблемът може да възникне при намирането сред многото файлове на двигателя на вашия сайт този, който отговаря за генерирането на най-долната част на Html кода със затварящ таг /BODY или този, който образува главата. И също така намерете място във файловете на темата, където трябва да вмъкнете част от кода в Div таговете (за да поставите самите бутони).

По принцип и в WordPress, и в Joomla това става в един от файловете на използваната тема. защото Този блог работи на WordPress, така че ще говоря от негово име.

Ако работите с WordPress, за да вмъкнете кода за извикване на скрипта, ще трябва да отворите файла footer.php за редактиране (ще намерите затварящия етикет Body или header.php (ще намерите етикетите Head там) от папката:

/wp-content/themes/име на папката_с_използвана_тема/footer.php

Сега остава само да вмъкнете втората част от кода на социалните бутони на Yandex, който отговаря за местоположението на блока с бутони на страниците на сайта, на правилното място в шаблона на вашия уебсайт или директно в статията:

Между другото, ще направя резервация още веднъж: ако искате да премахнете някой бутон от този блок, не е нужно да отивате отново в конструктора на уебсайта на Yandex. Можете просто да премахнете неговия запис от този списък (заедно със запетаята след него, например „vkontakte“). Е, разбирате...

Е, можете също да промените позиционирането на бутоните вътре в блока с помощта на CSS.

Li.ya-share2__item (background:none!important;padding:0 7px 0 7px!important;)

защото Използвам оформление, което е адаптивно за мобилни устройства, така че за устройства с ниска резолюция на екрана добавих подобен ред, където зададох малко по-малки отстъпи, но това са подробности:

Li.ya-share2__item (padding:0 3px 0 3px!important;)

Като цяло, нещо подобно е случаят, когато става дума за моя WordPress блог. В Joomla, за да вмъкнете този блок, вероятно ще бъде най-лесно да използвате модула Custom Html Code, като го поставите в позицията на шаблона някъде непосредствено под текста на статията.

Официални бутони за социални медии

Много социални мрежи сами предоставят на всеки възможността да изтегли кода на бутона, а често дори можете да персонализирате външния му вид и функционалност. Например, можете да конфигурирате и получите кода на скрипта за споделяне на публикация в .

Както можете да видите, има доста много настройки и в допълнение към външния вид на бутона VKontakte можете също да персонализирате показването на брояч, показващ броя на споделянията.

Ще можете да получите Facebook бутон. Той е много гъвкаво персонализиран, за да отговаря на вашите нужди и не се бъркайте от английските надписи върху него, защото когато поставите кода му на уебсайта си, надписите автоматично ще бъдат преведени на руски.

По-добре е да не вмъквате нищо в полето за URL адрес, тогава страницата, на която се намира този код, ще бъде споделена.

Ще изглежда така:

И, разбира се, не мога да не спомена официалния бутон Twitter, който се появи сравнително наскоро. Конструкторът му се намира. Естествено, той предоставя възможност за преброяване на броя на ретуитовете и ще имате възможност да зададете външния му вид:

След това леко модернизирах получения код според описания по-горе принцип, така че дългите ми заглавия да бъдат отрязани и да не създават допълнителни проблеми на потребителите при споделяне.

Други опции за получаване на бутони за социални медии за вашия уебсайт

Както вече казах, има много всякакви онлайн услуги, където можете да вземете безплатно скрипт за бутони за социални мрежи и да го поставите на вашия уебсайт. Всички те преследват различни цели: „от сърце“ (както в случая с услугата Dimoxa), за събиране на данни, необходими за работата на други услуги (както в случая с ApTuLike) или за печалба (вируси и други незаконни измами с трафика, който имате на вашия сайт). Има и просто платени решения, например като плъгина, споменат по-долу.

Трудно е да се каже какво да изберете от това разнообразие. Ще кажа няколко думи за това, което имах възможност да опитам сам и за което вече съм писал преди.

Като цяло вижте, сравнете и изберете сами.

Късмет! Ще се видим скоро на страниците на сайта на блога

Може да се интересувате

Създаваме бутони за добавяне към социални мрежи и отметки за WordPress блог (без плъгини и скриптове) Likely - самостоятелни социални бутони за сайта
Бутони за мобилни сайтове от Uptolike + възможност за споделяне на връзки в месинджъри UpToLike - конструктор на социални бутони за вашия сайт с разширена функционалност
Uptolike Share Buttons – Безплатна добавка за добавяне на бутони за социални медии към WordPress
uSocial - преглед на нова услуга за социални бутони за вашия уебсайт
Привличане на трафик от посетители към вашия уебсайт чрез SMO методи (форуми, социални мрежи, групи за абониране) Как да добавите към вашия уебсайт блок с бутони, водещи към вашите страници или групи в социалните мрежи, както и към RSS емисия
Google+1 и аз харесвам от Vkontakte и Facebook - как да добавите бутони за харесване към уебсайта си

Връзките в Stories започнаха да се появяват доста отдавна, но само официални акаунти можеха да ги използват. През май стана възможно добавянето на връзки в рекламата с поставяне в История, но това бяха платени механизми. Днес хората започнаха да ми изпращат екранни снимки на Instagram, който бавно започва да позволява на обикновените потребители да добавят активни връзки към уебсайтове в своите истории.

Как да добавите връзка към вашата история в Instagram?

Тази функция не е достъпна за всички акаунти в Instagram! Днес връзките в Stories са достъпни само:

За потвърдени акаунти в Instagram

За профили с над 10 000 абонати.

Освен това връзката може да не се появи веднага след като сте получили 10 000 абонати. Увеличаването на ботове до 10 хиляди абонати не винаги работи. Освен това е трудно да се подмамят ботове, така че да не се отпишат днес и ако броят на абонатите на акаунта падне до 9999 или по-малко, възможността за прикачване на връзка ще изчезне.

За да последва активна връзка от Хронологията, потребителят трябва да „плъзне нагоре“. Тъй като хората все още не са свикнали с подобни възможности, бих препоръчал допълнително да фокусирате вниманието върху връзката с различни връзки и призиви за действие. Е, вие сте големи момчета, разбирате за какво говоря, на кого преподавам тук.

Вече писах за появата на активни връзки в Direct, но не публикувах информацията в блога. Като всяка друга актуализация, тя е достъпна само за избрана и произволна част от потребителите.

Последните актуализации правят Instagram още по-интересен за електронната търговия и малкия бизнес, битката за абонати ще стане още по-гореща. Само се надявам, че Instagram активно ще се бори със спама с връзки в Direct.

Преди да се задълбочим в кодирането, нека да разгледаме наоколо и да обърнем внимание на ресурсите, които глобалната мрежа вече ни предоставя. Между другото, има много от тях, но ще разгледаме двата най-популярни.

Друга услуга, която заслужава нашето внимание, е същият прост конструктор, само че има много повече бутони с услуги и мрежи, някои от които, трябва да призная, видях за първи път. Основната разлика от Yandex.Technologies е, че получаваме напълно генериран скрипт, който ще се обработва не в облака, а директно на нашия сървър.

Изглежда, че с такива прекрасни решения никой дори не би си помислил да „преоткрие колелото“? Но не, сценарий, написан от някого, е толкова добър, колкото ни мързи сами да се занимаваме с него. Разбира се, той ще работи правилно и ще изпълнява функциите си, но това е универсално решение, написано за общата маса сайтове, т.е. не отчита нашите лични малки нужди и условности.

Първо: дизайнът на бутоните е практически железен. Да, той е разпознаваем и се предоставя от самите социални мрежи, но просто не отговаря на нашите нужди. Е, бутонът е със заоблени ръбове, а дизайнът на нашия сайт изисква бутонът да е квадратен, какво да правим? – Вземете спрайта и го начертайте отново! Всеки, който го е пробвал, знае, че това е неблагодарна задача: смяната на един бутон е изпълнена с пет или шест опита за „правилното“ му поставяне върху спрайта. И това е само подмяна на един/няколко бутона, но какво ще стане, ако сайтът е в готик стил и всички бутони трябва да са тъмни?

Второ: няма съмнение за надеждността на Yandex, но бутоните, за разлика от метричния брояч, по някаква причина са трудни за зареждане и често има видимо изоставане от основното съдържание на страницата. Това е особено забележимо при добра високоскоростна връзка, когато страницата се срива почти мигновено и имате няколко блока с бутони.

Трето: за теста генерирай скрипт на share24 - голям е. Всички предоставени редове код наистина ли са необходими за нас? - Не мисли.

Сега нека да преминем към писането на самия скрипт; той ще бъде разделен на три части: HTML, CSS и всъщност самият код, написан на JavaScript. Освен това ще използвам библиотеката jQuery за удобство.

Включваме всички необходими файлове:

Сега добавяме скрипта към файла share.js, той ще изглежда така:

Var share = ( twitter: function($this)( var data = share.data($this); if(data)( var url = "http://twitter.com/share?"; url += "text= " + encodeURIComponent(data.text); url += "&url=" + encodeURIComponent(data.url); url += "&hashtags=" + ""; url += "&counturl=" + encodeURIComponent(data.url); share.popup(url); return false; vk: function($this)( var data = share.data($this); if(data)( var url = "http://vkontakte.ru/ share. php?"; url += "url=" + encodeURIComponent(data.url); url += "&title=" + encodeURIComponent(data.title); url +="&description=" + encodeURIComponent(data.text); url += "&image=" + encodeURIComponent(data.img); url += "&noparse=true"; share.popup(url); }; return false; }, facebook: function($this){ var data = share.data($this); if(data){ var url = "http://www.facebook.com/sharer.php?s=100"; url += "&p=" + encodeURIComponent(data.title); url += "&p=" + encodeURIComponent(data.text); url += "&p=" + encodeURIComponent(data.url); url += "&p=" + encodeURIComponent(data.img); share.popup(url); }; return false; }, data: function($this){ if($this){ return $.parseJSON($this.parent("div").attr("data-share-data")); }; return false; }, popup: function(url){ window.open(url, "", "toolbar=0, status=0, width=626, height=436"); return false; } }; !}

Добавете маркиране към страницата:

Структурата е доста проста, а именно обвивка с класа за споделяне, последвана от div с атрибута data-share-data, който беше споменат по-горе. Линията се формира от четири параметъра със собствени стойности.

url – адресът, който споделяме;
img – изображение, ако не е необходимо, посочете празен ред;
заглавие – заглавие на страница;
текст – описанието, от което се нуждаем.

Вътре в div са самите бутони със събитие onclick, прикачено към тях. При щракване ще бъде извикан един от методите, описани по-горе.

Всичко, което остава, е да придадем човешки вид на бутоните и да добавим CSS:

Share( background-color: #ececec; display: inline-block; padding: 7px 5px; ) .share div:after( content: ""; display: block; clear: both; height: 0; ) .share div:first -child( margin-left: 0; ) .share .twitter, .share .vk, .share .facebook( background-image: url(share.png); margin-left: 7px; border-radius: 3px; височина: 24px; float: ляв; .share .twitter(background-color: #00aced; background-position: 0 -61px; ) .vk(background-color: #48729e; background-color: позиция: 0 -32px; ) .share .vk:hover( background-color: #3a5b7e; ) .share .facebook( background-color: #3c5a98; background -position: 0 0; ) .share .facebook:hover( background - цвят: #30487a )

В резултат на това, след добавяне на CSS бутона, резултатът ще изглежда така:

Това завършва писането на скрипта, в примера използвах само три социални мрежи, ако трябва да свържете други, няма да е трудно. За да направите това, ще трябва да добавите нов метод към обекта за споделяне, като не забравяте да добавите и допълнителни HTML и CSS. Връзки за повторно публикуване в социалните мрежи могат да бъдат получени по два начина:

Използвайте API на социалната мрежа, което не винаги помага;
Вземете го от подобна услуга с помощта на firebug или друг инструмент за уеб разработчици.

Отбелязах значението на SMO (оптимизация на социалните медии) при промоцията на уебсайтове. Сега нека поговорим директно за това как да направите социална оптимизация на вашия уебсайт, или по-точно как да добавите социални бутони на популярни мрежи към вашия уебсайт.

Първо, ще ви покажа как всъщност трябва да изглежда на сайта. В много блогове и новинарски сайтове в долната част на всяка статия можете да видите нещо подобно:

Това са социалните бутони, благодарение на които се постига SMO, а след това и социална активност. Тази статия е посветена на въпроса къде да получите кода за тези социални мрежи. бутони и как да ги инсталирате правилно на уебсайта си. Нека първо да обмислим инсталирането на Google+.

1. Добавете бутон Google+ към сайта

2. Добавяне на бутон „Харесва ми“ от VKontakte и Facebook към сайта 2.1. Харесва ми от Фейсбук

Нека започнем, като вземем кода на бутона на Facebook. За да направите това, посетете тази страница: https://developers.facebook.com/docs/plugins/like-button. Трябва да видите следната картина:

Горе вдясно можете да видите как ще изглежда бутонът на вашия уебсайт. Нека да разгледаме параметрите, които могат да бъдат зададени:

1. URL за харесване
Това е незадължителен параметър. Ако оставите полето празно, всяка страница ще има свой индивидуален брояч за харесвания. Ако въведете конкретен URL там, броячът ще бъде единен (харесванията се сумират от всички страници на този сайт).

2. Бутон за изпращане
Добавете или премахнете бутон за изпращане на съобщения. Препоръчвам да премахнете този бутон, защото... Нашата цел е просто да поставим бутон „харесвам“, въпреки че може би вие имате съвсем различни цели.

3. Стил на оформление
Стил на показване на бутоните. Лично аз най-много харесвам стандарта.

4. Ширина
Ширината на бутона в пиксели. Обикновено задавам не повече от 100 пиксела.

5. Глагол за показване
Какво ще се покаже на бутона: „Харесва ми“ или „Препоръчвам“. Обикновено избирам първата опция (по подразбиране), защото е по-ефективен начин да мотивирате потребителя да хареса.

6.Цветова схема
Цветова гама: бяло или черно.

7.Шрифт
Просто задаване на шрифта за надписа "Харесва ми".

След като зададете настройките, щракнете върху бутона „вземете код“ и го поставете на сайта. Общ код на бутона за facebook:

(функция(d, s, id) ( var js, fjs = d.getElementsByTagName(s); if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js. src = "//connect.facebook.net/ru_RU/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); )(document, "script", "facebook-jssdk")); 2.2. Харесвам от VKontakte

Сега нека да разгледаме как да получите кода на бутона „харесвам“ от VKontakte. За да направите това, отидете на следната страница: https://vk.com/dev. Трябва да видите следната страница:

Първо ще трябва да добавите нов сайт. За да направите това, изберете опцията за свързване на нов сайт от падащото меню „сайт/приложение“:

След като добавите нов сайт, запазете го. Сега изберете желания сайт от падащото меню. Това е последвано от малък брой параметри: „опция на бутон“, „височина“, „име на бутон“ - всичко това може да се персонализира по ваш вкус. В края ще има код за бутона:

VK.init ((apiId: 2872188, onlyWidgets: true )); VK.Widgets.Like ("vk_like", (тип: "бутон")); 3. Добавете туит бутон към сайта

Както в предишните случаи, първо отидете на мястото, където сте получили и конфигурирали бутона.

Може да е полезно да прочетете: