Здравейте, скъпи читатели на сайта на блога. Можете, разбира се, да използвате плъгин за тази задача, но не е толкова трудно да го направите сами, и ще има по-малко, особено след като вече работя доста от тях (вижте статията на предоставената връзка). Взех иконите на социалните мрежи, за които вече писах подробно (надявам се, че Dimox няма да възрази срещу това).
Освен това го смятах за подходящо за имейл.
След като сте създали всички необходими групи и страници в социалните мрежи, което означава, че сте получили всички необходими връзки, можете да бъдете озадачени, като добавите бутони към сайта. Можете, разбира се, в съответствие с публикацията ми за, да изберете подходяща икона за всяка социална мрежа и, ако е необходимо, да намалите размера й до необходимия размер в и.
Но това не е най-добрият вариант. Защо? Е, защото за зареждане на всяка снимка от социалната мрежа ще бъде направена отделна заявка към вашия сървър. Ако имате дузина икони, това означава десет заявки, които по всякакъв начин ще създадат допълнително натоварване на сървъра и . Такава екстравагантност не ни отива, още повече, че е отдавна.
Реших да не преоткривам колелото (създавам спрайт), но използвах този, който създава конструктора Share42 (връзката към описанието на работата с него е дадена малко по-горе). В него можете да изберете тези социални мрежи, чиито икони са ви необходими, като заедно с кода ще получите CSS спрайт, т.е. физически един графичен файл, който ще съдържа всички икони на социални мрежи, от които се нуждаете, и абонаменти за RSS емисия (и имейл, ако е необходимо).
Избрах четири основни мрежи и няколко икони за абонаменти за новини с размер на иконата 24 на 24, така че моят спрайт изглежда така (обаче, той все още си проправя път там, но това няма значение):
Вече разполагаме с всички необходими съставки – връзки към групи или страници от социални мрежи и икони за показването им в сайта. Остава само да подготвите всичко това правилно, т.е. грим. Моят блог се поддържа от WordPress, така че ще поставя кода на бутона в един от . В моя случай се нарича sidebar.php. html кодтова води до много проста:
Е, най-интересното. С помощта ние определяме коя област от нашия спрайт ще бъде показана на това конкретно място като фон (в нашия случай този фон е поставен под хипервръзка). Отнема много време, за да обясните как се случва това, така че прочетете статията на линка и всичко ще стане ясно (има и илюстративни примери). Ако сте твърде мързеливи, тогава просто експериментирайте с числата, които, както може би сте забелязали, не напразно са кратни на 24.
Да, качете спрайт файла чрез FTP на вашия сайт и посочете пътя до него във фонов режим (). Това е всичко. Ако не се получи, прочетете по-внимателно материалите на връзките по-горе и ако изобщо нищо не се получи, опишете ситуацията си в коментарите (подробно - за да поставите кода, не забравяйте да го приложите в PHP тагове с квадратни скоби).
Късмет! Ще се видим скоро на сайта на страниците на блога
Може да се интересувате
Напоследък всеки втори (ако не и първият) клиент в изискванията за разработване на сайта иска задължително да го свърже със социалните мрежи. „Социалните” бутони в сайта са инструмент номер 1 за привличане на целевата аудитория, разпространение на съдържание и PR като цяло. И напълно безплатно!
Социалните мрежи предоставят кодове за своите бутони и уиджети за поставяне в сайта и прилагат инструкции за инсталирането им в системата за управление на съдържанието. Всяка CMS (операционна система) ви позволява да ги инсталирате, основното е да ги впишете хармонично в дизайна на вашия сайт.
Ако вашият сайт е насочен към хора, които общуват с популярни социални мрежи. мрежи, например Vkontakte, Twitter, Instagramm, Facebook, Google+, Pinterest и др., и искате да ги покриете всички, тогава, за да не задавате бутоните за всеки от тях поотделно, като се има предвид, че те могат да се различават по размер и дизайн, препоръчваме да използвате услуги за агрегиране. Това са прости и удобни инструменти, които ще позволят на посетителите на сайта бързо да споделят информация с приятелите си, независимо коя социална мрежа използват. По-долу ще анализираме най-популярните услуги.
Сега има доста начини да добавите бутони за социални мрежи към сайта, има избор и това е приятно. Социалните бутони играят важна роля на страницата, с тяхна помощ, както мнозина вече знаят, можете бързо да публикувате всеки запис в една от избраните социални мрежи. Социалните бутони за сайта вече се поставят навсякъде и навсякъде, но понякога на грешното място.
Много хора вече знаят колко са развити социалните мрежи сега и колко е страхотно, ако вашият сайт има такива бутони, с които можете да добавите любимата си публикация или част от публикация на стената си. С това действие вие не само коментирате или публикувате повторно съобщения, но и давате допълнителен сигнал на търсачките.
Мечтата на всеки собственик на сайт, ако всичките му публикации се публикуват отново от читатели на техните страници в една от социалните мрежи. Сега най-вече има търсене на Vkontakte, Facebook, Twitter и Odnoklassniki. Бих добавил и LiveJournal, liveinternet и Blogger. Желателно е тези бутони да се добавят към сайта за пълно улеснение на потребителя.
Особено Twitter днес заслужава все повече внимание, с негова помощ вашите нови публикации се появяват по-бързо в индекса на търсачката.
Ако сте собственик на сайта, най-вероятно трябва да имате акаунт в liveinternet или LiveJournal. За да не добавяте всеки път нови записи към тези услуги, наличието на техните бутони спестява време. В допълнение, много хора използват тези услуги и може също да искат да публикуват повторно вашия запис в своя дневник.
Има няколко най-добри начина за бързо добавяне на социални бутони към сайт. Можете да направите това с помощта на онлайн услуги, които бързо и лесно ще ви помогнат с това. Или директно през всяка социална мрежа поотделно. Тук всеки има свой собствен избор. Преди имах добавяне на бутони отделно през всяка социална мрежа, сега ги инсталирах чрез услугата.
Има такава услуга, казва се споделяне42. Много материали са изписани за него, колко е добър и как да го използвате. Добре, но за обикновения потребител, който не разбира нищо от него, ще бъде трудно да се справи с него.
За такова малко занимание, копиране на папки в хостинга и след това къпане със стилове, сега вече не кара. Има и други опции, в които трябва да копирате и поставите вече готовия код без допълнителни папки. Така че забравете за тази услуга.
Добавете само най-основните бутони за социални медии, които повечето използват, не извайвайте десетки ненужни забравени бутони.
Какво можете да използвате днес, за да добавите социални бутони за сайта:
Вероятно не е нужно да се намесвате никъде другаде, не можете да намерите по-добри начини. Всяка от тези опции е добра по свой начин. Ако знаете по-удобен или атрактивен начин, моля, напишете в коментарите.
Бутоните за социални мрежи трябва да бъдат вмъкнати в края на всяка статия, така че след прочитане посетителят на сайта да може по желание да публикува отново вашия запис. Не трябва да ги търси някъде в края на страницата. Най-оптималните места според мен, където трябва да се поставят такива бутони, са в страничната лента и непосредствено в края на всеки запис.
В момента аз самият използвам тази услуга, хареса ми. В допълнение към удобството, услугата uptolike има няколко привилегии пред други от този вид.
Привилегиите пред други подобни услуги са достатъчни, за да го използвате. В този случай се добавя само малък код под формата на скрипт и няколко реда със стилове. В същото време няма външна връзка, проверих я чрез услугата за изходящи връзки. Ако греша, можете да ме поправите.
Освен това, какво друго може да направи услугата uptolike.
Най-важните настройки Изберете кои социални бутони за сайта искате да виждате. Ако е необходимо, можете да отворите списъка и да изберете още няколко от мнозинството. Поставете отметка в квадратчето за поддръжка. След това на мобилните телефони бутоните на социалните мрежи винаги ще се показват в долната част на екрана.
Изберете хоризонталната позиция на бутоните, размера и стила. Украсете както желаете и добавете ефект на задържане. Нищо повече не трябва да се прави. За да генерирате код за брояч, трябва да посочите адреса на уебсайта и пощенската кутия. Веднага след това ще се появи код за вмъкване на социални бутони в сайта.
Ако имате WordPress сайт, отворете файла single.php и поставете готовия код веднага след края на съдържанието на страницата. Опреснете страницата и вижте какво ще се случи. Няма нищо трудно.
Изберете желаните икони за услуги. Twitter е само под формата на икони, без броячи. Избираме външния вид на блоковете и отдолу ще има готов код за вмъкване. Както споменахме по-рано, Yandex не добавя нищо друго, всичко е скромно и с вкус.
При този метод трябва да отворите всяка социална мрежа отделно и да конфигурирате всеки бутон за повторно публикуване отделно. За да добавите Facebook бутон, трябва да отидете тук. За съученици и моя свят трябва да добавите данни. За twitter всичко се случва на. За да добавите бутон Vkontakte, отидете на тази страница .
Ще имате готов код само от социалните мрежи, без допълнителни скриптове. Вероятно най-добрият начин да добавите бутони за социални медии към уебсайт. Трудността възниква във факта, че трябва да изрежете всеки бутон поотделно, след това да поставите всичко на едно място и да използвате css стилове, за да го подравните в една колона. Ако нямате проблеми с това, можете да опитате.
За да добавите бутон Vkontakte, щракнете върху Свързване на сайтове и джаджи, по-долу ще има пълен списък с всички възможни допълнения. Има и възможност за добавяне на коментари към страницата, писане на стената, добавяне на вашата група, препоръки, анкети, абониране за автора и публикуване на връзки. В нашия случай изберете Публикуване на връзки.
Няма нищо сложно, избираме стила на бутона (с или без брояч), пишем текста на бутона, опцията за лого и най-отдолу ще има готов код за вграждане. Аз самият използвах този ръчен метод за добавяне, но в момента опитвам услуга на трета страна. Да видим какво ще стане. Ако не ме устройва, веднага ще се върна към ръчния метод.
Друг начин за добавяне на бутони към сайт е с Плюс услуга. Услугата също не е лоша, много забелязани бутони от нея. Изборът на опции за дизайн е голям, в допълнение към аматьорските има големи размери на изображението. Възможността за добавяне на мрежи по никакъв начин не отстъпва на други подобни услуги. Инсталацията не изисква никакви файлове, а само код.
Изберете всеки стил на дизайн и добавете необходимите услуги. Малко по-надолу ще бъде показан готов пример за това как всичко това ще изглежда на страницата. Иконите могат да бъдат големи, средни или малки. Също така квадратни икони за сайта или кръгли, в един ред или в два реда, хоризонтални или вертикални. Със или без брояч, без фон или задайте фона така, че да съответства на дизайна на вашия уебсайт.
След всички тези стъпки отдолу ще има готов код за вмъкване в страницата. Ако трябва да вмъкнете на главната страница, ние ровим във файла index.php, ако във всички ваши публикации, добавяме кода към файла single.php веднага след края на публикацията.
Ако не разбирате нищо в този код, какво трябва да се копира къде и как работи всичко, има изход. Ако имате WordPress двигател, можете да инсталирате плъгин, който ще ви даде бутони за социални медии. Днес има просто голям брой такива добавки. Отидете в административния панел - Plugins. Можете веднага да напишете в търсенето на плъгини „социални бутони“, „социални“ или „VKontakte“. Сигурен съм, че ще намерите нещо.
Сред повечето подобни плъгини за WordPress, гледайки рейтинга, това са най-поставените:
Всъщност има много такива добавки, трябва да инсталирате и да сортирате кой ви харесва най-добре, работи правилно, какво показва и как можете да го персонализирате за себе си. Нека да разгледаме примера на първия такъв плъгин Social Share Buttons за WordPress.
Самият плъгин е на руски, няма да има проблеми с това. След инсталацията в менюто отляво ще се появи нов бутон „Бутони за споделяне“. В основните настройки поставяме логото на сайта и изписваме текста пред социалните бутони.
Не забравяйте да включите генерирането на метаданни, заглавието и описанието на страницата ще бъдат включени. Подравнете бутоните хоризонтално и изберете къде да бъдат. Избираме само в постове. По желание можете да изключите необходимите страници. В самото дъно трябва да посочите псевдонима в тритера.
В следващия раздел, Настройки за споделяне, изберете стила на бутоните. По-долу можете да включите или изключите ненужните социални мрежи и да добавите отстъпи за целия блок отгоре или отдолу. Не е необходимо да поставяте допълнителен код никъде, плъгинът ще направи всичко вместо вас.
Изборът кой метод ще използвате е ваш. Добавете икони за социални медии чрез uptolike, Pluso или чрез Yandex. Не трябва веднага да инсталирате плъгина на WordPress, опитайте се да направите всичко ръчно или с помощта на услуга.
Ако знаете друга добра услуга или начин за добавяне на социални бутони към сайта, ще съм благодарен за коментар.
Преглед на местни дизайнери и скриптове за бутони за социални мрежи за уебсайтове, както и чуждестранни аналози. Кратко, ясно и ясно.
2. Лесен начин за получаване на връзки към сайта - QIP.RU
Поставете бутон на сайта си и дайте възможност на посетителите да добавят съдържанието на сайта, който харесват, към отметки, блогове и социални мрежи. Три стъпки: къде да оформите бутона (уебсайт, Blogger или WordPress), стил на бутона (готови опции) и вземете бутона.
3. Бутони за добавяне на съдържание в социалните мрежи - Pluso
Поставете бутони и позволете на посетителите да споделят любимите си страници в социалните мрежи, както и да отпечатват, изпращат имейли и добавят отметки.
4. Услуга за социална активност - UpToLike
Персонализирани бутони за социални медии с възможност за задаване на цвят, форма, размер и специални ефекти. Допълнителни функции са приспособлението за споделяне на изображения PicShare, функцията "Цитат" и персонализираната функция Следване.
5. Един бутон! - за всички услуги за отметки и социални мрежи
Изберете бутона за преглед. Къде ще бъде инсталиран бутонът: уебсайт, Blogger или WordPress. Добавяне на бутон.
1. Красиви социални бутони за сайта - goodshare.js
Показване на бутони на почти всяко устройство. Чист код. Кратка документация. Удобен за SEO.
2. Скрипт бутони за социални отметки и мрежи - Share42
Изберете размера и маркирайте иконите на услугите, които искате да използвате в сайта. Изберете опциите, които искате. Вижте как ще изглежда и/или изтеглете готовия скрипт. Инсталирайте скрипта на WordPress сайт, Drupal и др.
3. Красиви бутони за социални харесвания с помощта на jQuery - социални харесвания
Скрипт на бутона за харесване с броячи в същия стил за социални мрежи: Facebook, Twitter, VKontakte, Odnoklassniki, My world, Google+ и Pinterest.
1. Бутони за споделяне - AddThis
Бутоните за споделяне ще ви помогнат да увеличите аудиторията на сайта, като привлечете посетители от други ресурси и социални мрежи чрез разпространяваното съдържание.
4. Социално споделяне - Пост
Възползвайте се повече от споделянето в социалните медии. Услугата ще улесни процеса на споделяне в социалните мрежи за посетителите, което ще увеличи органичния трафик на сайта.
5. Бутони за споделяне за всеки уебсайт - AddToAny
Вземете код за бутони за социални медии за всеки сайт. Изберете вида и стила на бутоните, посочете имейл и други опции или изберете една от платформите: WordPress, Drupal, Tumblr, Joomla, Elgg, WordPress.com, Blogger, TypePad или FeedFlare. Вземете кода на бутона.
| в 8:00 часа | Редактиране на съобщение | 6 коментара |
Здравейте мили приятели. Днешната статия ще бъде посветена на създаването на блок от социални бутони без услуги и плъгини. И този блок също ще включва бутони, които позволяват на посетителите на сайта да отпечатат страницата, да изпратят връзка към статията по имейл и да маркират вашата статия. Такива бутони могат да бъдат намерени на почти всеки сайт днес. Едва сега те се изпълняват с помощта на услуги или плъгини. И ще ви покажа как да го направите сами.
Услуги, които използвах на клиентски сайтове и в моя блог - и . Тези услуги улесняват изпълнението на задачата.
И в този блок се използват само необходимите изображения на социални бутони, комбинирани в . Всички стилове са сведени до минимум. Плюс проста html рамка.
Ще разгледаме класическата версия, когато бутоните са разположени след статията.
Можете да направите това или като отворите файла, който отговаря за показването на статии (single.php) и добавите блок от социални бутони към изходния код. Като алтернатива това може да стане чрез функционалния файл на темата (functions.php).
Ще покажа и двата варианта, а вие изберете този, който ви подхожда.
Предупреждение: Направете резервно копие на файла single.php, преди да продължите!
Отваряне на административния панел на WordPress "Външен вид" — "Редактор" — „Единствен запис (single.php)“.
В изходния код потърсете мястото, където изходът на статията завършва и започват коментарите или пагинацията. Именно на това място ще трябва да вмъкнете html кода на блока за социални бутони.
Погледнете внимателно екранната снимка, фокусирайте се върху кодовете, отговорни за изхода на статиятаи коментари. И поставете кода по-долу.
Разбира се, ще има някои разлики във вашите шаблони, но съм сигурен, че ще го разберете, няма нищо сложно в това. И освен това имате резервно копие, няма от какво да се страхувате.
А ето и html кода на блока от социални бутони:
Обяснения на кода:това е един div с клас .share, който съдържа връзки към социални мрежи. Връзката се отваря в отделен изскачащ прозорец, тази функция onClick=window.open е отговорна за това. Подмяната на линк към статия става с този код. Всяка връзка има свой клас, чрез който се задава изображението на бутона.
Това завършва вмъкването през изходния код. След това трябва да добавите css стилове.
Внимание: преди да започнете, направете резервно копие на вашия файл functions.php!
За да използвате тази опция, трябва да отворите файла functions.php и да добавите този код в самия край:
/* Вмъкване на социални бутони */ add_action("comments_template","soc_button"); функция soc_button() ( ?> И внимавайте, след като поставите кода, не трябва да имате интервали или други знаци. Или просто затваряне на php кода?>. В противен случай сайтът ще спре да работи.Обяснения на кода:мястото, където ще бъдат поставени бутоните на социалните медии, се определя от API ключа comments_template. Този ключ определя мястото преди коментарите. Самият код на социалния бутон е ограден в задните тагове за отваряне и затваряне на php. В кода ги маркирах в червено. това е целият трик за вмъкване на html код в php чрез функциите на темата.
На това и този метод приключи, нека да преминем към качването на изображения в сайта.
Например подготвих няколко спрайта с изображения на социални бутони. Можете да ги изтеглите.
Спрайтът, който използвам като пример, е само 3,97 kb и съдържа само необходимите бутони. И тъй като това е спрайт, тогава има само една заявка към базата данни, а не за всеки бутон поотделно.
Изтеглете изображения или подгответе свои собствени и ги качете на вашия сайт. Мисля, че това не би трябвало да е проблем. Освен това ще е необходима връзка към този спрайт за проектиране на бутони чрез css стилове.
Разбира се, тази стъпка може да бъде направена най-напред, но аз предпочитам първо да свърша цялата сложна техническа работа и след това да пристъпя към хубавите малки неща с css стиловете.
И така, отворете файла style.css, отговорен за дизайна на вашия сайт. И поставете тези стилове:
Споделяне на ( display: inline-block; vertical-align: inherit; margin: 5px 0 0 2px; padding: 0px; font-size: 0px; width: 40px; height: 40px; background: url("http://test" ..png ") превъртане без повторение 0px 0px прозрачен;) .share a.vkontakte ( фон: url("http://test..png ") превъртане без повторение -168px 0px прозрачен; ) .share a.google ( фон: url("http://test..png ") превъртане без повторение -252px 0px прозрачен; ) .share a.livejournal ( фон: url("http://test..png ") без повторение scroll -336px 0px transparent; ) .share a.twitter ( background: url("http://test..png ") no-repeat scroll -42px 0px transparent; ) .share a.mail ( background: url("http" ://test..png ") превъртане без повторение -294px 0px прозрачен; ) .share a.odnoklassniki ( фон: url("http://test..png ") превъртане без повторение -126px 0px прозрачен; ) .share a.pinterest ( фон: url("http://test..png ") превъртане без повторение -210px 0px прозрачен; ) .share a.liveinternet ( фон: url("http://test..png" ") превъртане без повторение -378px 0px прозрачен; ) .share a.evernote ( background: url("http://test..png ") no-repeat scroll -420px 0px transparent; ) .share a.bookmark ( background: url("http://test.. png ") превъртане без повторение -462px 0px прозрачен; ) .share a.email ( фон: url("http://test..png ") превъртане без повторение -504px 0px прозрачен; ) .share a.print ( фон: url("http://test..png ") превъртане без повторение -546px 0px прозрачен; ) .share a.digg ( фон: url("http://test..png ") превъртане без повторение -588px 0px прозрачен; ) .share a.spring ( фон: url("http://test..png ") превъртане без повторение -630px 0px прозрачен; )
Обяснения на кода:класът .share определя общия външен вид на блока, размера на всеки бутон, подложката и задава еднообразен фон. И след това всяка връзка има свой собствен клас и на всяка такава връзка, чрез свойството background, се задава вид на бутон. Бутоните се изобразяват като css спрайт и всеки бутон е 40px широк и 40px висок, с 2px подложка между тях, което ви позволява точно да дефинирате изображението за всеки бутон. Тоест, първият бутон е зададен като 0, а вторият като 42 и т.н. В кода тези стойности са посочени в оранжево. Връзката към спрайта също е маркирана в оранжево, вие я променяте на пътя към вашия спрайт.
Това завършва целия процес на създаване на вашия блок от социални бутони. Можете спокойно да продължите с проверката.
Имам и видео урок, в който целият процес е показан нагледно, стълбът показва работата на самите бутони. Гледайте и внедрявайте във вашите уебсайтове и блогове.
Сега това е всичко. Той се справи със задачата. Желая ви успех и ще се видим в нови статии и видео уроци.
