Html код за групови социални бутони. Бутони за социални медии

Поздравления! Наскоро бях в обратна връзкапопита как да направя същите бутони социални мрежи, които са инсталирани на моя уебсайт. И реших да дам отговора в статията, като прегледам 6 социални услуги. бутони за сайта.

Предимства и недостатъци

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

недостатъци

  • Скоростта на зареждане на страницата може да е по-бавна.
  • При тясно специализиран фокус на интернет проекта може да не получите желания ефект.
  • Общ преглед на услугите за социални бутони

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

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

    Услугата предлага повече от триста опции за различни бутони! Можете много лесно да изберете любимите си.

    Инсталацията се извършва буквално с едно кликване. Има статистика за реализациите.


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


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

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


  • Тази услуга предлага на потребителите да поставят много красиви и стилни бутони за социални мрежи на своя уебсайт. Създадената от услугата форма използва css и javascript. Генерираният формуляр ще се впише перфектно в дизайна на всеки интернет проект. Бутоните за харесване са направени с помощта на модерна технология jquery. Връзката е много проста и няма да създаде трудности дори за начинаещи. Зареждането е много бързо.


  • Това е полезна и напълно безплатна онлайн услуга, която предлага на потребителите да поставят бутони по следния начин: в един ред, подредени под формата на падащо меню, икони на всички услуги подред. След като изберете опции за показване, услугата автоматично ще генерира специален javascript код, които ще трябва да бъдат поставени на необходимото място в сайта.

    Освен това услугата ви казва как да добавите създадения код към шаблони.


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

  • Така че инсталирането на бутони за социални мрежи за уебсайт е много просто и няма да създаде никакви затруднения дори за начинаещи интернет потребители. Ако желаете, можете да инсталирате бутони за всички налични мрежи или да изберете само някои определени мрежи. За да направите това, трябва да използвате официални джаджи или такива на трети страни онлайн услуги. Най-популярни са бутоните, инсталирани на лични блогове, или в новинарски или развлекателни интернет проекти. :)

    P.S. Благодаря за вниманието. Коя услуга предпочитате? Очаквам вашите коментари. :)

    IN напоследъкСтана модерно да се инсталират бутони за социални медии на уебсайтове и блогове и това не е изненадващо. Първо, бутоните ви позволяват да увеличите „харесвания“ и „сърца“, което има положителен ефект върху популяризирането на статии в социалните мрежи. Второ, има определени видове бутони, които ви позволяват да споделяте връзки към отделни страници на сайта в социалните мрежи - това привлича допълнителни посетители от Vkontakte, Facebook, Odnoklassniki, Twitter и др. Трето, получени статии голям брой„харесвания“ и „сърца“ се ползват с голямо доверие от читателите на сайта.

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

    • Във връзка с
    • Facebook
    • Съученици
    • Google „+1“
    • Twitter
    • Моят свят

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

    1.1. VKontakte 1.1.1 Бутон „Запазване“.

    Бутонът е доста гъвкав, надписът върху него може да се промени на каквото искате (по подразбиране е „запазване“).

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

    Тук можете да изберете един от 5 стила: бутон, бутон без брояч, линк, линк без икона, икона.

    Полето „текст“ ви позволява да промените стандартния надпис „запазване“ на свой собствен.

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

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

    1.1.2 Бутон „Харесва ми“.

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

    За да конфигурирате бутона, отидете на тази връзка. Тук също трябва да попълните редица параметри.

    Име на сайта – тук е по-добре да посочите краткото и истинско име на вашия сайт.

    Адрес на уебсайт - въведете адреса начална страницавашия сайт.

    Основният домейн на сайта - посочете основното огледало на сайта (може да се намери като параметър на оператора „Хост“), ако ви е трудно да направите това, оставете предложения VKONTAKTE.

    Опциите на бутоните са различни стиловебутони, те влияят на външния му вид.

    Височината на бутона е геометричните размери на бутона „Харесвам“.

    Име на бутона – има две опции (харесва ми, интересно е).

    Кодът за вмъкване е кодът, който е необходим за показване на бутона за социалната мрежа VKontakte.

    1.2 Фейсбук

    Бутонът на тази страница се конфигурира. Възможно е да възникнат трудности, защото... коментарите към формата са написани в английски език, но по-долу можете да прочетете Кратко описаниевсяко поле.

    URL за харесване – URL на страницата за бутона (ако полето не е попълнено, се взема адреса на страницата, на която се намира бутона).

    Бутон за изпращане – наличието на отметка включва нова възможност– изпратете връзка към Facebook (ще се покаже допълнителен бутон- "изпрати"). Когато е включен, два бутона ще се показват едновременно.

    Layout Style – стилът на бутона, влияе върху външния му вид (button_ count се счита за стандартен).

    Ширина – ширина на бутона в пиксели.

    Показване на лица – когато е активирано, ще се показват аватари на хора, които вече са кликнали върху този бутон.

    Шрифт – тип шрифт на бутона.

    Цветова схема – фон на пространството до бутона (бяло и черно).

    Глагол за показване – име на бутон (харесайте го, препоръчвам го).

    Get Code – бутон, който генерира кода на скрипта.

    1.3 Odnoklassniki и My World

    Тези социални мрежи придобиха широка популярност в Интернет на руски език, там живеят огромен брой хора, така че не трябва да пренебрегвате да инсталирате бутона „Клас“ от услугата Odnoklassniki и бутона „Харесва ми“ от уебсайта My World.

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

    Размер на височината – геометричен размер на бутоните.

    Външен вид – вид на рамката на бутона.

    – избор на бутони (като, клас)

    Брояч – включване и изключване на брояча на натиснати бутони (вдясно, горе – местоположението на брояча).

    Текст върху бутони – изберете едно от трите налични имена за бутони.

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

    1.4 Google „+ 1“

    Нова социална мрежа, която за кратко време спечели огромна публика. Трудно е да си представим сайт без бутона „+1“, защото... той не само ви позволява да добавяте връзки към социална мрежа и да увеличавате броя на „плюсовете“, но също така може да повлияе на резултатите на сайта в ТОП търсачка Google.

    Намират се всички подробности за това, както и инсталирането и конфигурирането на бутона.

    1.5 Twitter

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

    Първо трябва да изберете желания бутон(нас интересува първата опция – бутона „изпрати линк“).

    След това на страницата ще се появи формуляр с няколко полета, които трябва да бъдат попълнени.

    Изпрати линк – изберете страницата, на която се намира бутонът, или която и да е друга.

    Текст – изберете текста, който ще се появи до бутона (НЕ ВЪРХУ САМИЯ БУТОН).

    Показване на брояча – активиране или деактивиране на отчитането на броя натискания на бутони.

    Използване – избор на метод за добавяне на съобщение за връзка към Twitter (не засяга нищо).

    Етикет – изберете етикет, който ще бъде публикуван в Twitter (не засяга нищо).

    Голям бутон - увеличение геометричен размербутони.

    Refuse to adapt Twitter - откажете Twitter стилове (по-добре е да оставите полето без отметка).

    Език – изберете езика на бутона.

    Вдясно ще се генерира код, който трябва да се добави към сайта.

    1.6 Ya.ru

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


    Размер – малък или голям размербутони.

    Стил – изберете между бутон или икона.

    Брояч на присъствие – активиране или деактивиране на брояча на натискане на бутони.

    Външният вид на бутона е пример за това как ще изглежда бутонът.

    Заглавие – изберете заглавие за страницата (по избор или заглавието на текущата страница).

    Код за вграждане – необходимият код, който се добавя към сайта.

    2. Готови копчетаза сайт

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

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


    Набор от услуги – избор на бутони за социални мрежи за сайта (тези с отметка ще бъдат показани на сайта).

    Кодът е необходимият скрипт, който трябва да се добави към сайта.

    2.2 Бутони PLUSO

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

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

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

    След това трябва да конфигурирате редица настройки, като изберете

    • местоположение на блока (вертикално, хоризонтално);
    • цвят на бутона (ярък, тъмен);
    • размер на блока (голям, малък);
    • брояч (наличие или отсъствие);
    • фон (безцветен или цветен);

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

    S заек42

    Друга услуга, която ви позволява да проектирате бутони за вашия уебсайт, е Share42.com/ru.

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

    Изберете размера на бутоните и желаните социални мрежи и след това продължете да конфигурирате допълнителни опции.

    Тип панел с икони – показване на блок от бутони (опцията „вертикално плаващ“ е много интересна).

    Ограничете видимия брой икони – изберете броя на показваните бутони (други ще бъдат скрити зад връзката).

    Кодиране на сайта – изберете кодирането на вашия сайт.

    Добавете икона за сайта Share42.com - може би трябва да премахнете отметката.

    Показване на броячи – активиране на брояча на кликвания върху бутони (само когато jQuery работи).

    Инсталация на този скриптдоста сложно, но е описано стъпка по стъпка на самия сайт на Share42.

    3. Как да инсталираме бутони на сайта

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

    Първата част от кода трябва да се добави между таговете и . За да направите това, отидете на Административен панел на WordPressи отидете в редактора на шаблони.

    В редактора на шаблони трябва да намерите файла „Header“ (header.php), ако няма такъв, тогава – „Main template“ (index.php). Сега трябва да намерите маркера или. Ако в определени файловеняма такива етикети (всички теми са различни, това може да е така), тогава ще трябва да отворите всички файлове за редактиране и да потърсите етикета във всеки от тях. За да търсите, можете да използвате клавишната комбинация „Ctrl+F“.

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

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

    Най-често бутоните се добавят преди статията или в края. По-лесен, разбира се, е вторият вариант. Ще го обмислим.

    Трябва да намерите мястото, където завършва статията (основната текстова част на страницата). За да направите това, трябва да редактирате файла „Единствен запис“ (single.php).

    Сега трябва да намерите оператора, който отговаря за показването на основното съдържание на статията. В моя случай това е “the_content”, веднага след него се поставя кодът на бутона.

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

    Здравейте приятели! Днешната статия ще бъде много обемна, но в същото време изключително полезна. Защо реших да напиша тази статия? Факт е, че постоянно ме питат как да събера повече фенове в тази или онази социална мрежа? Защо хората не следват страницата ми във Facebook? Защо никой не следва компанията в Twitter?

    Почти всяка компания днес има уебсайт и дори блог. Имате ли уебсайт? Надявам се! Ако все още не, тогава трябва спешно да помислите за това! Е, ясно е, че блогърите и професионалистите на свободна практика (консултанти и фрийлансъри) определено имат свой собствен адрес в Интернет - уебсайт. Приятели, проблемът е, че малко сайтове са наистина оптимизирани за социални мрежи. Те могат да произвеждат куп много полезни и интересно съдържание, но никой не ги вижда и чува. SMO (social media optimization) – чували ли сте този термин? Така че никой не се занимава с това много CMO (оптимизиране на уебсайт за социални мрежи). Но напразно! Съществува голяма сумаметоди, за които експертите знаят, че създават, както се казва, трафик на уебсайт. Простите манипулации + наличието на идеи и креативност могат значително да помогнат на вашата компания да се популяризира. Гарантирам ви това!

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

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

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

    Изберете социални мрежа, чиито бутони искате да инсталирате:

    Видове социални бутони

    Преди да преминем към инструкциите за инсталиране на бутоните, искам да обърна внимание на факта, че има различни видовебутони:

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

    Забележка:Да се ​​съгласим веднага. В описанието на всеки раздел ще дам връзка към уебсайта на разработчиците на въпросната социална мрежа. мрежи. На такива страници можете да намерите връзки към всички съществуващи бутони и уиджети. Затова незабавно отворете страницата на разработчиците в отделен раздели прочетете допълнително тази статия.

    Уебсайт на разработчиците във Facebook: https://developers.facebook.com/docs/plugins

    Бутон "харесвам".

    Как да инсталирам?

    Инсталирането на бутона „Харесва ми“ е много лесно! Трябва да отидете на уебсайта на разработчиците във Facebook (както се съгласихме, връзката е в началото на този раздел). Преди да започнете да създавате нови бутони и уиджети, ще трябва да създадете ново приложение в менюто с приложения. Това трябва да се направи, защото без това Facebook няма да ви позволи да създавате бутони!

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

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

    1) Url to Like - въведете връзката към страницата, публикацията, целевата страница, за която създавате бутон „Like“. Това може да бъде всякакъв вид съдържание, дори изображение или видео. Основното нещо е да предоставите връзка, която потребителите ще споделят.

    2) Ширина - Ако имате ограничено място за бутона, тогава можете да посочите ширината на изпълнимия модул в пиксели. Самите бутони са малки, но ако изберете стандартни бутони, текстът заема доста място. Ще говоря за това в следващия параграф.

    3) Оформление - Тип Widget. Facebook предлага 4 опции за избор: стандартен (като на снимката), с голям брояч, с малък брояч и само бутони. Всичко зависи от вашия вкус, стила на сайта, наличното пространство за бутони, както и желанието да се показват броячи (т.е. колко хора са кликнали върху бутона).

    4) Тип действие - тип действие, т.е. какъв тип бутон искате да зададете: „Харесвам“ или „Препоръчвам“. Писах подробно за разликите между тези бутони - и джаджите във Facebook като цяло - в моя.

    5) Показване на лицата на приятели - ако искате бутоните да показват на посетител на вашия сайт аватарите на неговите приятели, които вече са щракнали върху бутона „Харесва ми“, поставете отметка в това квадратче. Ако никой от вашите приятели не е харесал страницата, статията и т.н., тогава Facebook няма да покаже снимката, но в текста ще покани потребителя да бъде първият, който ще я хареса. Ако пространството позволява, препоръчвам да включите тази опция, тъй като лицата на приятели имат положителен ефект върху възприемането на съдържанието от читателя, повишават доверието му и често го тласкат да кликне върху бутона, поне от солидарност.

    След като попълните всички полета, щракнете върху бутона Get Code, за да генерирате кода, който ще инсталирате на сайта. Първата част от скрипта се инсталира в тага на страницата, а втората част се вмъква там, където искате да инсталирате бутона.

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

    Как да инсталирам?

    Бутон за туит

    Друг добре познат бутон в Twitter е бутонът „Tweet“, който позволява на потребителите да споделят вашето съдържание с последователи в Twitter.

    Как да инсталирам?

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

    Бутон за хаштаг

    Това е много интересен бутон, за който съм сигурен, че почти никой не знае. Аз лично никога не съм виждал някой да го използва в RuNet. Въпреки това е много добър за решаване на определени проблеми. Например, такъв бутон може да се използва за популяризиране на всякакви събития, уебинари, дискусии в Twitter под определен етикет, маркетингови кампании, състезания. Както и да е! Има голямо пространствоза творчество!

    Логично е, ако бутонът „hashtag“ е инсталиран на страници, свързани с този hashtag. Например, написахте статия за ново събитие, което организирате за фенове в Twitter. За да участвате в състезанието, трябва да използвате конкретен хаштаг. Използвайки такъв бутон, вие ще улесните живота на човек, тъй като като щракнете върху него, той ще отвори туит с с желания хаштаг. Той може просто да добави малко текст и да изпрати туита да се носи свободно. И той се чувства добре, и вие ще имате нов член. Не е ли страхотно? С една дума, трябва да удряте ютията, без да ставате от касата, тоест докато читателят е под емоцията на прочетеното. Две минути по-късно той ще бъде разсеян и може напълно да забрави това, което току-що е прочел.

    Докато въображението ми се развихри, ще споделя с вас още една идея. Да кажем, че сте домакин на събитие (онлайн или офлайн). За да го популяризирате, създавате отделна статия или страница, посветена на тази тема. Точно там в текста вмъквате бутона „Hashtag“ и до него вмъквате отделна джаджа, която ще показва в реално време всички туитове, използващи този hashtag. Преглеждайки дискусията на други потребители, може би вашият не много активен читател ще бъде готов да участва в нея. Целта тук е да привлечете вниманието на читателя към случващото се, да го включите в дискусията и, разбира се, да го задържите на сайта.

    Как да инсталирам?

    Бутонът „Hashtag“ се инсталира от същата страница, за която писах по-горе.

    Бутон за споменаване

    И накрая, ще ви разкажа за още един добър бутон, който, за съжаление, никой не използва. Но напразно! Това е, може да се каже, обикновен туит, изпратен предварително определен профил. Мисля, че бутона е малко използван, защото много хора не знаят как и къде да го инсталират. Нека ви дам няколко примера, които идват на ум. Ако знаете, че вашият целевата аудиторияе в Twitter и активно използва тази социална мрежа. мрежа, защо не насърчавате хората да ви туитват директно от сайта? Това може да бъде туит до автора на статията, туит от страницата „За нас“ или „Контакти“, туит директно до поддръжката на Twitter и т.н. Осъзнавате ли колко много възможности пропускате, за да подправите своя Twitter акаунт?

    Ако човек е дошъл на вашия сайт, значи той вече има някакъв интерес към вас, така че трябва да го подтикнете към действие точно сега. След минута може да е твърде късно! За съжаление настъпиха времена, в които забравяме да направим нещо много бързо, тъй като превключваме вниманието си от едно нещо към друго всяка минута. И колкото по-млада е вашата аудитория, толкова по-изразен е този феномен, така че не забравяйте за съществуването на този бутон и се опитайте да го използвате, където е подходящо.

    Как да инсталирам?

    Ние инсталираме бутона от една и съща страница. Ако сте прочели инструкциите за предишните бутони, тогава всички параметри на бутона „Споменаване“ в Twitter трябва да са ви ясни.

    Вижте по-долу как работи този бутон. Не забравяйте да ми туитнете какво мислите за тази статия :) Искам да знам какво мислят моите читатели, така че ще се радвам да чуя от вас.

    Пример за бутон „Споменаване“.

    Twitter Widgets

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

    Джаджите са от следните видове:

    • Редовна джаджа с най-новите туитове;
    • Уиджет за търсене, който показва резултатите от търсенето по даден ключв реално време. Този тип джаджа е много удобна за търсене, например, по хаштага на вашата марка. Вижте пример за използването му в секцията бутон „Хаштаг“ за Twitter;
    • Приспособление за любими - Показва туитове, които сте означили като любими. Този тип джаджа може да се използва например за показване на положителни отзиви за дадена компания. Защо не?
    • Widget за колекции – колекциите са нещо средно между любими и списъци. Можете ръчно да изберете кои туитове да попаднат в колекцията. Моля, обърнете внимание, че всяка колекция има своя собствена връзка и описание. Тази функция се използва много малко в Twitter, въпреки че е много интересна.
    • Графичният модул Списъци показва списъците с профили, които сте създали. Тук също можете да проявите креативност и да направите нещо интересно и полезно за читателя, което същевременно да ви е от полза. Какво ще кажете за списък с партньори, вашите фирмени акаунти (ако има много от тях), портфолио от Twitter акаунти, които управлявате (за агенции и фрийлансъри), или, например, списък с членове, които са във вашия клуб? Отново пространството за творчество не е ограничено тук.

    Пример за обикновена джаджа за Twitter

    Във връзка с

    Социалната мрежа VKontakte, подобно на други, има цял куп различни бутони и джаджи. Пълен списък с тях може да се види на уебсайта на разработчиците: https://vk.com/dev/sites

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

    Харесвам бутон

    Как да инсталирам?

    Първо трябва да отидете на страницата с джаджи. Дадох връзка към списъка с джаджи в самото начало на секцията VKontakte.

    Как да инсталирам?

    За да вмъкнете джаджата „Общност“ в сайта, първо трябва да въведете връзка към вашата страница или група във VKontakte. След това избирате дали искате джаджата да показва лицата на членове на групата или фенове на страницата и последна новинаот страницата или искате прост плъгин с бутон „Харесва ми“. Тъй като джаджата VK е много подобна на Facebook, препоръките относно типа на приставката остават същите. Няма да се повтарям, така че ако се интересувате, вижте секцията с плъгини на Facebook.

    Следват параметрите, свързани с размера на плъгина и неговия външен вид. Всичко зависи от цветовата палитра на вашия сайт и наличното пространство за плъгина. По принцип можете да изберете всеки цвят, но все пак е препоръчително да запазите оригинала цветова палитра, тъй като такива цветове са по-познати на потребителите и не ги плашат. Е, най-накрая стигнахме до последната точка - вмъкваме кода в сайта. Както вече си спомняте, първата част от кода отива към етикета на страницата, а втората част към мястото, където ще се намира плъгина.

    Съвсем наскоро създадох страница в блога „За SMM“ във Vkontakte. Ето защо, ако искате да получите Последни актуализациив този социален мрежи, тогава се присъединете към нас!

    Пример за приставката „Общност“ във VKontakte

    Уиджет „Абониране за автор“.

    Подобно на приставката за Facebook с подобно име, тази джаджа се препоръчва за всеки, който иска да развие своя лична марка. Ако сте например автор на книги или блог, журналист, адвокат, брокер на недвижими имоти и т.н., тогава защо не инсталирате такъв бутон на уебсайта си? Потенциални купувачипо-лесен за установяване на контакт истински човекотколкото например със страница или група, зад които не е ясно кой стои. Така сме създадени, човекът е социално същество и ние обичаме личен контакт, следователно такава джаджа ще бъде полезна за всеки професионалист, независимо в каква област работите.

    Как да инсталирам?

    Инсталирането не може да бъде по-лесно! Отидете на страницата с джаджи във VK и въведете адреса на вашия профил. След това изберете кой бутон искате да инсталирате. Още веднъж повтарям, че е препоръчително да инсталирате само бутони чрез скрипт (например бутон или лесен бутон). Ако имате нужда само от връзка, тогава е по-добре да го направите чрез HTML код, за да не претоварвате сайта със скриптове, без които можете много лесно да се справите. Ефектът ще е същият, а сайтът ще се зарежда по-бързо.

    Други джаджи VKontakte

    Момчета, по-горе изброих най-често срещаните и ефективни VK джаджи, но списъкът не се ограничава до това. VKontakte също има цял куп различни джаджи, които могат да бъдат полезни в една или друга ситуация. Например джаджата Анкета, която почти никой не използва. Ако сте създали анкета на вашата VK страница, тогава защо не я вмъкнете в статия по темата? Читателите на вашия сайт ще могат да гласуват за своя вариант директно на вашия сайт, а информацията за това също ще отиде във VK. Не е лошо, нали?

    Има и интересна джаджа за препоръки, която показва най-интересните статии във вашия блог или уебсайт. Степента на интерес към определено съдържание се определя от броя на кликванията върху бутона „Харесва ми“. С една дума, VKontakte автоматично ще преброи колко потребители са кликнали върху бутоните „Харесва ми“ и ще събере всички най-интересни статии в този блок. Ако вашата целева аудитория е широко представена в социалните медии. мрежа VKontakte, тогава си струва да опитате и да инсталирате тези две джаджи: „Харесва ми“ и „Препоръки“. Сигурен съм, че резултатите няма да ви накарат да чакате!

    LinkedIn

    Сега нека поговорим за LinkedIn. Тази мрежа става все по-популярна тук, така че не много хора все още разбират как може да се използва за постигане положителни резултати. В Америка, откъдето идва тази мрежа, има малко професионалисти или компании, които нямат собствен профил в LinkedIn. Там ще те погледнат накриво, ако поне нямаш регистрация в социалните мрежи. мрежи. В Европа използването на соц мрежите се различават значително в зависимост от страната. Например Обединеното кралство и Швеция са лидери в включването на LinkedIn в маркетингова стратегиякомпании. Те не само насърчават служителите да имат онлайн профили, но и наемат хора чрез LinkedIn, рекламират компании и продукти и търсят... потенциални клиентии партньори и др.

    Но не за това говорим днес. Ще говорим за социални добавки, които LinkedIn разработи за нас и къде и как да ги използваме. Не бързайте да казвате, че тази мрежа не ви е интересна! И ако работите в областта на консултациите, b2b, тогава просто трябва да прочетете този раздел.

    И така, LinkedIn, както всички социални мрежи. мрежи, има отделна страница, където можете да видите всички съществуващи бутони и добавки: https://developer.linkedin.com/plugins

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

    Как да инсталирам?

    Как да инсталирам?

    Бутонът „Абониране“ е инсталиран от същата страница за разработчици, връзката към която дадох в началото на раздела. В лявата колона щракнете върху „Следвайте компанията“ и LinkedIn ще ви покаже задължителен раздел. Първо изберете какъв тип бутон искате да инсталирате: с вертикален или хоризонтален брояч или може би най-обикновен и кликнете върху Вземете го. След това трябва да въведете името на фирмата, за която инсталирате бутона. В съответната колона започнете да пишете името буква по буква и то трябва да се появи в списъка. Понякога зареждането на списъка отнема много време, така че не бързайте. Името трябва да бъде изписано точно както е изписано на страницата на фирмата. След това изберете езика на бутона - руски, вида на бутона и кликнете върху бутона "Получаване на код". Сега просто поставете кода Правилно мястона сайта и всичко е готово! На руски, между другото, бутонът ще се нарича „Track“, което не ми харесва много. Аз лично бих оставил английската версия. За щастие, всички вече знаят какво означава думата „следвай“ :)

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

    Бутон "Личен профил".

    Това е още един добър, но отново малко използван плъгин. Този бутон показва снимка личен профил, публикува и показва приятелите на потребителя, който вижда този плъгин. Разбира се, за да може LinkedIn да се покаже професионални връзкичитател на вашия сайт, той – читателят – трябва да е логнат (така да се каже) в LinkedIn. Накратко, потребителят трябва да е влязъл в LinkedIn, за да може приставката да функционира напълно.

    За кого може да бъде полезен този плъгин? Смятам, че за работещите в b2b сектора ще е най-полезен. Въпреки че можете да го използвате навсякъде: на страница за авторите на сайта, на страница за служители на компанията, на страници за вашите клиенти и партньори (с тяхно разрешение, разбира се) - има много опции. Основното нещо е, че такива профилни бутони се вписват органично във вашия уебсайт и стратегия на компанията. Ако вашите служители имат наполовина попълнени профили, влизат в LinkedIn веднъж годишно и имат 10 връзки, тогава няма смисъл да показвате такива профили. Ако, напротив, вашата компания се рекламира активно в социалните медии. мрежа, тогава такъв плъгин може да ви донесе много ползи.

    бутон +1

    Как да инсталирам?

    Как да инсталирам?

    Всички бутони и уиджети на Pinterest се инсталират с помощта на предоставената по-горе връзка. За да инсталирате бутона “Pin it”, трябва да изберете съответния бутон в лявата колона.

    Бутоните на Pinterest са малко по-сложни за настройка, тъй като имат много различни опции, но все пак е напълно възможно да ги настроите сами.

    1) В първия ред „Тип бутон“ можете да изберете типа бутон, който искате да инсталирате на сайта: дадено изображение, което и да е изображение от страницата или бутон Закачи, който ще се появи на изображенията на страницата/статията .

    2) Вторият ред е „Външен вид“, т.е. вида на бутона. Тук Pinterest предлага много опции за избор: големи или малки; правоъгълни или кръгли; червено, сиво или бяло; текст на английски или японски.

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

    В зависимост от типа бутон, който изберете, неговите опции ще се променят.

    • Бутонът „Едно изображение“ означава, че искате да зададете конкретно изображение, което читателят на сайта може да закачи за конкретна връзка. Тоест, читателят няма да има избор, дори ако има други изображения на вашата страница. Ако решите да зададете изображение за бутон, то такъв бутон трябва да се инсталира отделно на всяка страница, тъй като изисква въвеждане на линк към страницата/статията. В първата колона трябва да вмъкнете връзка към страницата, която потребителите ще споделят, т.е. връзката, която ще закачат. След това дайте връзка към изображението. Между другото, това може да бъде всеки източник, дори извън вашия сайт. В последната колона можете да посочите текста за изображението, което потребителят ще сподели. Това може да бъде например заглавие на страница или заглавие на статия. Преди да изпрати ПИН, потребителят може по избор да замени вашия текст със свой собствен.
    • Бутон „Всяко изображение“ Или всяко изображение. Този бутон е много прост и не изисква никакви допълнителни параметри. Просто трябва да изберете размера и вида на бутона, както и да решите дали имате нужда от брояч или не.
    • Бутон „Насочване на изображението“, т.е. бутон, който ще се появи върху самото изображение, когато задържите курсора на мишката върху него. Можете да изпробвате как работи това в примерното изображение на Pinterest.

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

    Примерен фрагмент от код, който се инсталира само веднъж в етикет на страница: .

    Бутон за абониране

    Pinterest, подобно на Google+, не прави разлика между лични сметкии фирмени акаунти, така че бутонът „Абониране“ и за двете е създаден на едно място. Инсталирането на този бутон е лесно като белене на круши. Всичко, което трябва да направите, е да въведете връзката към вашия профил и да дадете име на бутона.

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

    Бонус: хипервръзки

    По-долу ще дам примери за това как такива връзки се създават ръчно. Можете също така да опитате специален генератор на връзки - Share Link Generator. На този сайт можете да създавате връзки за Facebook, Twitter, Google+, Pinterest и LinkedIn. Ще бъде лесно за разбиране на сайта, така че няма да обяснявам какво и как. Въпреки това, погледнете моите съвети, тъй като генераторът на връзки не предоставя пълен линкЗа HTML формат+ код за това как връзката да се отваря в нов прозорец. Всичко това плюс примери за връзки към социални медии. Мрежа Vkontakte, ще намерите в този раздел.

    текст на хипервръзка

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


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

    Тук „Днес е рожденият ден на allsoft.ru - 8 години :)“ е текстът, написан от потребителя, останалото е информация от мета тагове. Можете да прочетете повече за тези мета тагове на Фейсбук страница 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 има най-много По най-добрия начин: отидете на техния дебъгер

    Ако се страхувате, че сте наблюдавани в интернет, изключете компютъра си.

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

    Не е тайна, че почти всички услуги за социални бутони изтичат информация за вашите потребители, където е необходимо. Боже мой! Не може да бъде! Току що разбрах за това! - Честито! Те трябва да ви използват по някакъв начин, за тяхната работа и усилия. Те направиха добри услуги, с голяма функционалност, удобство и „качество“. Всичко, което трябва да направите, е да изберете това, от което се нуждаете, и да поставите кода, където ви трябва. Това е всичко. И каква е ползата за тях да правят подобни маневри безплатно в интернет? вярно Не. Така че от време на време всеки такъв офис се хваща да изхвърля данни в някой DMP.

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

    Списък на най популярни услугисоциални бутони за сайта
    • share.pluso.ru
    • uptolike.ru
    • tech.yandex.ru/share
    • share42.com
    • sharethis.com
    • pip.qip.ru
    • www.addtoany.com
    • www.po.st
    • www.addthis.com
    • sharebuttons.com

    Ако нямате достатъчно време или ви мързи, за да направите повече от няколко движения на ръцете и фалангите на пръстите, тогава можете безопасно да използвате тези услуги. Те са чудесни както за уебсайтове, така и за посетители. Но никой не гарантира 100% сигурност на потребителските данни, 100% работа на техните DNS и зареждане на вашите сайтове. Тези. Ако има повреда в сървърите на социалните бутони, вашите сайтове ще се зареждат по-бавно от обикновено. Да, това се случва рядко, но се случва. Разбира се, че можете да поставите асинхронно зарежданетези скриптове, оптимизират работата си, но това е повече от няколко движения, за които писах за мързеливите.

    Разбира се, в интернет има кодове за социални медии, които са поставени във вашия уебсайт и не изтичат никъде информация, но много от тях съдържат външни връзки към същите тези социални мрежи. Уеб администраторите не го харесват външни връзкии затова за най-параноичните уебмастъри съм събрал готови кодовена базата на скрипта goodshare.ru, за което всъщност им благодарим.

    Пример за инсталиране на този код не е за тези, които не знаят основите на HTML или CSS, но ако имате ръце и малко време, ще успеете, ако следвате стриктно инструкциите. И така тръгнахме:

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

    Шест социални мрежи са конфигурирани според стандарта: Facebook, VKontakte, Odnoklassniki, Moi Mir, Google Plus, Туитър. Има повече от 30 от тях в настройките на скрипта, но всичко това може да се инсталира отделно, ако желаете. Предимствата на тези бутони, както е посочено от авторите, с които съм напълно съгласен:

  • Страхотен дисплей на всяко устройство (Да, те са адаптивни към всеки размер на екрана)
  • Чист код - бърз и сигурен сайт (зареждат се само скрипта, CSS и шрифта, които са само на вашия сървър)
  • Всички споделят технологии на мобилни месинджъри в един скрипт (всички видове телеграми)
  • Удобен за SEO - без връзки
  • Не съдържа снимки
  • Какво прави самият скрипт и защо е необходим този скрипт като цяло? Скриптът на тези бутони съдържа всички API на всички социални мрежи, а скриптът прави всяко място на сайта активен блок за споделяне.

    Например, можете да го поставите върху празни DIV блокове, или Span, или изображения, или празни връзки и почти всеки елемент от сайта може да бъде превърнат в тези бутони. В моя пример използвах скрипт за празни Div.

    Относно снимките: няма ги тук. Иконите, които виждате са взети от шрифта, те са само символ и нищо повече.

    Можете да изтеглите архива на бутоните от .

    Инсталирането на тези бутони е много лесно. В архива има само четири файла: Font, CSS, JS и TXT.

    1). Трябва да качите шрифта във всяка папка на вашия сървър; можете да го поставите на същото място като вашия JS или CSS.

    2). След това качете JS на сървъра си и го покажете на сайта си, като използвате код навсякъде, но препоръчвам в най-долната част на страницата:

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

    ВАЖНО: (за тези, които премахнаха част Jquery код) скриптът на бутона трябва да се зареди след скрипта Jquery.

    3). След като инсталирате JS и шрифта, трябва да добавите CSS към вашия сайт. Просто копирайте цялото съдържание на файла soc.css в един от вашите CSS плъгини на сайта.

    ВАЖНО: В ред 82 на файла soc.css променете URL адреса на вашето местоположение на шрифта!

    4). След всичко това копирайте HTML кода от файла HTML.TXT на вашия сайт, където искате да видите тези прекрасни бутони.

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

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

    Благодаря ви за вниманието, ако имате въпроси относно инсталацията, пишете коментари.

    Бях с теб, мързелив Стаурус.