Procedura de creare a unui buton VKontakte este simplă, dar pentru ca widgetul VK likes să funcționeze corect, trebuie îndeplinite toate cerințele. Vom urma toate instrucțiunile ulterioare pe baza faptului că aveți un cont VK și sunteți conectat la acesta.
Crearea unei aplicațiiMai întâi, accesați linkul „Dezvoltatori” (situat în partea de jos a interfeței) și selectați fila „Aplicațiile mele”. Dacă nu ați creat widget-uri VK înainte, lista de aplicații va fi goală. Trebuie să creezi ceva nou. Acest lucru se poate face făcând clic pe linkul „Creează aplicație”.
După crearea aplicației, trebuie să confirmați dreptul de a o gestiona. Acest lucru se poate face printr-un cod SMS de cinci cifre sau printr-un dispozitiv conectat la contul dvs. După finalizarea confirmării, accesați setările aplicației și activați-o. Acest lucru completează manipulările cu aplicația.
Deschideți fila „Documentare” și selectați subsecțiunea „Site-uri și widget-uri”. În blocul „Widget-uri pentru site”, selectați widgetul necesar – „Îmi place”.
În formularul care se deschide, selectați aplicația noastră, opțiunea butonului și designul acesteia. Să luăm codul de inserare din blocul de text.
Plasarea unui widget în șablonul KotontiSă deschidem șablonul header.tpl și să plasăm cod în blocul head care arată cam așa:
VK.init((apiId: 4752432, onlyWidgets: true));
Acolo unde trebuie să plasați butonul de like, de exemplu în șablonul page.tpl, adăugați codul:
VK.Widgets.Like("vk_like", (tip: "mini"));
Bună ziua, dragi cititori ai blogului! Continuăm să studiem rețelele sociale ca obiecte de promovare SMO și CMM. Acum există o serie de articole în rând în care voi încerca să dezvălui toate detaliile instalării butoanelor rețelelor sociale. Materialul anterior a fost dedicat modului de adăugare de la și Facebook (înregistrare și setări de bază și informații detaliate despre pagina mea de Facebook).
Astăzi vom vorbi despre butoanele de pe Twitter, VKontakte și alte rețele sociale importante. Mai mult, așa cum am menționat deja, în articolul despre butoanele sociale ale Google Plus și Facebook, al cărui link este dat chiar mai sus în text, butoanele pot fi instalate în două moduri. În primul rând, prin primirea codului folosind constructorul, care este disponibil pentru toate serviciile populare. În al doilea rând, creând singur butoane sociale. Ambele metode au avantajele și dezavantajele lor, așa că să le luăm în considerare pe ambele.
Primirea unui cod și instalarea unui buton de la VKontakte și de la serviciul de microblogging TwitterAcum să trecem la obținerea unui buton de distribuire de pe Twitter. Pentru a face acest lucru, trebuie să accesați și să faceți setările corespunzătoare:
După cum puteți vedea, aici este posibil să generați cod pentru patru butoane cu funcționalități diferite. Deocamdată, să luăm în considerare prima opțiune, deoarece aceasta este cea care asigură crearea unui buton „Tweet”, cu ajutorul căruia utilizatorii vor împărtăși materiale interesante de pe site-ul dvs. cu prietenii lor.
Această opțiune este potrivită pentru un blog WordPress standard dacă doriți să afișați butoane de partajare după fiecare articol publicat, adică pentru paginile de postări dinamice. Prima parte a codului rezultat va fi cam așa:
Nu uitați să setați eticheta A, care definește linkul în HTML, cu atributul rel=“nofollow” pentru a preveni scurgerea greutății paginii. Și asigurați-vă că înlocuiți valoarea atributului data-via prin introducerea numelui de utilizator Twitter, cu alte cuvinte, autentificarea pe care o utilizați pentru a vă conecta la această rețea socială.
Pentru a optimiza viteza de încărcare a paginii site-ului dvs., această primă parte trebuie să fie inserată în locul în care doriți să vedeți butonul social de pe Twitter. Dacă după fiecare publicare, deschideți șablonul SINGLE.PHP (pentru majoritatea temelor WordPress) și găsiți următoarea linie:
Lipiți prima parte după acest fragment de cod PHP, care este responsabil pentru afișarea postărilor. Vă atrag atenția asupra faptului că denumirile șabloanelor în care este prezentă această funcție pot fi diferite, dar majoritatea au componenta SINGURĂ. Deoarece butoanele rețelelor sociale sunt de obicei plasate pentru comoditate într-un singur loc pe o singură linie, mai jos voi oferi o captură de ecran a șablonului SINGLE.PHP unde am un bloc de butoane. Partea a doua (scenariu):
!function(d,s,id)(var js,fjs=d.getElementsByTagName(s),p=/^http:/.test(d.location)?"http":"https";if(!d. getElementById(id))(js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs );))(document, „script”, „twitter-wjs”);
rămâne neschimbat și este inserat pentru a accelera încărcarea paginii, de obicei înainte de eticheta de închidere BODY din șablonul FOOTER.PHP. Din nou, chiar mai jos veți vedea imaginea corespunzătoare.
Acum să încercăm să obținem un buton pentru ca utilizatorii să vă adauge materialele în rețeaua socială VKontakte (- înregistrarea VK și conectarea la Contact și configurarea unui profil). În acest scop mergem la pagina generatorului de coduriși faceți setările necesare:
Aici, după părerea mea, totul este complet clar pentru toată lumea. Setările standard ale butoanelor sunt date implicit. În funcție de preferințele dvs., puteți modifica forma butonului, puteți refuza colțurile rotunjite și, de asemenea, puteți introduce orice text care va fi afișat pe buton (în mod implicit - „Salvare”).
Se recomandă introducerea primei părți a codului rezultat (evidențiat cu roșu) între etichetele HEAD de deschidere și de închidere. Pentru cel obișnuit, ar trebui să deschideți fișierul HEADER.PHP și (puteți înainte de eticheta de închidere) să introduceți acest fragment:
Voi da din nou un exemplu pentru claritate (rețineți că scenariul poate fi plasat înaintea BODY de închidere, ca în alte cazuri, dar pentru varietate ar trebui să luăm în considerare această opțiune):
Ei bine, și plasați din nou al doilea fragment acolo unde doriți să vedeți butonul. Pentru paginile de blog WordPress dinamice, acesta este șablonul SINGUR. Repet că sunt posibile excepții, am scris despre asta în detaliu în materialul despre primirea butoanelor de pe Google+ și Facebook, linkul către această postare este chiar la începutul publicației. Apropo, așa cum am promis, începem să analizăm pașii care vă vor ajuta să înțelegeți pe deplin nu numai algoritmul de inserare a codurilor necesare, ci și configurarea butoanelor pentru a le adapta la designul site-ului dvs.
Definirea proprietăților CSS pentru un bloc de butoane (folosind exemplul Google plus, Facebook, Twitter, VKontakte)Deci, sper că înțelegeți cum și unde să lipiți codurile primite pentru butoanele rețelelor sociale. Pentru a consolida acest lucru, așa cum am promis, voi da un exemplu despre modul în care părțile codurilor pentru cele patru butoane ale celor mai populare rețele sociale sunt plasate pe blogul meu. În primul rând, părțile de script ale codurilor de buton din șablonul FOOTER (pentru VKontakte, așa cum este recomandat, dacă vă amintiți, am plasat scriptul între etichetele HEAD, acordați atenție capturii de ecran de mai sus):
Și iată zonele responsabile pentru locația reală a butoanelor sociale (SINGLE.PHP):
Am împachetat fiecare dintre butoane și am aplicat stilurile CSS adecvate pentru a le face să arate frumos și să se potrivească cu designul paginilor site-ului. În acest scop, am definit DIV-uri pentru fiecare, dându-le nume și atribuind proprietăți cu anumiți parametri:
#twitter, #fb, #google(float:left;margin-left:50px;margin-top:15px;) #vk(float:left;margin-right:30px;margin-left:40px;margin-top:15px ;)
Încercați să copiați opțiunea pe care v-am sugerat-o și să o lipiți în fișierul style.css al temei dvs. WordPress (poate chiar la sfârșit, pentru a nu vă încurca). Sunt sigur că mulți oameni vor găsi aceste stiluri potrivite. Dacă în unele teme butoanele arată incorect, vă puteți juca cu valorile numerice ale fiecăreia dintre proprietăți. Dacă acest lucru pare copleșitor, consultați această secțiune de blog pentru a afla elementele de bază ale foilor de stil în cascadă. Iată cum va arăta setul de butoane după aceasta:
Butoane oficiale de pe site-urile Odnoklassniki și SurfingbirdFolosind exemplul a patru servicii sociale populare în RuNet și în lume (Twitter și VKontakte sunt discutate în detaliu în acest articol, iar Google+ și Facebook în cel precedent), am analizat algoritmul de inserare a codurilor de butoane pe un site WordPress. Acum să trecem rapid prin restul celor mai importante rețele, pe care cititorii dvs. pot fi foarte probabil utilizatori.
Cred că deja vă veți da seama automat unde să introduceți primul pasaj (evidențiat cu verde):
unde este fragmentul de script:
!funcție (d, id, did, st) ( var js = d.createElement("script"); js.src = "http://connect.ok.ru/connect.js"; js.onload = js. onreadystatechange = funcția () ( dacă (!this.readyState || this.readyState == „încărcat” || this.readyState == „complet”) ( dacă (!this.executed) ( this.executed = true; setTimeout( function () ( OK.CONNECT.insertShareWidget(id,did,st); ), 0 d.documentElement.appendChild(js )(document,"ok_shareWidget",document.URL,"(width:145,height). :30,st:"rotunjit",sz:20,ck:1)");
Poate că cineva ar dori să instaleze butonul Partajare din serviciul Surfingbird. În acest caz, puteți configura primirea codului pe pagina sa oficială:
Dacă doriți să obțineți un buton cu un contor, faceți clic pe „Cu contoare” în partea de sus. În designer, selectați butonul care vă place făcând simplu clic pe el. Ca rezultat, obținem din nou două bucăți de cod. Script (evidențiat cu roșu):
Din nou îl plasăm înaintea CORPULUI de închidere și a butonului în sine (având specificat anterior nofollow):
Acțiune
La locul potrivit pe pagină.
Crearea butoanelor pentru rețelele sociale (fără scripturi și pluginuri)În concluzie, să vedem cum puteți crea singur butoanele de partajare pentru site-ul dvs. Am spus deja că fiecare metodă de producere a butoanelor sociale are propriile avantaje și dezavantaje. Această opțiune nu face excepție.
Avantajele includ absența unui script în cod (care încă pune o anumită sarcină pe server și afectează negativ viteza de încărcare a site-ului), capacitatea de a seta cu ușurință atributul rel nofollow pentru fiecare buton, deoarece linkul către resursa este indicată în mod explicit (deși valoarea nofollow nu afectează distribuția greutății paginii la fel de mult ca înainte).
În general, utilizarea unei astfel de oportunități nu este utilă în multe cazuri, mai ales pentru site-urile tinere, având în vedere nevoia ca acestea să obțină autoritate. Și în astfel de condiții nu pot exista fleacuri, așa că absența scenariilor, dacă poate fi evitată, poate juca doar în mâinile tale.
Înainte de a începe, trebuie să pregătiți o imagine pe care o puteți crea mai întâi singur. Aici se dezvăluie principalul avantaj al acestei metode de creare a butoanelor sociale. Imaginea poate fi realizată de orice tip, culoare și formă, o astfel de alegere este pur și simplu imposibilă atunci când se primesc coduri de la designer. Puteți crea imagini cu butoane, de exemplu, în, le puteți salva pe computer și apoi le puteți încărca în folderul IMG, care se află la:
Nume_site/wp-content/themes/nume_temă/img/
Un alt avantaj al creării dvs. de imagini pentru butoane este că de fiecare dată când încărcarea are loc nu dintr-o resursă terță parte, ci direct de pe serverul dvs. de găzduire, acest lucru reduce și viteza de încărcare. Pentru claritate, ofer o captură de ecran cu locația folderului IMG în ierarhia directorului site-ului:
Asigurați-vă că acordați atenție numelui folderului cu imagini (pentru unele teme se numește IMAGINI). Cu toate acestea, vă puteți crea propriul folder pentru butoanele sociale, trebuie doar să specificați calea corectă pentru acesta. Mai jos vă ofer coduri pentru fiecare dintre servicii atunci când vă creați propriile butoane sociale pe un site web WordPress.
După cum am spus deja, atributul REl=“NOFOLLOW” are scopul de a bloca linkul să nu fie indexat de motoarele de căutare și am adăugat atributul TARGET=“_BLANK” pentru a mă asigura că contactul este deschis într-o altă filă, acest lucru este foarte convenabil. pentru utilizatori, deoarece pagina site-ului rămâne deschisă.
Cu toate acestea, folosind atributul ONCLICK pentru eticheta A, a cărei valoare este funcția WINDOW.OPEN() din JAVASCRIPT, puteți face astfel încât să nu se deschidă o filă nouă, ci o fereastră nouă pentru adăugarea unui anunț de articol și puteți setați dimensiuni fixe pentru acesta utilizând atributele WIDTH (600) și HEIGHT (400):
Cu toate acestea, unii parametri care definesc comenzile ferestrei (inclusiv dimensiunile ÎNĂLȚIMEI și LĂȚIMILE) pot fi deja setați în configurația unui anumit browser, astfel încât este posibil ca valorile specificate să nu fie executate. Deschiderea unei noi ferestre mici, în opinia mea, este mai convenabilă atunci când partajați. În orice caz, pentru fiecare serviciu voi oferi două opțiuni pentru butoanele proprii (standard și cu deschiderea unei ferestre noi).
Stare de nervozitate:
Facebook:
Ya.ru:
Jurnal live:
&subject=">