Html код за групови социални бутони. Настройки за споделяне, избор на стил на бутони за социални мрежи
поздрави! Наскоро бях в обратна връзкапопита как да направя същите бутони социалните мрежи, които са инсталирани на моя уебсайт. И реших да дам отговора в статията, като прегледам 6 социални услуги. бутони за сайта.
Предимства и недостатъциВсе пак трябва да се отбележи, че в някои случаи разположението на бутоните може да има леки недостатъци. Нека да разгледаме защо е необходимо да поставите бутони за социални мрежи в създадения блог, както и да разгледаме основните положителни и отрицателни аспектипоставяне на такива икони.
недостатъци
Нека разгледаме най популярни услуги, който може да се използва за добавяне на бутони за социални медии към вашия сайт.
Това е напълно безплатно обслужване, който работи по следния начин. Той автоматично генерира специален скрипт, който позволява на посетителите на интернет проект да публикуват връзки към социалните мрежи. Услугата изглежда като бутони. Инсталацията е много проста и удобна, а разположените бутони изглеждат красиво на страницата.
Услугата предлага повече от триста опции за различни бутони! Можете много лесно да изберете любимите си.
Инсталацията се извършва буквално с едно кликване. Има статистика за реализациите.
Това е може би една от най-интересните онлайн услуги, с помощта на която е възможно да се генерира бутон според няколко параметъра: размер и външен вид. Освен това можете да изберете как да бъде разположен панелът с бутони (хоризонтално или вертикално). Можете също така да посочите кодирането. След като изберете всички необходими настройки, генерираният скрипт трябва да бъде изтеглен и поставен във вашия интернет проект на необходимото място. Най-често веднага след статията.
Yandex ви предлага да изберете кои социални мрежи да се показват. Потребителят може да направи това, като просто постави отметки в квадратчетата до бутоните, които ще бъдат поставени на блока. Можете да редактирате външния им вид.
След това системата автоматично ще генерира изходен код, който ще трябва да инсталирате във вашия блог. Основните предимства на тази услуга включват факта, че скриптът не поставя изходящи връзки в създадения блог. Също така е възможно да свържете Yandex.Metrica за поддържане на статистика.
Тази услуга предлага на потребителите да поставят много красиви и стилни бутони за социални мрежи на своя уебсайт. Създадената от услугата форма използва css и javascript. Генерираният формуляр ще се впише перфектно в дизайна на всеки интернет проект. Бутоните за харесване са направени с помощта на модерни технологии jquery. Връзката е много проста и няма да създаде трудности дори за начинаещи. Зареждането е много бързо.
Това е полезна и напълно безплатна онлайн услуга, която предлага на потребителите да поставят бутони по следния начин: в един ред, подредени под формата на падащо меню, икони на всички услуги подред. След като изберете опции за показване, услугата автоматично ще генерира специален javascript код, които ще трябва да бъдат поставени на необходимото място в сайта.
Освен това услугата ви казва как да добавите създадения код към шаблони.
При използване на тази услуга, можете много бързо и лесно да добавите необходимите бутони към вашия уебсайт или блог. За да направите това, трябва да направите само три прости стъпки: изберете мястото, където ще се намира създадената джаджа, изберете стила на бутоните и вземете кода. Поставяйки такива бутони в създадения блог, посетителите ще могат да добавят интересни материаликъм вашите собствени отметки и социални мрежи.
Така че инсталирането на бутони за социални мрежи за уебсайт е много просто и няма да създаде никакви затруднения дори за начинаещи интернет потребители. Ако желаете, можете да инсталирате бутони за всички налични мрежи или да изберете само някои определени мрежи. За да направите това, трябва да използвате официални джаджи или такива на трети страни онлайн услуги. Най-популярни са бутоните, инсталирани на лични блогове, или в новинарски или развлекателни интернет проекти. :)
P.S. Благодаря ви за вниманието Коя услуга предпочитате? Очаквам вашите коментари. :)
Вероятно няма останали сайтове в интернет, които да не съдържат бутони за публикуванематериали в социалните мрежи. Последните отдавна и твърдо заеха място в живота ни. Там общуваме, запознаваме се, рекламираме бизнеса, четем новини и така нататък. Пълен спектър. Не е изненадващо, че уеб администраторите се стремят да разширят присъствието на своите сайтове в социалните мрежи по всякакъв начин. налични методи. В крайна сметка има тонове потенциален трафик, от който абсолютно всеки се нуждае. Потокът от посетители означава пари, репутация, растеж. Всичко се гради около него. Вкусна хапка.
Социалните бутони са необходими, това е очевидно. Въпросът е друг - кои да избера?Ние го тествахме за вас ТОП 5 различни услуги за добавяне на код на бутон към уебсайтове. Целта е да се установи оптималното и да се покаже в детайли. Да започнем с квалификационния етап.
Избор най-доброто обслужване социални бутониИзборът на кандидати за сравнение се оказа тривиален - взехме най-популярните услуги, за които е чувал всеки човек, който е поне запознат с темата за създаване на сайтове. Няма редки, които набират популярност, само опитни стари.
Съставът на сертифицирания екип е както следва:
В резултат на тестване на избраните социални услуги - uSocial беше лидер. Сега искате да получите обосновка за нашия избор. Разбира се, няма да останем неоснователни.
Характеристики на uSocial бутониДа дадем някои факти, които ни убедиха, че решението е правилно.
Стъпка-2 Съставяме набор от социални бутони. Можете да изберете показаниуслуги за социални мрежи, форма и стил на бутоните.
Тук можете да активирате бутона "Нагоре", да активирате поддръжката мобилни устройства, свържете Viber, WhatsApp, Telegram, SMS услуги.
След като инсталирате социалната лента от вашия личен акаунт в uSocial, можете да видите статистика за харесвания и повторни публикацииза избрания период, както за всички социални мрежи наведнъж, така и за избрани. Данните се показват в ясни графики или диаграми.
Ако социалните мета тагове са попълнени правилно, публикациите ще се възприемат правилно социални услуги, защото указват вида на материала, съответното заглавие, връзка към желаната картина. Всичко това повишава ефективността на повторното публикуване: вашият материал ще бъде правилно индексиран от социалните услуги.
Примери код за микромаркиранеза популярни социални мрежи (кодът трябва да бъде написан преди етикета):
1. FacebookИ ВКонтактеизползвайте Open Graph протокол:
3. За Twitterкодът изглежда така:
4. За Google+Така че:
- връзка към профила на автора в Google+
- име на сайта
- текст на фрагмент (до 40 знака)
- описание на сайта
- път до файла с изображението
Инструментиза работа с микро маркиране.
Отбелязах значението на SMO (оптимизация на социалните медии) в промотирането на уебсайтове. Сега нека поговорим директно за това как да направите социална оптимизация на вашия уебсайт или по-скоро как да добавите социални бутони популярни мрежикъм сайта.
Първо, ще ви покажа как всъщност трябва да изглежда на сайта. В много блогове и новинарски сайтове в долната част на всяка статия можете да видите нещо подобно:
Това са социалните бутони, благодарение на които се постига SMO, а след това социална дейност. Тази статия е посветена на въпроса къде да получите кода за тези социални мрежи. бутони и как да ги инсталирате правилно на уебсайта си. Нека първо да обмислим инсталирането на Google+.
1. Добавете към сайта бутон Google+
Нека започнем, като вземем кода на бутона на 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. За да направите това, отидете на: следващата страница https://vk.com/dev
Първо ще трябва да добавите нов сайт. За да направите това, изберете опцията за свързване на нов сайт от падащото меню „сайт/приложение“:
След като добавите нов сайт, запазете го. Сега изберете желания сайт от падащото меню. Последвано от малък бройпараметри: „опция на бутон“, „височина“, „име на бутон“ - всичко това може да се персонализира по ваш вкус. В края ще има код за бутона:
VK.init ((apiId: 2872188, onlyWidgets: true ));VK.Widgets.Like ("vk_like", (тип: "бутон"));
3. Добавете туит бутон към сайта Както в предишните случаи, първо отидете на мястото, където сте получили и конфигурирали бутона.От автора: живеем в
. Днес взаимодействието с други хора е по-важно от всякога, когато става въпрос за онлайн бизнес. Поради това много хора се чудят как да добавят социални бутони към уебсайта си, за да подобрят социалните сигнали. Това е много умно, така че определено трябва да разберем как се прави. Значението на социалните бутониПонякога, когато чета много полезна статия, искам да го спестя по някакъв начин. Не, разбира се, има много опции как да направите това. Например, направете екранна снимка, копирайте целия текст в бележник, изтеглете в pdf формаи т.н. Но във всички тези случаи собственикът на сайта не получава голяма полза и всичко това далеч не е най-много
удобни начини запазване на информация.Като цяло, ако днес не виждам социални бутони под статия, това е така
понеизненади. Първо, това е удобно за читателите. Второ, това носи несъмнени ползи за уеб администратора, тъй като ако неговите материали са интересни, тогава можете да получите куп естествени социални сигнали безплатно. Без измама или други глупави дейности.
Опции за поставяне в шаблони
Като цяло има три основни опции:
Под статията. Най-популярният и най-очевиден вариант. Той е предназначен за факта, че човек е прочел напълно или бегло текста, харесал е нещо и е решил да го запази за себе си. Над статията. Това е много по-рядко. Тук изчислението се прави върху заглавието и първите параграфи на публикацията. Например видях заглавието „102 варианта за приготвяне на каша“. О, интересно, веднага щракнах и го запазих в социалните си медии. мрежа, за да зарадвате по-късно с разнообразие на масата.страна (
вертикално разположениенай-идеалното, ако имате нужда от максимални социални сигнали. Защото бутоните винаги се виждат и човек може да кликне върху тях по всяко време. Харесва нещо в текста и кликва. Но е важно тези бутони по някакъв начин да се вписват в дизайна и да не отвличат вниманието от съдържанието.
Как да добавите социални бутони към вашия уебсайт. мрежи: опция за дизайнери на оформлениеПредлагам първия вариант за дизайнери на оформление. Тоест за тези, които имат поне малко разбиране от html и css и знаят как да стилизират елементи. Много често дизайнът на бутоните трябва да бъде уникален. Но услуги на трети страниТе не ви дават възможност да направите абсолютно никакъв дизайн; често се ограничава само до настройка на фона и някои малки параметри.
Но има решение! Това са бутони от GoodShare. Просто го въведете директно в търсенето и уебсайтът им вероятно ще ви върне. Скриптът от goodshare е много лек и прост, може да се инсталира с няколко кликвания (може да се свърже от много бърз CDN). Ако сте лейаут дизайнер или имате поне малко познания, няма да ви обяснявам как се инсталират скриптове, защото сте наясно.
Много повече важна информация– това е директният изход на бутоните. На мястото на шаблона, където трябва да покажете икона, например VK, поставете следния код:
< div class = "goodshare" data - type = "vk" > < span data - counter = "vk" > < / span > < / div > |
В този случай span data-counter е незадължителен елемент. Това е брояч, който ще покаже броя на кликванията върху иконата. Трябва да имате активиран jQuery, за да работи. В повечето случаи не се нуждаете от брояч, така че нямате нужда от тази част от кода. Всъщност целият останал код е в документацията:
По този начин можете да създадете необходимия набор от икони. Между другото, без стилове нищо няма да се покаже. Бутоните от goodshare ще трябва да бъдат проектирани от нулата, но това е точно това, от което вие като дизайнер на оформление се нуждаете? Можете да приложите всякакви стилове, да вмъкнете произволен текст и всякакви други елементи вътре в div с бутона.
Между другото, как могат да бъдат стилизирани тези бутони? Е, има 2 варианта. Можете просто да добавите нов клас стил към всеки или можете да използвате селектори на атрибути. като това:
div(...)
div [данни - тип = vk] ( . . . ) |
С помощта на този селектор можете да зададете стилове за бутона за споделяне на публикация в социалната мрежа VKontakte.
Както можете да видите, скриптът от goodshare предоставя отлични възможности. Той е максимално оптимизиран и ви позволява да създавате всякакъв вид социални. бутони
Други начини
Или всеки подходящ плъгин за вашия двигател. Сигурен съм, че има доста такива разширения. Просто потърсете плъгини с думи като „социални“ и „споделяне“ и веднага ще получите нещо подобно.
Няма да обяснявам подробно инсталирането на бутони чрез тези методи, защото следва един сценарий и просто трябва да следвате инструкциите на услугите.
Добър ден, скъпи читатели на блога, днес искам да ви разкажа за бутоните за социални медии за вашия уебсайт. на първо място, ще говоримотносно социалните бутони за споделяне, а именно - - споделяне в социални медии. мрежи (които публикуват публикации на вашата стена).
Навигация на страницата:
Услугата има широк набор от настройки за показване на социални бутони. мрежи. Можете да научите повече за тях, ако разгънете раздела по-долу:
Разширяване пълно описаниеуслуга share42
Както вече споменахме, share42 е безплатна услуга, която не публикува връзката си близо до социални икони. мрежи и може да генерира връзки за 43 социални мрежи, а именно за:
Услугата ви позволява да зададете различни размериза социални бутони, можете да посочите:
Можете също да зададете свои собствени изображения за социални мрежи, да ги направите монохромни или да съответстват на цвета на вашия сайт.
Кодиране на знаци за социални медии бутони
Можете да изберете кодирането на вашия сайт от списъка и да го посочите за бутоните на социалните мрежи. Наличен вариантизбор:
- UTF-8
- Win-1251
Бутоните за социални медии могат да бъдат вмъкнати във всеки уебсайт, независимо от CMS, но за WordPress и Drupal услугата може да генерира готова връзка, която да вмъкнете навсякъде във вашия шаблон. Не е необходимо да пишете код, за да получите връзка. текуща страницаи заглавието му с описание, share42 ще го направи вместо вас.
Например кодът за вграждане изглежда така: