Cum să creați butoane de partajare pentru site-ul dvs. pas cu pas

Publicat: 2021-05-21

Butoanele de distribuire socială sunt un element indispensabil al oricărui site web. Indiferent dacă este un blog personal sau de afaceri, un portofoliu online sau un proiect de comerț electronic, butoanele sociale le permit clienților să răspândească cu ușurință vestea despre conținutul tău pe Facebook, Twitter, Instagram sau Pinterest. În timp ce implementați butoane simple de distribuire socială în resursa dvs. web, vă puteți extinde în mod semnificativ acoperirea și vă puteți întâmpina clienți noi care să vină pe site-ul dvs. în căutare de conținut sau bunuri valoroase. Puterea rețelelor de social media nu trebuie subestimată în aceste zile. Dacă o afacere nu poate fi găsită pe Facebook sau Instagram, pierde o oportunitate de a ajunge la publicul țintă și de a-și comercializa bunurile și serviciile către mai mulți oameni. După cum sugerează și numele, butoanele de distribuire socială fac conținutul dvs. mai ușor de partajat pe web. Este o practică comună pentru utilizatorii moderni să partajeze link-uri către produsele lor preferate pe paginile lor de Facebook. Fiecare postare socială poate fi accesată de urmăritori cu aceleași interese și preferințe ca și clientul tău.

În plus, cu butoanele de rețele sociale, vă puteți difuza cu ușurință conținutul în grupuri de rețele sociale sau persoanelor alese. Numărul de distribuiri în rețelele sociale indică conținutul pe care oamenii îl consideră mai valoros și mai captivant. Așadar, multe mărci lucrează din greu pentru a-și multiplica cotele pe rețelele sociale și pentru a-și crește gradul de cunoaștere a mărcii.

Răspândirea cuvântului despre conținutul preferat poate fi ușor, în timp ce faceți doar câteva clicuri. Butoanele sociale le permit clienților să difuzeze linkuri pe măsură ce rămân pe site-ul dvs. În cele mai multe cazuri, implică pur și simplu atingerea butonului de partajare și selectarea platformei de socializare unde ar dori să apară linkul dvs.

Cum se creează un buton de partajare pas cu pas

Internetul este plin de diferite butoane de partajare, sarcina principală este să le alegeți pe cele potrivite. Uneori nici nu înțelegi de ce butoane sociale ai nevoie pe propriul tău blog. Uneori nu poți găsi butoane cu un design care să se potrivească nevoilor tale. Uneori nu găsești nicio modalitate simplă și cool de a implementa butoanele de partajare pe blogul tău. Nu vă panicați! În acest articol, vă vom arăta cum să creați câteva butoane de partajare de bază și sociale.

Cursuri de Web Design

  • Cursuri de codificare online pentru învățarea acasă
  • Pachetul complet Photoshop Mastery

În cazul în care nu doriți să vă ocupați de cod uriaș, aglomerat și personalizare complexă a detaliilor, acest tutorial este exact pentru dvs. Chiar și pentru începătorii cu HTML le va fi ușor de urmărit. Așadar, puneți-vă centurile de siguranță și să începem!

Pasul 1

Primul lucru pe care ar trebui să-l faceți este să deschideți fișierul HTML și să lipiți codul de mai jos

<a onclick="Share.facebook('URL','TITLE','IMG_PATH','DESC')"> {sharing is sexy}</a>
<a onclick="Share.twitter('URL','TITLE')"> {sharing is sexy}</a>

sau
<a href="http://www.facebook.com/sharer/sharer.php?s=100&
p%5Btitle%5D=TITLE&p%5Bsummary%5D=DESC&p%5Burl%5D=
URL&p%5Bimages%5D%5B0%5D=IMG_PATH" target="_blank" onclick="return Share.me(this);">{sharing is sexy}</a>
<a href="https://twitter.com/intent/tweet?original_referer=
http%3A%2F%2Ffiddle.jshell.net%2F_display%2F&text=TITLE&url
=URL" target="_blank" onclick="return Share.me(this)">{sharing is sexy}</a>

Cum să creați butoane de partajare pentru site-ul dvs. pas cu pas 1

Pasul 2

Acum creați un fișier js care conține astfel de informații:

Share = {
facebook: function(purl, ptitle, pimg, text) {
url = 'http://www.facebook.com/sharer.php?s=100';
url += '&p[title]=' + encodeURIComponent(ptitle);
url += '&p[summary]=' + encodeURIComponent(text);
url += '&p[url]=' + encodeURIComponent(purl);
url += '&p[images][0]=' + encodeURIComponent(pimg);
Share.popup(url);
},
twitter: function(purl, ptitle) {
url = 'http://twitter.com/share?';
url += 'text=' + encodeURIComponent(ptitle);
url += '&url=' + encodeURIComponent(purl);
url += '&counturl=' + encodeURIComponent(purl);
Share.popup(url);
},
popup: function(url) {
window.open(url,'','toolbar=0,status=0,width=626, height=436');
}
};

Asta e tot :) O metodă foarte simplă de a urmări statisticile de clic pe butonul de partajare care este plasat direct pe pagina de partajare. Această problemă a fost rezolvată cu ajutorul unui tabel din baza de date și a unui simplu ajax:

popup: function(url,soc) {
window.open(url,'','toolbar=0,status=0,width=626, height=436');

}

Acest script primește un ID de la adresa URL, adaugă eticheta la tabel și/sau mărește contorul cu unul pentru o anumită rețea socială. Este o soluție simplă pentru butoanele de partajare. Puteți schimba cu ușurință aspectul butoanelor prin CSS, puteți să vă proiectați propriile butoane în Photoshop și să le folosiți aici. Poți face aproape orice!

Desigur, acest exemplu este puțin primitiv, dar este un punct minunat să începeți să vă creați propriile butoane de partajare. Încearcă!

Rețelele de social media populare vă permit să generați bucăți de cod personalizate pe care le putem încorpora în postări sau pagini ale site-urilor web pentru a le permite oamenilor să difuzeze conținutul lor preferat. Facebook și Twitter sunt două dintre cele mai populare rețele sociale care suportă funcționalitatea respectivă. Să vedem cum să integrăm astfel de butoane sociale pe site-ul tău.

Cum să adăugați butonul Facebook Share

Butoanele de partajare de pe Facebook le permit clienților să partajeze linkuri care direcționează către postări sau oferte de pe site-ul dvs. cu un text scris personalizat.

Pentru a adăuga acest buton pe site-ul dvs., mai întâi trebuie să accesați această pagină.

Acum să vedem ce înseamnă unele dintre câmpurile de pe pagina de configurare.

  • URL la Like - acest câmp adaugă pagina site-ului pe care dorim să o distribuim pe Facebook.
  • Lățimea - lățimea butonului este setată aici.
  • Verb de afișat – aici putem selecta textul din butonul „Like” sau „Recomand”.
  • Schema de culori - Aici puteți alege designul butoanelor pentru site-uri deschise sau întunecate.
  • Font - selectați fontul pentru etichetele butoanelor.

După ce am selectat setările, găsiți butonul „Obțineți codul” și faceți clic pe el. În continuare, va fi afișată o fereastră cu codul, acesta trebuie de asemenea introdus în două etape:

Introdu codul imediat după eticheta < body >.

Cod pentru afișarea butonului:

Lipiți acest cod unde ar trebui să fie afișat butonul de pe Facebook:

Cum să adăugați butonul Twitter Share

Când adăugați butoane de partajare Twitter pe site-ul dvs., există câteva lucruri pe care dezvoltatorii Twitter vă recomandă să le țineți cont:

  • Dacă un utilizator nu este conectat la contul său de Twitter, i se va cere să se conecteze pentru a transmite mesajul dvs.
  • Tweet-ul va fi conectat la pagina web pe care a vizitat-o ​​o persoană. Un utilizator se poate simți liber să ajusteze mesajul tweet-ului așa cum dorește.
  • După ce faceți clic pe „Tweet”, caseta pop-up va dezvălui o listă de conturi asociate pe Twitter. Un utilizator poate decide unde să le urmărească sau să le ignore.
  • Nu există o limită a numărului de ori pe zi și același utilizator poate tweet ceva la cronologia.

Pentru a adăuga butonul de partajare Twitter, procedați în felul următor:

  • Accesați publish.twitter.com și atingeți Butoanele Twitter.
  • Alegeți ce tip de buton de partajare pe Twitter doriți să adăugați site-ului dvs.
  • Ajustați Tweetul și mesajul pe care îl va conține menționând ce @cont doriți să menționeze.
  • După ce ați terminat, copiați și inserați codul pe site-ul dvs.

Cam asta e tot. Sperăm că veți găsi acest ghid de ajutor. Cel mai bun lucru este că nu ar trebui să aveți abilități de codare profunde pentru a adăuga butoane de distribuire socială pe site-ul dvs. Generatoarele automate de cod vă oferă soluții gata de utilizare pe care le puteți ajusta, copia și lipi intuitiv în HTML-ul site-ului dvs. web.