Skripta društvenih gumba. Gumbi na društvenim mrežama

Jer neću ponovno objašnjavati što je u njemu napisano, ali ću se morati na to pozivati ​​tijekom članka.

Dakle, krenimo i krenimo, možda, sa samim JavaScriptom. Rad skripte u vezi brojača podijeljen je u dva dijela:

• Brojač se mora dodati svakom gumbu s društvenih mreža prilikom učitavanja stranice;
• Na događaju klika na gumb promijenite broj dijeljenja.

Da bismo implementirali prvi dio logike skripte, moramo dodati metodu init():

Init: function(element)( $(document).ready(function()($(element).each(function(idx)(var countApiUrls = ( twitter: "https://urls.api.twitter.com/1) /urls/count.json?callback=?&url=", vk: "https://vk.com/share.php?act=count&index=" + idx + "&url=", facebook: "https://graph .facebook.com/?callback=?&ids=" ); var pageUrl = $.parseJSON($(element + " div:eq(0)").attr("data-share-data")).url; if (pageUrl)( share.getCountLikes($(element).find(.twitter"), countApiUrls.twitter, pageUrl, "twitter"); share.getCountLikes($(element).find(.vk"), countApiUrls .vk, pageUrl, "vk"); share.getCountLikes($(element).find(.facebook"), countApiUrls.facebook, pageUrl, "facebook"); ); )); )); vrati false; )

GetCountLikes: function(box, apiUrl, pageUrl, type)( if(apiUrl && pageUrl)( if(type == "twitter")( $.getJSON(apiUrl + pageUrl, function(data)(var num = data.count | | 0; if(num > 0)( share.setCountLikes(box, num); ); )); ); if(type == "vk")( $.getScript(apiUrl + pageUrl); if(!window. VK)( window.VK = (); ); window.VK.Share = ( count: function(idx, count)( var num = count || 0; if(num > 0)( share.setCountLikes(box, num ); ); ) ); ); if(type == "facebook")( $.getJSON(apiUrl + pageUrl, function(data)( var num = data.shares || 0; if(num > 0)( share .setCountLikes(box, num); ); )); ); ); vrati false; )

Metoda getCountLikes() uzima 4 parametra:

• kutija - omot za svaki od gumba društvenih mreža;
• apiUrl - adresa API-ja na kojem se poziva;
• pageUrl - adresa stranice o kojoj želimo dobiti podatke;
• vrsta - vrsta društvene mreže.

Koristimo metodu jQuery $.getJSON() za pristup generiranom url = apiUrl + pageUrl. Ovisno o društvenoj mreži, dobivamo odgovor (uglavnom json) i obrađujemo ga. Iznimka je "Vkontakte", jer kada zatražimo, dobivamo na obradu metode VK.Share (), što uzrokuje prirodnu pogrešku na stranici, budući da nemamo VK objekt, već uz pomoć " jednostavna" štaka, izvlačimo rezultat koji nam je potreban.

Posljednje što nam preostaje je da nacrtamo brojeve na gumbima. Ovaj problem rješavamo uz pomoć nove metode setCountLikes(). Ova funkcija uzima dva parametra: kvalifikator omota i sam broj.

SetCountLikes: funkcija(kutija, broj)(box.append(" " + broj + ""); vrati false;)

Skočni prozor: function(box, url)( var countBox = box.find(".count"); if(!countBox.length)( share.setCountLikes(box, 1); )else( countBox.text(parseInt(countBox. text()) + 1); ); window.open(url, "", "toolbar=0, status=0, width=626, height=436"); vrati false; )

Dodali smo novi parametar okvira, opisan ranije, a unutra, koristeći uvjetnu naredbu if (), povećavamo brojač, ovisno o prisutnosti broja prethodno dijeljenih. Time je dovršena sama skripta, naravno, također morate ažurirati redak u metodama twitter(), vk(), facebook():

share.popup(url);

share.popup($ovo, url);

Sada, što se tiče HTML označavanja, gore smo razmotrili metodu init () i budući da je ovo ulazna/početna točka skripte, pozivamo je na stranici nakon povezivanja datoteka:

Također biste trebali dodati raspon s klasom ikona na gumb:

Također je došlo do manjih promjena u CSS-u. Nadam se da ste, dok ste pročitali ovaj odlomak, već preuzeli arhivu s primjerom, ako ne, onda je preuzmite i koristite - sve radi. I sam koristim ovo rješenje u nekoliko projekata i nisam primijetio nikakve probleme.

Pozdrav prijatelji! Današnji će članak biti vrlo opsežan, ali u isto vrijeme iznimno koristan. Zašto sam odlučio napisati ovaj članak? Činjenica je da me stalno pitaju kako pridobiti više obožavatelja na određenoj društvenoj mreži? Zašto ljudi ne prate moju Facebook stranicu? Zašto nitko ne prati tvrtku na Twitteru?

Gotovo svaka tvrtka danas ima web stranicu, pa čak i blog. Imate li web stranicu? Nadam se! Ako ne, onda morate hitno razmisliti o tome! Pa, s blogerima i vlasnicima besplatnih zanimanja (konzultanti i freelanceri) jasno je da imaju svoju adresu na internetu - web stranicu. Prijatelji, problem je što je malo stranica stvarno optimizirano za društvene mreže. Mogu proizvesti hrpu vrlo korisnih i zanimljivih sadržaja, ali ih nitko ne vidi i ne čuje. SMO (optimizacija društvenih medija) Jeste li čuli za ovaj izraz? Dakle, nitko se ne bavi upravo tim CMO-om (optimizacija stranice za društvene mreže). Ali uzalud! Postoji ogroman broj načina na koje stručnjaci znaju stvoriti ono što se kaže kao promet na web stranici. Jednostavne manipulacije + posjedovanje ideja i kreativnosti mogu značajno pomoći vašoj tvrtki u promociji. To vam garantiram!

Dakle, u nastavku ću vam reći, kako instalirati službene društvene gumbe i widgete na web-mjesto. To će biti samo službeni gumbi i widgeti - bez usluga ili dodataka!

Društvene mreže su se jako potrudile i stvorile ogroman broj različitih gumba i widgeta. Za mnoge nitko nije ni čuo, iako su slobodno dostupni svima. Ovdje ćemo pokriti samo one najkorisnije i najučinkovitije koji će vam pomoći povećati bazu obožavatelja, kao i učiniti dijeljenje vaših članaka i drugog sadržaja jednostavnim i lakim za posjetitelje vaše stranice.

Ako želite instalirati iste gumbe kao na mojoj stranici, onda je više o tome napisano.

Odaberite društveno mreža čije tipke želite postaviti:

Vrste društvenih gumba

Prije nego što počnemo s uputama za instalaciju gumba, želim vam skrenuti pozornost na činjenicu da postoje različite vrste gumba:

Facebook, kao i druge društvene mreže mrežama postoji veliki izbor društvenih gumba i widgeta. Svaki od njih ima svoju funkciju i svrhu. U ovom ćemo odjeljku razmotriti samo one najčešće korištene i potrebne. Ostalo možete pogledati i testirati na stranicama programera na Facebooku.

Bilješka: Odmah se dogovorimo. U opisu svakog odjeljka dat ću poveznicu na stranicu programera dotične društvene mreže. mreže. Na takvim stranicama možete pronaći poveznice na sve postojeće gumbe i widgete. Stoga odmah otvorite stranicu programera u zasebnoj kartici i pročitajte dalje ovaj članak.

Stranica za razvojne programere Facebooka: https://developers.facebook.com/docs/plugins

Gumb za sviđanje

Kako instalirati?

Instaliranje gumba "Sviđa mi se" vrlo je jednostavno! Morate otići na stranicu programera na Facebooku (kao što smo se dogovorili, veza se nalazi na početku ovog odjeljka). Prije nego počnete stvarati nove gumbe i widgete, morate stvoriti novu aplikaciju u izborniku Aplikacije. To se mora učiniti, jer bez toga, Facebook vam neće dopustiti stvaranje gumba!

Ako imate bilo kakvih problema s kreiranjem aplikacije ili generiranjem skripti, javite mi u komentarima, a ja ću napraviti još detaljnije upute o instalaciji gumba.

Dakle, da biste postavili gumb "Sviđa mi se", na stranici programera, u lijevom stupcu, kliknite na " gumb like (web)«. Sada morate birati između opcija koje nudi Facebook kako biste dobili točno onaj widget koji želite.

1) Url za sviđanje— unesite poveznicu na stranicu, publikaciju, odredišnu stranicu za koju kreirate gumb “Sviđa mi se”. To može biti bilo koja vrsta sadržaja, čak i slika ili video. Glavna stvar je da navedete poveznicu koju će korisnici dijeliti.

2) Širina- Ako imate ograničen prostor za gumb, tada možete odrediti širinu widgeta u pikselima. Sami gumbi su mali, ali ako odaberete standardne tipke, tekst zauzima dosta prostora. O tome ću govoriti u sljedećem paragrafu.

3) raspored- Vrsta widgeta. Facebook nudi izbor od 4 opcije: standardna (kao na slici), s velikim brojačem, s malim brojačem i samo tipke. Sve ovisi o vašem ukusu, stilu stranice, dostupnom prostoru za gumbe i želji za prikazom brojača (tj. koliko je ljudi kliknulo na gumb).

4) Vrsta radnje- vrstu radnje, tj. koju vrstu gumba želite postaviti: "Sviđa mi se" ili "Preporuči". Detaljno sam pisao o razlikama između ovih gumba - i widgeta na Facebooku općenito - u svom .

5) Pokažite lica prijatelja- ako želite da gumbi posjetitelju vaše stranice prikazuju avatare njegovih prijatelja koji su već kliknuli na gumb "Sviđa mi se", označite ovaj okvir. Ako nitko od prijatelja nije lajkao stranicu, članak i sl., tada Facebook neće prikazati fotografiju, ali će u tekstu ponuditi korisniku da je prvi lajka. Ako prostor dopušta, preporučam da se ova opcija omogući, jer lica prijatelja pozitivno utječu na percepciju sadržaja od strane čitatelja, povećavaju njegovo povjerenje i često ga tjeraju da klikne na gumb, makar samo iz solidarnosti.

Nakon što ste ispunili sva polja, kliknite na gumb Nabavite kod za generiranje koda koji ćete instalirati na stranicu. Prvi dio skripte postavljen je na oznaku stranicu, a drugi dio se ubacuje na mjesto gdje želite postaviti gumb.

Stranica bi se trebala otvoriti na ruskom, ali ako je iz nekog čudnog razloga na engleskom, onda možete promijeniti jezik na samom vrhu stranice.

Kako instalirati?

Tipka Tweet

Još jedan dobro poznati gumb na Twitteru je "Tweet", koji korisnicima omogućuje dijeljenje vašeg sadržaja sa svojim Twitter sljedbenicima.

Kako instalirati?

Svi Twitter gumbi instalirani su na gore spomenutoj stranici programera. Proces za sve gumbe je gotovo identičan - odabiremo željenu vrstu gumba, popunjavamo parametre i kopiramo kod, koji zatim zalijepimo na stranicu.

Hashtag gumb

Ovo je vrlo zanimljiv gumb, za koji, siguran sam, gotovo nitko ne zna. Osobno nikad nisam vidio da ga netko u RuNetu koristi. Međutim, vrlo je dobar za određene zadatke. Na primjer, takav se gumb može koristiti za promoviranje bilo kakvih događaja, webinara, diskusija na Twitteru pod određenom oznakom, marketinških kampanja, natjecanja. Da, kako god! Ovdje ima puno prostora za kreativnost!

Logično je ako je gumb hashtag instaliran na stranicama koje se odnose na ovaj hashtag. Na primjer, recimo da ste napisali članak o novom koji radite za obožavatelje na Twitteru. Da biste sudjelovali u nagradnom natječaju, morate koristiti određeni hashtag. Pomoću sličnog gumba olakšat ćete život osobi, jer će klikom na nju otvoriti tweet sa željenim hashtagom. Može samo dodati malo teksta i poslati tweet slobodno plutajući. I on je dobro, a ti ćeš imati novog člana. Zar nije super? Jednom riječju, željezo treba kovati ne napuštajući kasu, odnosno dok je čitatelj pod emocijom pročitanog. Dvije minute kasnije bit će rastrojen i možda će zaboraviti što je upravo pročitao.

Dok mi je mašta na volju, podijelit ću s vama još jednu ideju. Recimo samo da ste domaćin događaja (online ili offline). Da biste ga promovirali, stvorite poseban članak ili stranicu posvećenu ovoj temi. Upravo tamo, u tekstu, umetnete gumb "Hashtag" i pored njega umetnete zaseban widget koji će u stvarnom vremenu prikazati sve tweetove koji koriste ovaj hashtag. Nakon što pogledate raspravu drugih korisnika, možda će vaš ne baš aktivan čitatelj sazrijeti kako bi u njoj sudjelovao. Ovdje je cilj skrenuti pozornost čitatelja na ono što se događa, uključiti ga u raspravu i, naravno, zadržati na stranici.

Kako instalirati?

Gumb "Hashtag" je postavljen sve s iste stranice o kojoj sam pisao gore.

Gumb za spominjanje

Na kraju ću vam reći još jednu dobru tipku, koju, nažalost, nitko ne koristi. Ali uzalud! Ovo se može reći da je običan tweet poslan na unaprijed određeni profil. Mislim da je tipka malo korištena jer mnogi ne znaju kako je i gdje postaviti. Evo par primjera koji mi padaju na pamet. Ako znate da je vaša ciljana publika na Twitteru i da aktivno koristi ovu društvenu mrežu. mreže, zašto ne potaknete ljude da vas tweetaju izravno s stranice? To bi mogao biti tweet autoru članka, tweet sa stranice O ili Kontakt, tweet izravno Twitter podršci, itd. Pogledajte koliko prilika propuštate da oživite svoj Twitter račun?

Ako je osoba došla na vašu stranicu, onda već ima neki interes za vas, pa ga morate odmah potaknuti na akciju. Za minut bi moglo biti prekasno! Jao, došla su takva vremena da vrlo brzo nešto zaboravimo napraviti, jer svake minute prebacujemo pažnju s jednog na drugi. I što je vaša publika mlađa, to se ovaj fenomen više manifestira, stoga ne zaboravite na postojanje ovog gumba i pokušajte ga koristiti gdje je to prikladno.

Kako instalirati?

Gumb instaliramo sve s iste stranice. Ako ste pročitali upute za prethodne gumbe, tada bi vam sve opcije za gumb "Spomeni" na Twitteru trebale biti jasne.

U nastavku pogledajte kako funkcionira takav gumb. Ne zaboravite mi tvitati što mislite o ovom članku 🙂 Važno mi je znati što moji čitatelji misle, pa bih volio čuti od vas.

Spomenuti primjer gumba

Widgeti Twitter

Shvatili smo Twitter gumbe. Sada bih vam želio ukratko reći o službenim widgetima koje Twitter ima. Skripte za sve widgete, ovo možete dobiti veza.

Widgeti su sljedećih vrsta:

• Redovni widget s najnovijim tweetovima;
• Widget za pretraživanje, koji prikazuje rezultate pretraživanja za dani ključ u stvarnom vremenu. Ova vrsta widgeta vrlo je prikladna za pretraživanje, na primjer, po vašem brendiranom hashtagu. Pogledajte primjer njegove upotrebe u odjeljku Hashtag Button za Twitter;
• Favoriti Widget- Prikazuje tweetove koje ste dodali u svoje favorite. Ova vrsta widgeta može se koristiti, na primjer, za prikazivanje pozitivnih povratnih informacija o tvrtki. Zašto ne?
• Widget za zbirke Zbirke su nešto između favorita i popisa. Možete ručno odabrati koji će tweetovi biti uključeni u zbirku. Napominjem da svaka zbirka ima svoju poveznicu i opis. Ova se značajka vrlo malo koristi na Twitteru, iako je vrlo zanimljiva.
• Widget s popisima prikazuje popise profila koje ste kreirali. I ovdje možete biti kreativni i učiniti nešto zanimljivo i korisno za čitatelja, što će vam, ujedno, koristiti. Što kažete na popis partnera, račune vaše tvrtke (ako ih ima mnogo), portfelj Twitter računa kojima upravljate (za agencije i slobodnjake) ili, na primjer, popis članova vašeg kluba? Opet, ovdje nema granica kreativnosti.

Primjer običnog Twitter widgeta

U kontaktu s

Društvena mreža Vkontakte, kao i druge, ima čitav niz različitih gumba i widgeta. Potpuni popis njih može se vidjeti na web stranici programera: https://vk.com/dev/sites

Opet ću proći samo najvažnije, inače ovaj članak neće biti članak, već cijela knjiga... Mislim da će biti puno lakše razumjeti VK widgete, budući da web stranica i sva potrebna dokumentacija dostupni su i na ruskom jeziku.

Gumb za sviđanje

Kako instalirati?

Prvo morate otići na stranicu widgeta. Dao sam vezu na popis widgeta na samom početku odjeljka Vkontakte.

Kako instalirati?

Da biste umetnuli widget "Zajednica" na stranicu, prije svega morate unijeti vezu na svoju stranicu ili grupu u Vkontakte. Zatim birate želite li da widget prikazuje lica članova grupe ili obožavatelja stranice, kao i najnovije vijesti sa stranice ili želite jednostavan dodatak s gumbom Like. Budući da je VK widget vrlo sličan Facebooku, preporuke u vezi vrste dodatka ostaju iste. Neću se ponavljati, pa ako ste zainteresirani, pogledajte odjeljak dodataka za Facebook.

Slijede parametri koji se odnose na veličinu dodatka i njegov izgled. Sve ovisi o paleti boja vaše stranice i dostupnom prostoru za dodatak. U principu, možete odabrati bilo koju boju, ali se ipak preporuča zadržati izvornu paletu boja, jer su takve boje poznatije korisnicima i ne plaše ih. I konačno, došli smo do posljednje točke - umetnemo kod u stranicu. Kao što se već sjećate, prvi dio koda ulazi u oznaku stranicu, a drugi dio na mjesto gdje će stajati dodatak.

Nedavno sam napravio blog stranicu "O SMM-u" u Vkontakteu. Stoga, ako želite primati najnovija ažuriranja na ovoj društvenoj mreži. mreže, onda se pridružite!

Primjer dodatka "Zajednica" Vkontakte

Pratite widget autora

Poput Facebook dodatka sličnog naziva, ovaj se widget preporučuje svima koji žele razviti svoj osobni brend. Ako ste, na primjer, autor knjiga ili bloga, novinar, odvjetnik, agent za nekretnine itd., zašto onda ne instalirate takav gumb na svoju web stranicu? Potencijalnim kupcima lakše je uspostaviti kontakt sa stvarnom osobom nego, primjerice, sa stranicom ili grupom za koju nije jasno tko stoji iza toga. Ovako smo raspoređeni, osoba je društveno biće, a volimo osobni kontakt, pa će takav widget dobro doći svakom profesionalcu, bez obzira u kojem području se bavite.

Kako instalirati?

Instalacija je jednostavna! Idite na stranicu widgeta u VK i unesite adresu svog profila. Zatim odaberite gumb koji želite instalirati. Još jednom ponavljam da je poželjno instalirati samo gumbe kroz skriptu (na primjer, gumb ili svjetlosni gumb). Ako vam je potrebna samo poveznica, onda je bolje to učiniti putem HTML koda, kako ne biste preopteretili stranicu skriptama, bez kojih možete vrlo lako. Učinak će biti isti, a stranica će se brže učitavati.

Ostali widgeti Vkontaktea

Dečki, gore sam naveo najčešće i najučinkovitije VK widgete, ali popis nije ograničen na ovo. Vkontakte ima čitav niz različitih widgeta koji mogu biti korisni u određenoj situaciji. Na primjer, widget za anketu koju gotovo nitko ne koristi. Ako ste stvorili anketu na svojoj VK stranici, zašto je ne biste umetnuli u povezani članak? Čitatelji vaše stranice moći će glasati za svoju verziju izravno na vašoj stranici, a informacije o tome također će ići na VK. Nije loše, zar ne?

Tu je i zanimljiva Widget "Preporuke", koji donosi najzanimljivije članke na vašem blogu ili web stranici. Stupanj interesa za određeni sadržaj određuje se brojem klikova na gumb "Sviđa mi se". Jednom riječju, Vkontakte će automatski izbrojati koliko je korisnika kliknulo na gumbe "Sviđa mi se" i prikupit će sve najzanimljivije članke u ovom bloku. Ako je vaša ciljana publika široko zastupljena u društvenim. Vkontakte mreže, onda biste trebali pokušati instalirati ova dva widgeta: "Sviđa mi se" i "Preporuke". Sigurna sam da vas rezultati neće natjerati da čekate!

LinkedIn

Sada razgovarajmo o - LinkedInu. Ova mreža kod nas samo raste u popularnosti, tako da malo ljudi razumije kako se njome mogu postići pozitivni rezultati. U Americi, odakle dolazi ova mreža, malo je profesionalaca ili tvrtki koje nemaju LinkedIn profil. Tamo će te iskosa pogledati ako barem nisi registriran na društvenoj. mreže. U Europi je korištenje društvenih mreže su vrlo različite ovisno o zemlji. Na primjer, Velika Britanija i Švedska prednjače u uključivanju LinkedIna u marketinške strategije tvrtki. Ne samo da potiču zaposlenike da imaju online profile, već i zapošljavaju ljude putem LinkedIna, oglašavaju tvrtke i proizvode, traže potencijalne kupce i partnere itd.

Ali danas ne govorimo o tome. Govorit ćemo o društvenim dodacima koje je LinkedIn razvio za nas te gdje i kako se mogu koristiti. Nemojte žuriti reći da vam ova mreža nije zanimljiva! A ako radite u području savjetovanja, b2b, onda jednostavno morate pročitati ovaj odjeljak.

Dakle, LinkedIn, kao i sve društvene mreže. mreže, postoji posebna stranica na kojoj možete vidjeti sve postojeće gumbe i dodatke: https://developer.linkedin.com/plugins

Stranica za programere, nažalost, postoji samo na engleskom jeziku, pa ću pokušati što detaljnije objasniti instalaciju svakog dodatka i gumba.

Kako instalirati?

Kako instalirati?

Gumb "Pretplati se" instaliran je s iste stranice programera, vezu na koju sam dao na početku odjeljka. U lijevom stupcu kliknite na " prati društvo” i LinkedIn će vam pokazati relevantni odjeljak. Prvo odaberite kakvu tipku želite instalirati: s okomitim ili vodoravnim brojačem ili možda s najčešćim i kliknite na Uzmi ga. Zatim morate unijeti naziv tvrtke za koju postavljate gumb. U odgovarajući okvir počnite pisati ime, slovo po slovo, i ono bi se trebalo pojaviti na popisu. Ponekad je potrebno puno vremena za učitavanje popisa, stoga uzmite si vremena. Ime mora biti napisano točno onako kako je napisano na stranici tvrtke. Zatim odaberite jezik gumba - ruski, vrstu gumba i kliknite na gumb " da dobijem kod". Sada samo zalijepite kod na pravo mjesto na stranici i gotovi ste! Usput, na ruskom će se gumb zvati "Track", što mi se baš i ne sviđa. Osobno bih ostavio englesku verziju. Srećom, svi već znaju što znači riječ “pratiti” 🙂

Još nisam napravio stranicu tvrtke na LinkedInu, tako da još nema pravog primjera. Ako u budućnosti napravim stranicu, svakako ću je ubaciti kao primjer u članak.

Gumb za osobni profil

Ovo je još jedan dobar, ali opet malo korišten dodatak. Ovaj gumb prikazuje osobnu fotografiju profila, naslov i prijatelje korisnika koji vidi ovaj dodatak. Naravno, da bi LinkedIn mogao pokazati profesionalne veze čitatelju vaše stranice, on - čitatelj - mora biti prijavljen (ako mogu tako reći) na LinkedIn. Ukratko, korisnik mora biti prijavljen na LinkedIn da bi dodatak funkcionirao u potpunosti.

Kome ovaj dodatak može biti koristan? Mislim da će ljudima koji rade u b2b sektoru to biti najkorisnije. Iako ga možete koristiti bilo gdje: na stranici o autorima stranice, na stranici o zaposlenicima tvrtke, na stranicama o vašim klijentima i partnerima (naravno uz njihovu dozvolu) - postoji mnogo opcija. Glavna stvar je da se takvi profilni gumbi organski uklapaju u vašu web stranicu i strategiju tvrtke. Ako vaši zaposlenici imaju napola popunjene profile, idu na LinkedIn jednom godišnje i imaju 10 veza, onda nema smisla izlagati takve profile. Ako se vaša tvrtka, naprotiv, aktivno bavi promocijom na društvenim mrežama. mreže, onda vam takav dodatak može donijeti puno prednosti.

gumb +1

Kako instalirati?

Kako instalirati?

Svi Pinterest gumbi i widgeti instalirani su s gornje veze. Da biste postavili gumb "Prikvači", morate odabrati odgovarajući gumb u lijevom stupcu.

Gumbi na Pinterestu malo je teže postaviti jer imaju mnogo različitih opcija, no još uvijek ih je sasvim moguće postaviti sami.

1) U prvom retku " Tip tipke» možete odabrati tip gumba koji želite instalirati na web-mjesto: određenu sliku, bilo koju sliku sa stranice ili gumb Pin it koji će se pojaviti na slikama stranice/članka.

2) Drugi red - " Izgled“, tj. izgled gumba. Ovdje Pinterest nudi mnogo opcija za odabir: velike ili male; pravokutni ili okrugli; crvena, siva ili bijela; tekst na engleskom ili japanskom.

3) Treći red je brojač. Ovdje možete odabrati brojač odozgo, sa strane ili ga potpuno ukloniti.

Ovisno o vrsti gumba koji odaberete, njegove opcije će se promijeniti.

• Dugme " jedna slika' implicira da želite odrediti određenu sliku koju čitatelj web-mjesta može prikvačiti za određenu vezu. Odnosno, čitatelj neće imati izbora, čak i ako na vašoj stranici postoje druge slike. Ako odlučite postaviti sliku za gumb, tada se takav gumb mora postaviti zasebno za svaku stranicu, jer zahtijeva poveznicu na stranicu/članak. U prvi stupac trebate umetnuti poveznicu na stranicu koju će korisnici dijeliti, odnosno poveznicu koju će zakačiti. Zatim navedite vezu do slike. To, inače, može biti bilo koji izvor, čak i izvan vaše stranice. U zadnjem stupcu možete odrediti tekst za sliku koju će korisnik dijeliti. To može biti, na primjer, naslov stranice ili naslov članka. Prije slanja pina, korisnik će po želji moći zamijeniti vaš tekst svojim.
• Dugme " Bilo koja slika' ili bilo koju sliku. Ovaj gumb je vrlo jednostavan i ne zahtijeva nikakve dodatne parametre. Vi samo trebate odabrati veličinu i vrstu gumba, a također odlučiti trebate li brojač ili ne.
• Dugme " lebdjeti slikom“, tj. gumb koji će se pojaviti na samoj slici kada preko nje zadržite pokazivač miša. Možete isprobati kako to radi na Pinterest uzorku slike.

Sada nekoliko riječi o kodu koje trebate postaviti na stranici. Pinterest, kao i druge društvene mreže mreže, ima dva koda: prvi dio je umetnut u oznaku , a drugi dio na mjesto gdje je instaliran sam gumb. Ako imate više Pinterest gumba na istoj stranici, tada trebate samo jednom postaviti prvi kod.

Primjer dijela koda koji se postavlja samo jednom po oznaci stranice:.

Gumb za pretplatu

Pinterest, kao i Google+, ne pravi razliku između osobnih računa i računa tvrtke, pa se gumb "Prati" za oba stvara na istom mjestu. Ovaj gumb je jednostavan za instaliranje. Sve što trebate učiniti je unijeti link na svoj profil i imenovati gumb.

Kao što sam gore napisao, ne mogu ugraditi Pinterest gumbe zbog sukoba skripti, pa ako se želite sprijateljiti sa mnom na Pinterestu, samo slijedite ovu poveznicu.

Bonus: hiperveze

U nastavku ću dati primjere kako se takve veze izrađuju ručno. Također možete isprobati poseban generator poveznica - Share Link Generator. Na ovoj stranici možete kreirati poveznice za Facebook, Twitter, Google+, Pinterest i LinkedIn. Bit će lako razumjeti stranicu, pa neću objašnjavati što i kako. Međutim, pogledajte moj savjet, jer generator poveznica ne daje potpunu vezu za HTML format + kod o tome kako otvoriti vezu u novom prozoru. Sve to plus primjeri poveznica za društvene mreže. Mreže Vkontakte, naći ćete u ovom odjeljku.

http://www.facebook.com/share.php?u= tvoj link «> tekst hiperveze

Vjerojatno nema više stranica na internetu koje nisu bile hostirane gumbi za objavljivanje materijala na društvenim mrežama. Potonji su dugo i čvrsto zauzeli mjesto u našim životima. Tamo komuniciramo, upoznajemo se, promoviramo poslovanje, čitamo vijesti i tako dalje. Cijeli niz. Nije iznenađenje da webmasteri žele proširiti prisutnost svojih web stranica na društvenim medijima na bilo koji način. Uostalom, postoji tona potencijalnog prometa koji apsolutno svima treba. Tok posjetitelja je novac, ugled, rast. Sve je izgrađeno oko njega. Slatki komad.

Gumbi za društvene mreže su, očito, bitni. Drugo pitanje - koje odabrati? Testirali smo za vas TOP 5 različitih usluga za dodavanje koda gumba stranicama. Cilj je identificirati optimalni i detaljno ga prikazati. Počnimo s kvalifikacijskim krugom.

Odabir najbolje usluge društvenih gumba

Izbor podnositelja zahtjeva za usporedbu pokazao se banalnim - uzeli smo najpopularnijih usluga , koje je čula svaka osoba koja je nekako upoznata s temom izrade web stranica. Ne rijetki, sve popularniji, samo iskusni starci.

Sastav certificiranog tima je sljedeći:

Kao rezultat testiranja odabranih socijalnih usluga - uSocial je lider . Sada želite dobiti obrazloženje za naš izbor. Naravno, nećemo ostati neutemeljeni.

Značajke uSocial Buttons

Donesimo neke činjenice , što nas je uvjerilo u ispravnost donesene odluke.

Verbalna usporedba mnogima neće biti dovoljna. Stoga smo sastavili usporedna tablica gumbi s uSociala i drugih debitanata (koristi se ocjenjivačka ljestvica od 1 do 5). Svi ovi podaci dobivaju se tijekom procesa testiranja.

Nadamo se da je analiza uspjela otkloniti vaše sumnje u valjanost našeg izbora. Osim dobrog izgleda, društveni gumbi iz uSociala su duboko primijenjene prirode, te su prilično moćan alat za promicanje bilo kakvih projekata.

Upute o tome kako instalirati gumbe društvenih mreža na web mjestu

Da biste postavili gumbe društvenih mreža s uSociala na svoju stranicu, trebate slijediti nekoliko jednostavnih koraka:

Korak 1

Korak 2

Sastavljanje skupa društvenih gumba. Može birati prikazano usluge društvenih mreža, gumbi oblika i stila.

Ovdje također možete aktivirati gumb "Gore", omogućiti podršku za mobilne uređaje, povezati Viber, WhatsApp, Telegram, SMS usluge.

Nakon dovršetka svih operacija, uđite adresa svoju stranicu i kliknite na gumb "Da dobijem kod".

Korak-3

Kopirati kodskripta u prozoru koji se pojavi. Morate umetnuti kod na onim stranicama svog resursa na kojima vam je potrebna ploča društvenih gumba. Na primjer, u podnožju prije završne oznake.

Korak-4

Nakon što instalirate društvenu traku sa svog osobnog računa uSocial, možete pogledati statistika lajkova i repostova za odabrano razdoblje, kako za sve društvene mreže odjednom, tako i za odabrane. Podaci se prikazuju u obliku jasnih grafikona ili grafikona.

Na osobnom računu uSocial sve stvoreno skupova I statistika za mjesta na koja su bili pričvršćeni. U bilo kojem trenutku možete se prebacivati ​​između web-mjesta i analizirati podatke primljene od mjerača.

Kako povećati učinkovitost socijalne trake?

Ako se prilikom repostiranja materijala prikaže pogrešna slika i opis, možete ručno naznačiti što, koliko i kako treba prikazati pomoću posebnih meta tagova koji su razumljivi svim društvenim mrežama. Ako se to ne učini, na društvenim mrežama mogu se prikazati nasumične slike i opisi. Vjerojatno vam ne treba.

Ako su društveni meta tagovi ispravno popunjeni, objave će biti ispravno percipirane od strane društvenih službi, jer označavaju vrstu materijala, relevantan naslov i poveznicu na željenu sliku. Sve to povećava učinkovitost ponovnog objavljivanja: vaš materijal je ispravno indeksiran od strane društvenih službi.

Primjeri kod za označavanje za popularne društvene mreže (kod mora biti napisan prije oznake):

1. Facebook I U kontaktu s koristite Open Graph protokol:

3. Za Cvrkut kod izgleda ovako:

4. Za Google+ Tako:

- poveznica na autorov Google+ profil
- Naziv stranice
- tekst isječka (do 40 znakova)
- opis stranice
- put do slikovne datoteke

Instrumenti za rad s mikropodacima.

Pozdrav dragi prijatelji. Današnji će članak biti posvećen stvaranju bloka društvenih gumba bez usluga i dodataka. A ovaj blok će također uključivati ​​gumbe koji posjetiteljima stranice omogućuju ispis stranice, slanje poveznice na članak e-poštom i označavanje vašeg članka. Danas se takvi gumbi mogu naći na gotovo svim stranicama. Tek sada se implementiraju pomoću usluga ili dodataka. A ja ću vam pokazati kako to učiniti sami.

Usluge koje sam koristio na stranicama klijenata i na svom blogu - i . Ove usluge prilično olakšavaju provedbu zadatka.

Koja je prednost vaših vlastitih društvenih gumba u odnosu na usluge i dodatke

1. Naravno, neosporan faktor je brzina učitavanja stranice. Tako npr. usluga PLUSO koju koristim na blogu u najboljem slučaju dodaje 633 milisekundi na opterećenje.

A u ovom bloku koriste se samo potrebne slike društvenih gumba, kombinirane u . Svi stilovi su svedeni na minimum. Plus jednostavan html okvir.

1. Način na koji predlažem ne sadrži nikakve vanjske veze. Ne, postoje poveznice, ali sve će biti kao interne veze. Ako želite, uvijek ih možete imati. A onda ih uopće nećete vidjeti.

1. Vrlo jednostavna instalacija. Dovoljno je umetnuti html kod bloka u izvorni kod stranice stranice, učitati sprite, dodati css stilove i instalacija je gotova. Samo trebate ispraviti put do slikovne datoteke gumba.
2. Ova stavka nije ni plus ni minus u smjeru vlastitog bloka društvenih gumba. Trik je u tome što njegov vlastiti blok nema brojač klikova na gumb. I to se može računati kao minus. No, s druge strane, moguće je staviti svaki gumb i točno ćete znati koliko su puta vaši posjetitelji kliknuli na gumbe i podijelili vaše članke na društvenim mrežama.
3. Statistike koje prikupljaju usluge na vašoj web stranici više se neće prenositi trećim stranama.

Umetanje bloka društvenih gumba u izvorni kod

Razmotrit ćemo klasičnu verziju, kada se gumbi nalaze nakon članka.

To možete učiniti otvaranjem datoteke odgovorne za prikaz članaka (single.php) i dodavanjem bloka društvenih gumba izvornom kodu. Alternativno, to se može učiniti putem funkcijske datoteke teme (functions.php).

Ja ću pokazati obje opcije, a vi odaberite onu koja vam odgovara.

Umetanje bloka u single.php izvorni kod

Upozorenje: Prije početka svih koraka, napravite sigurnosnu kopiju single.php datoteke!

Otvaranje administrativne ploče WordPress "Izgled" — "Urednik" — "Jedan unos (single.php)".

U izvornom kodu potražite mjesto gdje završava izlaz članka i počinju komentari ili paginacija. Na ovo mjesto morat ćete umetnuti html kod bloka društvenih gumba.

Pažljivo pogledajte snimku zaslona, ​​usredotočite se na kodove odgovorne za izlaz člankai komentari. I zalijepite kod u nastavku.

Naravno, bit će neke razlike u vašim predlošcima, ali siguran sam da ćete to shvatiti, u tome nema ništa komplicirano. A osim toga, imate sigurnosnu kopiju, nemate se čega bojati.

A evo i html koda bloka društvenih gumba:

Objašnjenja koda: to je jedan div s klasom .share koji sadrži poveznice na društvene mreže. Veza se otvara u zasebnom skočnom prozoru, za to je zaslužna ova funkcija onClick=window.open. Zamjena veze na članak vrši se ovim kodom. Svaka poveznica ima svoju klasu kroz koju se dodjeljuje slika gumba.

Time je dovršeno umetanje kroz izvorni kod. Zatim morate dodati css stilove.

Umetanje bloka u single.php izvorni kod putem funkcija teme

Upozorenje: prije nego što počnete, napravite sigurnosnu kopiju datoteke functions.php!

Da biste koristili ovu opciju, morate otvoriti datoteku functions.php i dodati ovaj kod na samom kraju:

/* Umetni gumbe društvenih mreža */ add_action("comments_template","soc_button"); funkcija soc_button() (?> I budite oprezni nakon lijepljenja koda ne smijete imati razmake ili druge znakove. Ili samo zatvaranje php koda?>. U suprotnom, stranica će prestati raditi.

Objašnjenja koda: mjesto gdje će se postaviti gumbi društvenih medija određuje API ključ comments_template. Ovaj ključ određuje mjesto prije komentara. Sam kôd društvenih gumba je zatvoren u stražnjim oznakama za otvaranje i zatvaranje php-a. U kodu sam ih označio crvenom bojom. ovo je cijeli trik umetanja html koda u php, kroz funkcije teme.

Na ovoj i ovoj metodi je kraj, prijeđimo na učitavanje slika na stranicu.

Učitavanje slika gumba na poslužitelj

Na primjer, pripremio sam nekoliko spriteova sa slikama društvenih gumba. Možete ih preuzeti.

Sprite koji koristim kao primjer je samo 3,97 kb i sadrži samo potrebne gumbe. A budući da je ovo sprite, postoji samo jedan zahtjev za bazu podataka, a ne za svaki gumb posebno.

Preuzmite slike ili pripremite svoje i prenesite ih na svoju stranicu. Mislim da ovo ne bi trebao biti problem. Nadalje, veza na ovaj sprite bit će potrebna za dizajniranje gumba kroz css stilove.

Uključujući CSS stilove

Naravno, ovaj korak se može napraviti vrlo prvi, ali ja radije prvo obavim sav složeni tehnički posao, a zatim prijeđem na lijepe sitnice s css stilovima.

Dakle, otvorite datoteku style.css odgovornu za dizajn vaše stranice. I zalijepite ove stilove:

Podijelite ( display: inline-block; vertical-align: inherit; margin: 5px 0 0 2px; padding: 0px; font-size: 0px; širina: 40px; visina: 40px; background: url("http://test ..png ") no-repeat scroll 0px 0px transparent;) .share a.vkontakte ( background: url("http://test..png") no-repeat scroll -168px 0px transparent; ) .share a.google ( background: url("http://test..png ") no-repeat scroll -252px 0px transparent; ) .share a.livejournal ( background: url("http://test..png") no-repeat scroll -336px 0px transparentno; ) .share a.twitter ( background: url("http://test..png") no-repeat scroll -42px 0px transparent; ) .share a.mail ( background: url("http ://test..png ") pomicanje bez ponavljanja -294px 0px transparentno; ) .dijeli a.odnoklassniki (pozadina: url("http://test..png") pomicanje bez ponavljanja -126px 0px transparentno; ) .share a.pinterest ( background: url("http://test..png") no-repeat scroll -210px 0px transparent; ) .share a.liveinternet ( background: url("http://test..png" ") pomicanje bez ponavljanja -378px 0px prozirno; ) .share a.evernote ( background: url("http://test..png") no-repeat scroll -420px 0px transparent; ) .share a.bookmark ( background: url("http://test.. png ") pomicanje bez ponavljanja -462px 0px transparentno; ) .dijeli a.e-poštu (pozadinu: url("http://test..png") pomicanje bez ponavljanja -504px 0px transparentno; ) .dijeli a.print ( background: url("http://test..png") pomicanje bez ponavljanja -546px 0px transparentno; ) .dijeli a.digg (pozadinu: url("http://test..png") pomicanje bez ponavljanja -588px 0px transparentno; ) .share a.spring (pozadina: url("http://test..png") pomicanje bez ponavljanja -630px 0px transparentno; )

Objašnjenja koda: klasa .share definira opći izgled bloka, veličinu svakog gumba, padding i postavlja jednoličnu pozadinu. I tada svaka poveznica ima svoju klasu i svakoj takvoj poveznici, kroz svojstvo pozadine, dodjeljuje se izgled gumba. Gumbi su prikazani kao css sprite, a svaki gumb je širok 40 px i visok 40 px, s 2 piksela između njih, što vam omogućuje da točno definirate sliku za svaki gumb. To jest, prvi gumb je naveden kao 0, a drugi kao 42 i tako dalje. U kodu su ove vrijednosti označene narančastom bojom. Veza na sprite također je označena narančastom bojom, promijenite je u put do vašeg spritea.

Time je dovršen cijeli proces stvaranja vašeg bloka društvenih gumba. Možete sigurno nastaviti s provjerom.

A imam i video tutorial u kojem je vizualno prikazan cijeli proces, stup pokazuje rad samih tipki. Gledajte i implementirajte na svojim web stranicama i blogovima.

Sad je to sve. On se nosio sa zadatkom. Želim vam svima puno sreće i vidimo se u novim člancima i video tutorialima.

Sada postoji nekoliko načina za dodavanje gumba društvenih mreža na web-mjesto, postoji izbor i to je drago. Društveni gumbi igraju važnu ulogu na stranici, uz njihovu pomoć, kao što mnogi već znaju, možete brzo ponovno objaviti bilo koji unos na nekoj od odabranih društvenih mreža. Društveni gumbi za stranicu sada se postavljaju bilo gdje i bilo gdje, ali ponekad na pogrešnom mjestu.

Društveni gumbi za stranicu

Mnogi već znaju koliko su društvene mreže sada razvijene i kako je super ako vaša stranica ima takve gumbe pomoću kojih možete dodati svoju omiljenu objavu ili dio objave na svoj zid. Ovom akcijom ne samo da komentirate ili ponovno postavljate poruke, već i dajete dodatni signal tražilicama.

San svakog vlasnika stranice, ako čitatelji ponovno objave sve njegove postove na svojim stranicama na jednoj od društvenih mreža. Sada najviše od svega postoji potražnja za Vkontakte, Facebook, Twitter i Odnoklassniki. Dodao bih i LiveJournal, liveinternet i Blogger. Poželjno je dodati ove gumbe na stranicu radi potpune pogodnosti korisnika.

Posebno Twitter danas zaslužuje sve više pažnje, uz njegovu pomoć vaše se nove publikacije brže pojavljuju u indeksu tražilica.

Ako ste vlasnik stranice, najvjerojatnije biste trebali imati liveinternet ili LiveJournal račun. Kako ne bi svaki put dodavali nove unose ovim uslugama, prisutnost njihovih gumba štedi vrijeme. Osim toga, mnogi ljudi koriste ove usluge i možda će također željeti ponovno objaviti vaš unos u svoj dnevnik.

Postoji nekoliko najboljih načina za brzo dodavanje društvenih gumba na web-mjesto. To možete učiniti uz pomoć online servisa koji će vam u tome brzo i jednostavno pomoći. Ili izravno putem svake društvene mreže zasebno. Ovdje svatko ima svoj izbor. Nekad sam gumbe dodavao zasebno preko svake društvene mreže, sada sam ih instalirao pomoću usluge.

Postoji takva usluga, zove se podijeliti42. O njemu je napisano dosta materijala, koliko je dobar i kako ga koristiti. Dobro, ali prosječnom korisniku koji ništa ne razumije u to, teško će se nositi s tim.

Za tako malo zanimanje, kopiranje mapa na hosting pa kupanje sa stilovima, sada više ne vozi. Postoje i druge opcije u kojima morate kopirati i zalijepiti gotov kod bez ikakvih dodatnih mapa. Zato zaboravite na ovu uslugu.

Dodajte samo najosnovnije gumbe društvenih medija koje većina koristi, nemojte oblikovati desetke nepotrebnih zaboravljenih gumba.

Što danas možete upotrijebiti za dodavanje gumba društvenih mreža na web-lokaciju:

1. Vrhunska usluga.
2. Yandex društveni gumbi.
3. Ručno dodavanje svake društvene mreže zasebno.
4. Plus usluga.
5. Korištenje dodataka za WordPress (za lijene).

Vjerojatno se ne trebate miješati nigdje drugdje, ne možete pronaći bolje načine. Svaka od ovih opcija je dobra na svoj način. Ako znate pogodniji ili atraktivniji način, napišite u komentarima.

Gumbi društvenih mreža moraju biti umetnuti na kraju svakog članka kako bi nakon čitanja posjetitelj stranice mogao po želji ponovno objaviti vaš unos. Ne bi ih trebao tražiti negdje na kraju stranice. Najoptimalnija mjesta, po mom mišljenju, gdje treba postaviti takve tipke su u bočnoj traci i odmah na kraju svakog unosa.

Uptolike

Trenutno koristim ovu uslugu, svidjela mi se. Osim praktičnosti, uptolike usluga ima nekoliko privilegija u odnosu na druge takve vrste.

• Veliki izbor među gumbima društvenih medija;
• Tipke prilagođene mobilnim uređajima;
• Mogućnost citiranja bilo kojeg dijela teksta na društvenoj mreži;
• Možete dodati gumb na vrh;
• Mogućnost dodavanja skočnog prozora za pretplatu na grupu Vkontakte;
• Odabir veličine ikona;
• Odabir stila ikona za stranicu;
• Dodajte efekt lebdenja;
• Promjena pozadine gumba, boje teksta, pozadine brojača;
• Povećajte ili smanjite tekst u brojaču.

Za korištenje su dovoljne privilegije u odnosu na druge takve usluge. U ovom slučaju dodaje se samo mali kod u obliku skripte i nekoliko redaka sa stilovima. Istodobno, nema nikakve vanjske veze, provjerio sam je putem usluge odlaznih veza. Ako griješim, možete me ispraviti.

Osim toga, što drugo može učiniti uptolike servis.

Najvažnije postavke Odaberite gumbe društvenih mreža za web-mjesto koje želite vidjeti. Ako je potrebno, možete otvoriti popis i odabrati još nekoliko od većine. Označite okvir za podršku. Nakon toga, na mobilnim telefonima, gumbi društvenih mreža uvijek će biti prikazani pri dnu ekrana.

Odaberite vodoravni položaj gumba, veličinu i stil. Ukrasite kako želite i dodajte efekt lebdenja. Ništa više ne treba učiniti. Za generiranje brojača koda, morate navesti adresu web-mjesta i poštanski sandučić. Odmah nakon toga pojavit će se kod za umetanje društvenih gumba na stranicu.

Ako imate WordPress stranicu, otvorite single.php datoteku i zalijepite gotov kod odmah nakon završetka sadržaja stranice. Osvježite stranicu i pogledajte što će se dogoditi. Nema ništa teško.

Yandex

Odaberite željene ikone usluge. Twitter je samo u obliku ikona, bez brojača. Odabiremo izgled blokova i ispod će biti gotov kod za umetanje. Kao što je ranije spomenuto, Yandex ne dodaje ništa drugo, sve je skromno i ukusno.

Metoda ručnog dodavanja

U ovoj metodi trebate otvoriti svaku društvenu mrežu zasebno i zasebno konfigurirati svaki gumb za repost. Da biste dodali Facebook gumb, morate ići ovdje. Za kolege iz razreda i moj svijet, morate dodati podatke. Za twitter, sve se događa na . Da biste dodali gumb Vkontakte, idite na ova stranica .

Imat ćete gotov kod samo s društvenih mreža, bez ikakvih dodatnih skripti. Vjerojatno najbolji način za dodavanje gumba društvenih medija na web stranicu. Poteškoća nastaje u činjenici da trebate izrezati svaki gumb posebno, zatim sve zalijepiti na jedno mjesto i koristiti css stilove da ga poravnate u jednom stupcu. Ako nemate problema s ovim, možete pokušati.

U kontaktu s

Da biste dodali gumb Vkontakte, kliknite Poveži web-mjesta i widgete, ispod će biti potpuni popis svih mogućih dodataka. Također postoji mogućnost dodavanja komentara na stranicu, pisanja na zidu, dodavanja svoje grupe, preporuka, anketa, pretplate na autora i objavljivanja linkova. U našem slučaju odaberite Objavi veze.

Nema ništa komplicirano, odabiremo stil gumba (sa ili bez brojača), napišemo tekst na gumb, opciju logotipa i na dnu će biti gotov kod za ugradnju. I sam sam koristio ovu ručnu metodu dodavanja, ali trenutno pokušavam uslugu treće strane. Da vidimo što će se dogoditi. Ako mi ne odgovara, odmah se vraćam na ručnu metodu.

pluso

Drugi način dodavanja gumba na stranicu je sa Pluso usluga. Usluga također nije loša, mnogi su primijetili gumbe s nje. Izbor opcija dizajna je velik, osim amaterskih, postoje i velike veličine slika. Mogućnost dodavanja mreža ni na koji način nije inferiorna u usporedbi s drugim sličnim uslugama. Instalacija ne zahtijeva nikakve datoteke, samo kod.

Odaberite bilo koji stil dizajna i dodajte potrebne usluge. Malo niže će biti prikazan gotov primjer kako će sve to izgledati na stranici. Ikone se mogu postaviti na velike, srednje ili male. Također kvadratne ikone za web mjesto ili okrugle, u jednom retku ili u dva retka, vodoravno ili okomito. Sa ili bez brojača, bez pozadine ili postavite pozadinu tako da odgovara dizajnu vaše web stranice.

Nakon svih ovih koraka, ispod će biti gotov kod za umetanje na stranicu. Ako trebate umetnuti na glavnu stranicu, čačkamo po datoteci index.php, ako u svim vašim postovima, dodajemo kod u single.php datoteku odmah nakon završetka posta.

WordPress

Ako ništa ne razumijete u ovom kodu, što treba kopirati gdje i kako sve funkcionira, postoji izlaz. Ako imate WordPress motor, možete instalirati dodatak koji će vam dati gumbe društvenih medija. Danas postoji samo veliki broj takvih dodataka. Idite na administratorsku ploču - Dodaci. Možete odmah napisati u potrazi za dodacima "gumbi za društvene mreže", "društvene mreže" ili "VKontakte". Siguran sam da ćeš pronaći nešto.

Među većinom takvih sličnih dodataka za WordPress, gledajući ocjenu, ovi su najviše postavljeni:

1. Gumbi za dijeljenje na društvenim mrežama za WordPress.
2. društvenim.
3. Social Media Feather - lagani gumbi za dijeljenje i praćenje na društvenim mrežama.

Zapravo, takvih dodataka ima puno, morate instalirati i riješiti koji vam se najviše sviđa, radi ispravno, što prikazuje i kako ga možete prilagoditi sebi. Pogledajmo primjer prvog takvog dodatka Social Share Buttons za WordPress.

Sam dodatak je na ruskom jeziku, s tim neće biti problema. Nakon instalacije, novi gumb "Share Buttons" pojavit će se u izborniku s lijeve strane. U glavnim postavkama stavljamo logo stranice i ispisujemo tekst ispred društvenih gumba.

Obavezno uključite generiranje meta podataka, bit će uključeni naslov i opis stranice. Poravnajte gumbe vodoravno i odaberite gdje će biti. Biramo samo u objavama. Po želji možete isključiti potrebne stranice. Na samom dnu morate navesti nadimak u tritteru.

Na sljedećoj kartici, Postavke dijeljenja, odaberite stil gumba. U nastavku možete omogućiti ili onemogućiti nepotrebne društvene mreže i dodati uvlake za cijeli blok iznad ili ispod. Ne morate nigdje stavljati nikakav dodatni kod, dodatak će učiniti sve umjesto vas.

Vaš je izbor koju ćete metodu koristiti. Dodajte ikone društvenih medija putem uptolike, Pluso ili putem Yandexa. Ne biste trebali odmah instalirati dodatak na WordPress, pokušajte sve napraviti ručno ili uz pomoć servisa.

Ako znate neku drugu dobru uslugu ili način za dodavanje društvenih gumba za stranicu, bit ću zahvalan na komentaru.