Zdravo, dragi čitatelji blog stranica. Kao što ste već vjerojatno pogodili iz naslova, govorit ćemo o tzv. društvenim gumbima koji mogu vrlo ozbiljno pomoći privlačenju članaka na vašu web stranicu, uz uspješan splet okolnosti i visoke kvalitete sam članak, velik broj posjetitelja s društvenih mreža i servisa.

Društveni signali također se uzimaju u obzir tražilice prilikom rangiranja vaše stranice. Velika količina dijeljenja na kvalitetne račune na Twitteru, Google+, Facebooku (moguće je da su VKontakte i druge mreže također uzete u obzir) može vam omogućiti da se popnete na određeni broj više stepenice i, možda, ući na Vrh i tamo ostati ako čimbenici ponašanja neće vas iznevjeriti.

Općenito, usluge koje pružaju skripte (gumbe) za dijeljenje sadržaja u društveni mediji ima ih puno na internetu, ali ne treba svima vjerovati (lako vas mogu iskoristiti ili na neki drugi način iz loših razloga). I oni su sposobni jednostavno "objesiti stranicu" ako njihov kod nije dobro postavljen i računalne mogućnosti njihovih poslužitelja nisu jako moćne. Iako postoje pristojne opcije koje nemaju ove nedostatke, a ja sam ih naveo na kraju ove publikacije.

Također je moguće na gumbima prikazati broj dijeljenja na pojedinu društvenu mrežu. Štoviše, u obzir se uzimaju sve objave, a ne samo one napravljene pomoću ovog bloka (podaci se učitavaju putem API-ja). Istina, nisu podržane sve društvene mreže (samo facebook, Google+, Moi Mir, Odnoklassniki.ru, VKontakte), ali većina glavnih. Tužno je što je Twitter nedavno uklonjen s ove liste jer... prestao je pružati ove podatke putem API-ja.

Na primjer, ovdje možete skratiti naslove za dijeljenje na Twitteru, jer postoji ograničenje njihove duljine (u nastavku pročitajte kako to učiniti), konfigurirati želite li ili ne prikazati brojače dijeljenja, postaviti upute za otvaranje izbornika pomoću dodatne tipke društvene mreže i još mnogo toga. Općenito, kopajte i pogledajte.

Općenito, u usporedbi s izvornim gumbima za dijeljenje, koji nude instaliranje društvenih mreža na web mjesto (o tome pročitajte u nastavku), Yandex blok pobjeđuje u brzini učitavanja, kompaktnosti i jednostavnosti instalacije i konfiguracije. Na primjer, u prošlosti se moj službeni Twitter gumb često nije učitavao zbog problema s njihovim poslužiteljem, tako da se skripta napravljena u Javi nije učitavala dugo vremena lijevi izbornik moj blog. Moguće je da je ovaj problem sada riješen, ali će mnoge skripte uvijek biti gore od jedne u smislu optimizacije brzine učitavanja web stranice.

Mislim da Yandex vjerojatno neće imati problema s dostupnošću, jer je to dobra zarada komercijalna organizacija, prilično osjetljiv na njezin imidž. Osim toga, ako imate, možete pratiti statistiku klikova na ove gumbe, što može biti korisno.

Osim bloka s ikonama normalne veličine, možete napraviti blok s brojačima, a Yandex predlaže i dodavanje padajućeg izbornika s dodatnim društvenim mrežama, koji će biti skriven ispod spojlera koji se nalazi nakon prikaza potrebnog broja gumba za glavne društvene mreže (kao što su VKontakte, MoiMir, ):

Ako želite dodati brojače gumbima u ovom bloku (s padajućim izbornikom), jednostavno umetnite još jedan atribut u njegov kod na web mjestu (između Div oznaka): data-counter="“ i to je to. Kao što sam rekao, ne može biti jednostavnije Možete koristiti brojače koji će također biti dodani malim gumbima, o kojima se govori u nastavku:

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

Također možete zamijeniti sve ikone njihovim manjim sličicama gumba, što je meni osobno bilo korisno prilikom umetanja bloka u gornji dio svi članci na ovom blogu:

U prvom dijelu uvodna i završna oznaka SCRIPT sadrži put do skripte koja će se učitati s Yandex poslužitelja, a drugi dio sadrži sam kod za umetanje koji je potrebno postaviti na mjesto u vašem predlošku gdje ovaj blok će biti prikazan.

Kako umetnuti društvene gumbe iz Yandexa na web mjesto

Stoga umećem kod za pozivanje skripte zajedno s blokom Div na mjesto gdje trebaju biti prikazani gumbi društvenih medija. Pa, kako njegovo učitavanje ne bi utjecalo na brzinu učitavanja glavne stranice, ja sam, slijedeći savjete dane u Yandex dokumentaciji, dodao async="async" atribut, čime sam ga pokrenuo asinkrono učitavanje skripta:

Problem može nastati u pronalaženju među mnogim datotekama motora vaše stranice one koja je odgovorna za formiranje samog donjeg dijela HTML kôd sa završnom oznakom /BODY ili onom koja tvori glavu. Također pronađite mjesto u datotekama teme u koje trebate umetnuti dio koda Div oznake(za postavljanje samih gumba).

U principu, iu WordPressu iu Joomli, to se radi u jednoj od datoteka korištene teme. Jer Ovaj blog radi na WordPressu, pa ću govoriti u njegovo ime.

Ako radite s WordPressom, tada ćete za umetanje koda za pozivanje skripte morati otvoriti datoteku footer.php za uređivanje (naći ćete završnu oznaku Body ili header.php (naći ćete je tamo) Oznake za glavu) iz mape:

/wp-content/themes/naziv mape_s_korištenom_temom/footer.php

Sada preostaje samo umetnuti drugi dio koda na pravo mjesto u predlošku vaše web stranice ili izravno u članak društvene tipke Yandex, koji je odgovoran za lokaciju bloka s gumbima na stranicama web mjesta:

Usput, još jednom ću rezervirati: ako želite ukloniti bilo koji gumb iz ovog bloka, ne morate ponovno ići na konstruktor na web mjestu Yandex. Možete jednostavno ukloniti njegov unos s ovog popisa (zajedno sa zarezom iza njega, na primjer, “vkontakte”). Pa razumiješ...

Pa, također možete promijeniti položaj gumba unutar bloka pomoću CSS-a.

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

Jer Koristim adaptive under mobilni uređaji layout, tada sam za uređaje s niskom rezolucijom zaslona dodao sličan redak, gdje sam postavio nešto manje uvlake, ali ovo su detalji:

Li.ya-share2__item (padding:0 3px 0 3px!važno;)

Općenito, ovako nešto je slučaj kada je u pitanju moj WordPress blog. U Joomli, za umetanje ovog bloka, vjerojatno će biti najlakše koristiti modul Custom Html Code, postavljajući ga na poziciju predloška negdje odmah ispod teksta članka.

Službeni gumbi društvenih medija

Mnoge društvene mreže same pružaju svima mogućnost preuzimanja koda gumba, a često čak možete prilagoditi njegov izgled i funkcionalnost. Na primjer, možete konfigurirati i primiti kod skripte za dijeljenje posta u .

Kao što vidite, postoji dosta postavki, a osim izgleda gumba VKontakte, također možete prilagoditi prikaz brojača koji prikazuje broj dijeljenja.

Moći ćete dobiti Facebook gumb. Vrlo je fleksibilno prilagođen vašim potrebama i neka vas engleski natpisi na njemu ne zbune, jer kada postavite njegov kod na svoju web stranicu, natpisi će automatski biti prevedeni na ruski.

Bolje je ne umetati ništa u URL polje, tada će stranica na kojoj se nalazi ovaj kod biti podijeljena.

Izgledat će otprilike ovako:

Izgledat će otprilike ovako:

I, naravno, ne mogu ne spomenuti službeni Twitter gumb, koji se pojavio relativno nedavno. Njegov konstruktor se nalazi. Naravno, pruža mogućnost brojanja broja retweetova i imat ćete priliku postaviti njegov izgled:

Zatim sam dobiveni kod malo modernizirao prema gore opisanom principu, kako bi moji dugi naslovi bili odrezani i ne bi stvarali dodatne probleme korisnicima prilikom dijeljenja.

Ostale opcije za dobivanje gumba društvenih medija za vašu web stranicu

Kao što sam već rekao, postoji mnogo svih vrsta online usluga na kojima možete besplatno preuzeti skriptu za gumbe društvenih mreža i staviti je na svoju web stranicu. Svi imaju različite ciljeve: „od srca“ (kao u slučaju usluge Dimoxa), prikupljanje podataka potrebnih za rad drugih usluga (kao u slučaju ApTuLike) ili zarade (virusi i druge nezakonite prijevare s promet koji imate na svojoj web stranici). Postoje i jednostavno plaćena rješenja, na primjer, poput dolje navedenog dodatka.

Teško je reći što odabrati iz ove raznolikosti. Reći ću nekoliko riječi o onome što sam imao priliku i sam isprobati, a o čemu sam već pisao.

Općenito, pogledajte, usporedite i odaberite sami.

Sretno vam bilo! Vidimo se uskoro na stranicama bloga

Više videa možete pogledati ako odete na ");">

Moglo bi vas zanimati

Izrađujemo gumbe za dodavanje na društvene mreže i oznake za WordPress blog (bez dodataka i skripti) Likely - samostalne društvene gumbe za web mjesto
Gumbi za mobilne stranice tvrtke Uptolike + mogućnost dijeljenja poveznica u glasnicima UpToLike - alat za izradu društvenih tipki za vašu stranicu s proširenom funkcionalnošću

Prednosti:

Pluso X Eksperimentalna verzija konstruktora društvenih gumba Share Pluso. Poboljšan je dizajn ikona, skočni prozor s punim popisom dostupnih društvenih mreža, a promijenjen je i dosadni narančasti gumb sa znakom “+”; na njegovom mjestu je sada isti znak plus, ali in ugodniji dizajn.
Prema programerima, novi društveni gumbi dizajnirani su za Retina monitore. Sve ostalo, na prvi pogled, ostaje isto. Nažalost, među dostupnim opcijama u dizajneru nisam pronašao gumbe s brojačem, iako ih standardno izdanje Plusa ima.
Ne znam hoće li stari zamijeniti novim konstruktorom, ali trenutno oba rade istovremeno koristeći različite veze.

Add ThisAdd Ovo je usluga koja pruža visokokvalitetne, elegantne i fleksibilne društvene gumbe. Ovaj resurs je vodeći na Zapadu. Ovdje je manje popularan, ali često nailazim na stranice na ruskom jeziku s widgetom Dodaj ovo.
Postoje plaćeni i besplatni widgeti. Na besplatnom računu dostupne su samo najjednostavnije opcije. Plaćena verzija ima mnogo više dostupnih dizajnerskih koncepata, kao što su: prilagodljivi gumbi, gumbi s raznim brojačima i još mnogo toga.
Ova opcija, mislim, nije prikladna za naše ljude, jer ćete morati platiti za zvona i zviždaljke, ali na domaćem tržištu možete pronaći sve iste stvari, ali besplatno.
Konstruktor Add This ima ogroman popis dostupnih društvenih mreža, uključujući Vkontakte, Moi Mir i Odnoklassniki.

Postoji dodatak za .
Dobro dijeljenje Lagani i lijepi gumbi za dijeljenje za vašu web stranicu s malim kodom za ugradnju, što je vrlo privlačno. Nažalost, postoji samo jedna opcija dizajna s više shema boja. U Runetu postoje sve popularne društvene mreže
Prema programerima, njihova zamisao je optimizirana i tražilice će voljeti vašu stranicu. Ne znam koliko tu ima istine.

Ako vam ne trebaju ništa, ova opcija je za vas.
Shareaholic Vrlo zanimljiv zapadnjački servis za kreiranje društvenih gumba, koji sam otkrio nedavno.

Shareaholic nudi nekoliko novih koncepata gumba za dijeljenje. Osobno mi se svidjela strelica iznad tipki (strelice su vrlo jak marketinški alat), ali, nažalost, natpis je na engleskom pa nije primjeren našim ljudima. Među dostupnim društvenim mrežama je VKontakte.

Pozdrav, dragi prijatelji. Današnji članak bit će posvećen stvaranju bloka društvenih gumba bez usluga i dodataka. Ovaj blok će također sadržavati gumbe koji posjetiteljima web-mjesta omogućuju ispis stranice, slanje veze članka e-poštom i označavanje vašeg članka. Takvi se gumbi danas mogu pronaći na gotovo svakoj web stranici. Tek sada se implementiraju pomoću usluga ili dodataka. A ja ću ti pokazati kako to učiniti sam.

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

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

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

Metoda koju predlažem ne sadrži nikakve vanjske poveznice. Ne, postoje poveznice, ali sve će biti kao interne veze. Uvijek ih možete koristiti ako želite. I tada uopće neće biti vidljivi.

Vrlo jednostavna montaža. Dovoljno je umetnuti html kod bloka u izvorni kod stranice stranice, uploadati sprite, dodati css stilove i instalacija je gotova. Samo trebate ispraviti put do datoteke sa slikama gumba.

Ova točka nije ni plus ni minus u smjeru vašeg bloka društvenih gumba. Trik je u tome što vlastiti blok nema brojač pritiska gumba. I ovo se može smatrati minusom. No, s druge strane, moguće je staviti na 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.

Statistika prikupljena uslugama na vašoj stranici više se neće prenositi trećim stranama.

Umetanje bloka društvenih gumba u izvorni kod

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

To se može učiniti otvaranjem datoteke odgovorne za ispisivanje članaka (single.php) i dodavanjem bloka društvenih gumba u izvorni kod. Alternativno, to se može učiniti kroz funkcijsku datoteku teme (functions.php).

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

Umetanje bloka u izvorni kod single.php

Upozorenje: Prije pokretanja bilo kakvih radnji, napravite sigurnosnu kopiju datoteke single.php!

Otvorite WordPress administrativnu ploču – “Izgled” – “Uređivač” – “Jedan unos (single.php)”.

U izvornom kodu potražite mjesto gdje završava izlaz članka i počinju komentari ili navigacija stranicom. Upravo na ovom mjestu morat ćete umetnuti html kod za blok društvenih gumba.

Pažljivo pogledajte snimku zaslona, ​​usredotočite se na kodove odgovorne za prikaz članka i komentara. I zalijepite kod ispod.

Naravno, bit će nekih razlika 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 ovdje je html kod bloka društvenih gumba:

","sharer","toolbar=0,status=0,width=700,height=400");" href="javascript: void(0)" class="facebook">&subject=","sharer","toolbar=0,status=0,width=700,height=400");" href="javascript: void(0)" class="livejournal">","sharer","toolbar=0,status=0,width=700,height=400");" href="javascript: void(0)" class="twitter ">","sharer","toolbar=0,status=0,width=700,height=400");" href="javascript: void(0)" class="odnoklassniki">&target=blog","sharer","toolbar=0,status=0,width=930,height=500");" href="javascript: void(0)" class="evernote">","sharer","toolbar=0,status=0,width=812,height=585");" href="javascript: void(0)" class="digg">. Svaki link ima svoju klasu, kroz koju se dodjeljuje slika gumba.

Ovo dovršava umetanje kroz izvorni kod. A onda trebate povezati css stilove.

Umetanje bloka u izvorni kod single.php putem funkcija teme

Upozorenje: prije početka rada napravite sigurnosnu kopiju datoteke functions.php!

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

/* Umetanje društvenih gumba */ add_action("comments_template","soc_button"); funkcija soc_button() ( ?> ","sharer","toolbar=0,status=0,width=700,height=400");" href="javascript: void(0)" class="facebook">&subject=","sharer","toolbar=0,status=0,width=700,height=400");" href="javascript: void(0)" class="livejournal">","sharer","toolbar=0,status=0,width=700,height=400");" href="javascript: void(0)" class="twitter">","sharer","toolbar=0,status=0,width=700,height=400");" href="javascript: void(0)" class="odnoklassniki">&target=blog","sharer","toolbar=0,status=0,width=930,height=500");" href="javascript: void(0)" class="evernote">","sharer","toolbar=0,status=0,width=812,height=585");" href="javascript: void(0)" class="digg">. U suprotnom stranica će prestati raditi.

Objašnjenja koda: mjesto na kojem će se prikazivati ​​gumbi društvenih mreža određuje se putem API ključa comments_template. Ovaj ključ određuje mjesto ispred komentara. Sam kod društvenog gumba nalazi se u php početnim i završnim povratnim oznakama. U šifri sam ih označio crvenom bojom. Ovo je cijeli trik umetanja html koda u php, kroz funkcije teme.

Ovo dovršava metodu; prijeđimo na učitavanje slika na web mjesto.

Prijenos 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 ima samo 3,97 kb i sadrži samo potrebne gumbe. A budući da je ovo sprite, onda postoji samo jedan zahtjev prema bazi podataka, a ne za svaki gumb zasebno.

Preuzmite slike ili pripremite vlastite i prenesite ih na svoje web mjesto. Mislim da s tim ne bi trebalo biti problema. Zatim će biti potrebna poveznica na ovaj sprite za dizajn gumba pomoću css stilova.

Povezivanje CSS stilova

Ovaj korak se, naravno, može prvo dovršiti, ali ja radije prvo obavim sav složeni tehnički posao, a tek onda započnem lijepe sitnice sa CSS stilovima.

Dakle, otvorite datoteku style.css, koja je odgovorna za dizajn vaše stranice. I umetnite ove stilove:

Podijeli ( 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 ") pomicanje bez ponavljanja 0px 0px prozirno;) .share a.vkontakte ( pozadina: url("http://test..png ") pomicanje bez ponavljanja -168px 0px prozirno; ) .share a.google ( pozadina: url("http://test..png ") pomicanje bez ponavljanja -252px 0px prozirno; ) .share a.livejournal ( pozadina: url("http://test..png ") bez ponavljanja 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 ") pomicanje bez ponavljanja -294px 0px prozirno; ) .share a.odnoklassniki ( pozadina: url("http://test..png ") pomicanje bez ponavljanja -126px 0px prozirno; ) .share a.pinterest ( background: url("http://test..png ") pomicanje bez ponavljanja -210px 0px transparent; ) .share a.liveinternet ( background: url("http://test..png" ") pomicanje bez ponavljanja -378px 0px transparentno; ) .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 prozirno; ) .share a.email ( pozadina: url("http://test..png ") pomicanje bez ponavljanja -504px 0px prozirno; ) .share a.print ( pozadina: url("http://test..png ") pomicanje bez ponavljanja -546px 0px transparentno ) .share a.digg ( pozadina: url("http://test..png ") pomicanje bez ponavljanja - 588px 0px transparent; ) .share a.spring ( background: url("http://test..png ") pomicanje bez ponavljanja -630px 0px transparent; )

Objašnjenja koda: klasa.share definira opći izgled bloka, veličinu svakog gumba, uvlake i postavlja jednu pozadinu. I onda svaka veza ima svoju klasu i svakoj takvoj vezi se dodjeljuje tip gumba kroz svojstvo pozadine. Gumbi su napravljeni kao CSS sprite, a svaki gumb ima širinu i visinu od 40px, te marginu od 2px između njih, što vam omogućuje da točno odredite sliku za svaki gumb. To jest, prvi gumb je označen 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;

Ovo dovršava cijeli proces stvaranja vlastitog bloka društvenih gumba. Možete sigurno nastaviti s provjerom.

Imam i video tutorial u kojem je cijeli proces jasno prikazan, a prikazan je i rad samih tipki. Pogledajte i implementirajte na svoje web stranice i blogove.

To je sad to. Svladao sam zadatak. Želim vam svima puno sreće i vidimo se u novim člancima i video tutorijalima.

Ovdje je izraz "Tko želi kupiti softver s 8% popusta na promociju?" napisao sam korisnik, a u nastavku je kako link na stranicu izgleda na društvenoj mreži. Nije baš lijepo, zar ne?

tada će poveznica na društvenoj mreži izgledati ovako:

Ovdje je "Danas je rođendan allsoft.ru - 8 godina :)" tekst koji je napisao korisnik, ostalo su informacije iz meta oznaka. Više o ovim meta tagovima možete pročitati na Facebook stranicidevelopers.facebook.com/docs/share, druge društvene mreže ih također prilično dobro razumiju.

Kako ovaj mehanizam općenito funkcionira:
1. Kada korisnik klikne gumb, widget šalje poveznicu na stranicu na poslužitelj društvene mreže.
2. Društveni poslužitelj Mreža sama pristupa ovoj poveznici i čita podatke o stranici – naslov, opis, sliku.
3. Društveni poslužitelj mreža sprema informacije o stranici na svoju stranu i prikazuje ih na stranicama društvenih mreža

Kako poslati različite opise za jednu stranicu.
Na primjer, prilikom izrade promotivne stranice na allsoft.ru sa komičnim testom bilo je potrebno poslati različite opise društvenim mrežama za različit broj bodova koje je korisnik postigao u testu. Budući da društvena mreža dobiva opis stranice klikom na link, potrebni su različiti linkovi za različite opise. Dodatno, Twitter dopušta samo 140 znakova, pa mu je potreban zaseban, kraći opis.

New Ya.share(( element: "ya_share_normal", elementStyle: ( "type": "none", "quickServices": ["facebook","twitter","odnoklassniki","vkontakte","moimir"] ), link: "http://allsoft.ru/promo/allsoft8let/?share=normal", serviceSpecific: ( twitter: ( title: "Rezultat testa: Zmaj vam je gotovo jača strana! Još ne možete predavati Dragonologiju, ali na pravom putu!" ) ) ));
1. Ovdje je ya_share_normal ID elementa na stranici (), u kojem će se pojaviti blok s društvenim gumbima, veza je veza, plus u serviceSpecific za Twitter navodimo naslov, koji se razlikuje od onoga što je u og: naslovna meta oznaka.

Dakle, za zadatak "3 različita rezultata testa plus zajednička veza na stranicu izvan testa" imat ćemo 4 oznake:

i 4 bloka JavaScript koda kao gore.

Kako promijeniti naslov i opis koji je predmemorirala društvena mreža.
1. Postoji najbolji način za Facebook: idite na njihov debugger