Codul butonului social. Butoanele rețelelor sociale

Dacă vă este teamă că sunteți urmărit pe internet, opriți computerul.

Fiecare webmaster, mai devreme sau mai târziu, se gândește să instaleze butoane sociale pe site-ul său. La urma urmei, acum unii oameni nu-și pot imagina viața fără rețelele de socializare, de ce să-i privezi de capacitatea lor de a-ți distribui articolele? Dar, în timp, multe servicii de butoane sociale își pierd mințile și fac ce vor cu codurile lor, îndescând tot ce nu este necesar. Din această idee paranoică veți găsi în acest articol coduri pentru cele mai curate butoane de partajare a rețelelor sociale pentru site-ul dvs.

Nu este un secret pentru nimeni că aproape toate serviciile de butoane sociale scurg informații despre utilizatorii tăi oriunde este nevoie. Oh, Doamne! Nu se poate! Tocmai am aflat despre asta! - Felicitări! Ei trebuie să te folosească cumva, pentru munca și eforturile lor. Au făcut servicii bune, cu funcționalitate, comoditate și „calitate” deosebite. Tot ce trebuie să faceți este să alegeți ceea ce aveți nevoie și să puneți codul acolo unde aveți nevoie. Asta e tot. Care este avantajul pentru ei să facă astfel de manevre pe internet degeaba? Dreapta. Nu. Deci, din când în când, fiecare astfel de birou este prins în descărcarea datelor într-un DMP.

Nu voi descrie fiecare dintre aceste servicii, toate au o funcționalitate bună și unele caracteristici unice, dar nu vreau să le prezint separat. Am alcătuit mai jos o listă scurtă.

Lista celor mai populare servicii de butoane sociale pentru site

share.pluso.ru
uptolike.ru
tech.yandex.ru/share
share42.com
sharethis.com
pip.qip.ru
www.addtoany.com
www.po.st
www.addthis.com
sharebuttons.com

Dacă nu ai suficient timp sau ești prea leneș să faci mai mult de câteva mișcări ale mâinilor și falangelor degetelor, atunci poți folosi aceste servicii în siguranță. Sunt grozave atât pentru site-uri web, cât și pentru vizitatori. Dar nimeni nu garantează securitatea 100% a datelor utilizatorilor, funcționarea 100% a DNS-ului lor și încărcarea site-urilor dvs. Acestea. Dacă există o defecțiune pe serverele butoanelor sociale, atunci site-urile dvs. se vor încărca mai lent decât de obicei. Da, asta se întâmplă rar, dar se întâmplă. Desigur, puteți instala încărcarea asincronă a acestor scripturi și puteți optimiza munca lor, dar acest lucru este mai mult decât câțiva pași despre care am scris pentru leneși.

Desigur, există coduri de social media pe Internet care sunt plasate în interiorul site-ului dvs. și nu scurg informații nicăieri, dar multe dintre ele conțin link-uri externe către aceleași rețele sociale. Webmasterilor nu le plac link-urile externe și, prin urmare, pentru cei mai paranoici webmasteri, am adunat coduri gata făcute pe baza scriptului goodshare.ru, pentru care chiar le mulțumesc.

Un exemplu de instalare a acestui cod nu este pentru cei care nu cunosc elementele de bază ale HTML sau CSS, dar dacă aveți mâinile și puțin timp, veți reuși dacă urmați cu strictețe instrucțiunile. Și așa am mers:

Arata asa:

Șase rețele sociale sunt configurate conform standardului: Facebook, VKontakte, Odnoklassniki, Moi Mir, Google Plus, Twitter. Există mai mult de 30 dintre ele în setările scriptului, dar toate acestea pot fi instalate separat dacă se dorește. Avantajele acestor butoane, după cum au afirmat autorii, cu care sunt complet de acord:

Afișaj excelent pe orice dispozitiv (Da, se adaptează la orice dimensiune a ecranului)

Cod curat - site rapid și sigur (se încarcă doar scriptul, CSS și Font, care sunt doar pe serverul dvs.)

Toate partajează tehnologiile de mesagerie mobile într-un singur script (toate tipurile de telegrame)

SEO prietenos - fără linkuri

Nu contine poze

Ce face scriptul în sine și de ce a fost necesar acest script în general? Scriptul pentru aceste butoane conține toate API-urile tuturor rețelelor sociale, iar scriptul face din orice loc de pe site un bloc activ de partajare.

De exemplu, îl puteți plasa pe blocuri DIV goale, sau Span, sau imagini, sau link-uri goale și aproape orice element al site-ului poate fi transformat în aceste butoane. În exemplul meu, am folosit un script pentru Div-uri goale.

Referitor la poze: nu sunt aici. Pictogramele pe care le vedeți sunt preluate din font, sunt doar un simbol și nimic mai mult.

Puteți descărca arhiva butoanelor de la .

Instalarea acestor butoane este foarte ușoară. Există doar patru fișiere în arhivă: Font, CSS, JS și TXT.

1). Trebuie să încărcați fontul în orice folder de pe serverul dvs., îl puteți pune în același loc cu JS sau CSS.

2). Apoi, încărcați JS-ul pe serverul dvs. și afișați-l pe site-ul dvs. folosind cod oriunde, dar vă recomand chiar în partea de jos a paginii:

Acest script constă din două părți, prima este Jquery, a doua este codul butonului în sine. Dacă aveți deja activat Jquery pe site-ul dvs., atunci puteți elimina prima parte a codului și, prin urmare, puteți reduce dimensiunea fișierului.

IMPORTANT: (pentru cei care au eliminat o parte din codul Jquery) scriptul butonului trebuie să fie încărcat după scriptul Jquery.

3). După instalarea JS și a fontului, ar trebui să adăugați CSS pe site-ul dvs. Pur și simplu copiați întregul conținut al fișierului soc.css într-unul dintre pluginurile dvs. CSS de pe site.

IMPORTANT: în rândul 82 al fișierului soc.css, schimbați adresa URL în locația fontului dvs.!

4). După toate acestea, copiați codul HTML din fișierul HTML.TXT pe site-ul dvs. unde doriți să vedeți aceste butoane minunate.

Structura scriptului are capacitatea de a instala contoare de partajare a rețelelor sociale, dar puteți citi mai multe în detaliu în documentația lor de pe site.

Și puteți verifica funcționarea scriptului chiar sub aceste rânduri, pentru că este cel instalat pe blogul meu.

Vă mulțumim pentru atenție, dacă aveți întrebări despre instalare, scrieți comentarii.

Am fost cu tine, leneșul Staurus.

Bună, dragi prieteni. Articolul de astăzi va fi dedicat creării unui bloc de butoane sociale fără servicii și pluginuri. Acest bloc va include, de asemenea, butoane care le permit vizitatorilor site-ului să imprime pagina, să trimită linkul articolului prin e-mail și să marcheze articolul dvs. Astfel de butoane pot fi găsite astăzi pe aproape fiecare site web. Abia acum sunt implementate folosind servicii sau plugin-uri. Și îți voi arăta cum să o faci singur.

Servicii pe care le-am folosit pe site-urile clienților și pe blogul meu - și . Aceste servicii facilitează implementarea sarcinii.

Care este avantajul butoanelor proprii de socializare față de servicii și pluginuri?

Desigur, un factor incontestabil este viteza de încărcare a site-ului. Deci, de exemplu, serviciul PLUSO, pe care îl folosesc pe blog, în cel mai bun caz adaugă 633 de milisecunde la încărcare.

Și în acest bloc sunt folosite doar imaginile necesare ale butoanelor sociale, combinate în . Toate stilurile sunt reduse la minimum. Plus un cadru html simplu.

Metoda pe care o propun nu conține niciun link extern. Nu, există link-uri, dar toate vor fi ca link-uri interne. Le puteți folosi oricând dacă doriți. Și atunci nu vor fi vizibile deloc.

Instalare foarte usoara. Este suficient să introduceți codul html al blocului în codul sursă al paginii site-ului, să încărcați sprite-ul, să adăugați stiluri css și instalarea este completă. Trebuie doar să corectați calea către fișier cu imaginile butoanelor.

Acest punct nu este nici un plus, nici un minus în direcția propriului bloc de butoane sociale. Trucul este că propriul bloc nu are un contor de apăsare a butoanelor. Și acest lucru poate fi considerat un minus. Dar, pe de altă parte, este posibil să pui pe fiecare buton și vei ști exact de câte ori vizitatorii tăi au dat clic pe butoane și au distribuit articolele tale pe rețelele de socializare.

Statisticile colectate de serviciile de pe site-ul dvs. nu vor mai fi transferate către terți.

Inserarea unui bloc de butoane sociale în codul sursă

Vom lua în considerare opțiunea clasică, atunci când butoanele sunt amplasate după articol.

Acest lucru se poate face fie prin deschiderea fișierului responsabil pentru ieșirea articolelor (single.php) și prin adăugarea unui bloc de butoane sociale la codul sursă. Alternativ, acest lucru se poate face prin fișierul de funcție al temei (functions.php).

Voi arăta ambele opțiuni, iar tu o alegi pe cea care ți se potrivește.

Inserarea unui bloc în codul sursă single.php

Atenție: înainte de a începe orice acțiune, faceți o copie de rezervă a fișierului single.php!

Deschide panoul administrativ WordPress – „Aspect” – „Editor” – „Intrare unică (single.php)”.

În codul sursă, căutați locul unde se termină ieșirea articolului și începe comentariile sau navigarea în pagină. În acest loc va trebui să introduceți codul html pentru blocul de butoane sociale.

Privește cu atenție captura de ecran, concentrează-te pe codurile responsabile pentru afișarea articolului și a comentariilor. Și lipiți codul de mai jos.

Desigur, vor exista unele diferențe între șabloanele dvs., dar sunt sigur că vă veți da seama, nu este nimic complicat. Și în plus, aveți o copie de rezervă, nu aveți de ce să vă temeți.

Și iată codul html al blocului de butoane sociale:

","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 ">. Fiecare link are propria sa clasă, prin care se atribuie imaginea butonului.

Aceasta completează inserarea prin codul sursă. Și apoi trebuie să conectați stilurile CSS.

Inserarea unui bloc în codul sursă single.php prin intermediul funcțiilor temei

Atenție: înainte de a începe lucrul, faceți o copie de rezervă a fișierului functions.php!

Pentru a utiliza această opțiune, trebuie să deschideți fișierul functions.php și să adăugați acest cod la sfârșit:

/* Inserarea butoanelor sociale */ add_action("comments_template","soc_button"); function 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">. În caz contrar, site-ul nu va mai funcționa.

Explicații privind codul: locul unde vor fi afișate butoanele rețelelor sociale este determinat prin cheia API comments_template. Această cheie determină locul înainte de comentarii. Codul butonului social în sine este inclus în etichetele de returnare de deschidere și închidere php. În cod le-am marcat cu roșu. Acesta este tot trucul de a introduce cod html în php, prin funcțiile temei.

Aceasta completează metoda, să trecem la încărcarea imaginilor pe site.

Încărcarea imaginilor butoanelor pe server

De exemplu, am pregătit mai multe sprite-uri cu imagini de butoane sociale. Le puteți descărca.

Sprite-ul pe care îl folosesc ca exemplu are doar 3,97 kb și conține doar butoanele necesare. Și deoarece acesta este un sprite, atunci există o singură solicitare către baza de date și nu pentru fiecare buton separat.

Descărcați imagini sau pregătiți-vă propriile și încărcați-le pe site-ul dvs. web. Cred că nu ar trebui să fie probleme cu asta. În continuare, va fi nevoie de un link către acest sprite pentru a proiecta butoanele folosind stiluri CSS.

Conectarea stilurilor CSS

Acest pas poate fi, desigur, finalizat mai întâi, dar prefer să fac mai întâi toate lucrările tehnice complexe și abia apoi să încep lucrurile mici drăguțe cu stiluri css.

Deci, deschideți fișierul style.css, care este responsabil pentru designul site-ului dvs. Și introduceți aceste stiluri:

Distribuiți un ( afișare: inline-block; vertical-align: inherit; margine: 5px 0 0 2px; padding: 0px; font-size: 0px; lățime: 40px; înălțime: 40px; fundal: url("http://test ..png ") derulare fără repetare 0px 0px transparent;) .share a.vkontakte ( fundal: url("http://test..png ") derulare fără repetare -168px 0px transparent; ) .share a.google ( fundal: url("http://test..png ") derulare fără repetare -252px 0px transparent; ) .share a.livejournal ( fundal: url("http://test..png ") fără repetare 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 ") derulare fără repetare -294px 0px transparent; ) .share a.odnoklassniki ( fundal: url("http://test..png ") derulare fără repetare -126px 0px transparent; ) .share a.pinterest ( fundal: url("http://test..png ") derulare fără repetare -210px 0px transparent; ) .share a.liveinternet ( fundal: url ("http://test..png") ") no-repeat scroll -378px 0px transparent; ) .share a.evernote ( background: url("http://test..png ") no-repeat scroll -420px 0px transparent; ) .share a.bookmark ( background: url("http://test.. png ") derulare fără repetare -462px 0px transparent; ) .share a.email ( fundal: url("http://test..png ") derulare fără repetare -504px 0px transparent; ) .share a.print ( fundal: url("http://test..png ") derulare fără repetare -546px 0px transparent ) .share a.digg ( fundal: url ("http://test..png ") derulare fără repetare - 588px 0px transparent ) .share a.spring ( fundal: url("http://test..png ") derulare fără repetare -630px 0px transparent;

Explicații despre cod: clasa.share definește aspectul general al blocului, dimensiunea fiecărui buton, indentează și stabilește un singur fundal. Și apoi fiecare link are propria sa clasă și fiecărui astfel de link i se atribuie tipul de buton prin proprietatea de fundal. Butoanele sunt realizate ca un sprite CSS, iar fiecare buton are o lățime și înălțime de 40px și o marjă de 2px între ele, ceea ce vă permite să determinați cu precizie imaginea pentru fiecare buton. Adică, primul buton este indicat ca 0, iar al doilea ca 42 și așa mai departe. În cod, aceste valori sunt indicate în portocaliu. Linkul către sprite este, de asemenea, evidențiat în portocaliu, îl schimbați în calea către sprite.

Acest lucru completează întregul proces de creare a propriului bloc de butoane sociale. Puteți trece în siguranță la verificare.

Am și un tutorial video în care se arată clar întregul proces, inclusiv funcționarea butoanelor în sine. Urmărește și implementează pe site-urile și blogurile tale.

Asta e acum. Am făcut față sarcinii. Vă doresc tuturor succes și ne vedem în articole noi și tutoriale video.

Aici expresia „Cine vrea să cumpere software cu o reducere de 8% la promoție?” scris de utilizator însuși, iar mai jos arată cum arată linkul către site pe rețeaua de socializare. Nu foarte frumos, nu?

atunci linkul de pe rețeaua de socializare va arăta astfel:

Aici „Astăzi este ziua de naștere allsoft.ru - 8 ani :)” este textul scris de utilizator, restul sunt informații din meta-etichete. Mai multe despre aceste meta tag-uri puteți citi pe pagina de Facebook developers.facebook.com/docs/share, și alte rețele sociale le înțeleg destul de bine.

Cum funcționează în general acest mecanism:
1. Când utilizatorul face clic pe buton, widgetul transmite un link către pagină către serverul rețelei sociale.
2. Server social Rețeaua în sine accesează acest link și citește informații despre pagină - titlu, descriere, imagine.
3. Server social rețeaua memorează în cache informațiile paginii pe partea sa și le afișează pe paginile rețelelor sociale

Cum să trimiți descrieri diferite pentru o pagină.
De exemplu, la crearea unei pagini promoționale pe allsoft.ru cu un test de benzi desenate, a fost necesar să se trimită diferite descrieri către rețeaua socială pentru numărul diferit de puncte obținute de utilizator în test. Deoarece rețeaua socială primește o descriere a unei pagini făcând clic pe un link, sunt necesare link-uri diferite pentru descrieri diferite. În plus, Twitter permite doar 140 de caractere, deci are nevoie de o descriere separată, mai scurtă.

Nou 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: ( titlu: "Rezultatul testului: Dragonul este aproape punctul tău forte! Nu poți preda Dragonologie încă, dar pe drumul cel bun!" ) ) ));
1. Aici ya_share_normal este id-ul elementului de pe pagină (), în care va apărea blocul cu butoane sociale, link este linkul, plus în serviceSpecific pentru Twitter indicăm titlul, care diferă de ceea ce este în og: eticheta meta title.

Astfel, pentru sarcina „3 rezultate diferite ale testului plus un link comun către o pagină din afara testului” vom avea 4 etichete:

și 4 blocuri de cod JavaScript ca mai sus.

Cum se schimbă titlul și descrierea stocate în cache de rețeaua socială.
1. Există cea mai bună cale pentru Facebook: mergi la depanatorul lor

atunci linkul de pe rețeaua de socializare va arăta astfel:

Astfel, pentru sarcina „3 rezultate diferite ale testului plus un link comun către o pagină din afara testului” vom avea 4 etichete:

și 4 blocuri de cod JavaScript ca mai sus.

Cum se schimbă titlul și descrierea stocate în cache de rețeaua socială.
1. Există cea mai bună cale pentru Facebook: mergi la depanatorul lor