Skripta prekrasnih gumba društvenih medija. Vlastiti gumbi za društvene mreže. Učitavanje slika gumba na poslužitelj

Ali ova skripta ima jedan nedostatak - skriptu koja upravlja ponašanjem preglednika kada se klikne na jedan od gumba. Evo dijela u kojem i sami lako možete uočiti dva problema:

Vkontakte: funkcija (purl, ptitle, pimg, tekst) (url = "http://vkontakte.ru/share.php?"; Url + = "url =" + encodeURIComponent (purl); url + = "& title = " (! LANG: + encodeURIComponent (ptitle); url + ="&description=" + encodeURIComponent(text); url += "&image=" + encodeURIComponent(pimg); url += "&noparse=true"; Share.popup(url); }, !}

Prvi problem je mali i mnogi bi mi mogli reći: “Hej, stari je ovo napisao 2012.! Samo promijenite liniju i to je to.” I slažem se s tobom da se jednostavno možeš promijenitivkontakte.ru na vk.com i samo zatvorite pitanje.

Drugo, za svaku uslugu treba napisati novi blok. Što također nije jako problematično za napraviti, samo copy-paste i uklonite / dodajte potrebne parametre.

Ali što ova skripta na kraju čini? Samo stvara skočni prozor koji prosljeđuje navedene parametre. Ovo su redovi:

Skočni prozor: funkcija (url) (window.open (url, "", "toolbar = 0, status = 0, širina = 626, visina = 436");)

Upravo sam rad ove skripte malo izmijenio. Ali više o tome u nastavku. Pogledajmo same gumbe i kako rade.

Prvo, moramo imati nekoliko varijabli za gumbe za dijeljenje:

• $ Naslov- Naslov (naslov) stranice
• $ Opis- Opis stranice
• $ ImageUrl - put do slike stranice
• $ Link - izravna poveznica na stranicu

Nazvao sam ih konvencionalno kako bi bilo jasno koliko ih je potrebno i što su. Način na koji će biti preuzeti na vašoj stranici - ručno ili automatski - ovisi samo o aplikaciji na kojoj će se izvršiti. Na primjer, u WordPress CMS-u to će izgledati ovako:

• $ Naslov- ovo je
• $ Opis —
• $ ImageUrl —
• $ Link —

Sada, na mjesto koje nam treba, ubacujemo sljedeći kod, gdje umjesto varijabli zamjenjujemo potrebne vrijednosti (ako je potrebno):

To je sve! Rezultat rada možete vidjeti na kraju ovog članka.

Pregled domaćih dizajnera i skripti gumba društvenih mreža za web stranice, kao i stranih analoga. Kratko, razumljivo i jasno.

Dizajneri gumba društvenih medija za web stranicu

2. Jednostavan način za dobivanje poveznica na stranicu - QIP.RU
Postavite gumb na stranicu i dajte posjetiteljima priliku da dodaju svoje omiljene materijale web stranice u oznake, blogove i društvene mreže. Tri koraka: gdje označiti gumb (web-lokacija, Blogger ili WordPress), stilizirati gumbe (iz kutije) i dobiti gumb.

3. Gumbi za dodavanje sadržaja na društvene mreže - Pluso
Postavite gumbe i dajte posjetiteljima mogućnost dijeljenja stranica koje im se sviđaju na društvenim mrežama, kao i ispisivanja, slanja e-pošte i dodavanja oznaka.

4. Usluga društvene djelatnosti - UpToLike
Prilagođeni gumbi društvenih medija s mogućnošću postavljanja boje, oblika, veličine i posebnih efekata. Dodatne značajke su PicShare widget za dijeljenje slika, funkcija "Cuote" i prilagođena funkcija Following.

5. Jedan gumb! - za sve usluge knjižnih oznaka i društvenih mreža
Odaberite tipku vrste. Gdje će se gumb instalirati: web stranica, Blogger ili WordPress. Dodajte gumb.

Skripte gumba društvenih medija za stranicu

1. Lijepi društveni gumbi za stranicu - goodshare.js
Prikaz tipke na gotovo svakom uređaju. Čisti kod. Kratka dokumentacija. SEO prijateljski.

2. Gumbi za skriptu za društvene oznake i mreže - Share42
Odaberite veličinu i označite ikone usluga koje želite koristiti na web mjestu. Odaberite opcije koje želite. Pogledajte kako će to izgledati i/ili preuzmite gotovu skriptu. Instalirajte skriptu na svoju WordPress stranicu, Drupal itd.

3. Prekrasni gumbi poput društvenih medija koji koriste jQuery - lajkovi na društvenim mrežama
Skripta gumba "like" s brojačima u istom stilu za društvene mreže: Facebook, Twitter, VKontakte, Odnoklassniki, Moj svijet, Google+ i Pinterest.

Strani analozi gumba društvenih medija za web stranicu

1. Gumbi za dijeljenje - AddThis
Gumbi za dijeljenje pomoći će vam povećati publiku vaše stranice privlačenjem posjetitelja s drugih resursa i društvenih mreža, putem distribuiranog sadržaja.

4. Društveno dijeljenje - Po.st
Dobijte više vrijednosti od dijeljenja na društvenim mrežama. Usluga će posjetiteljima olakšati proces dijeljenja na društvenim mrežama, što će povećati organski promet stranice.

5. Dijelite gumbe za bilo koju web stranicu - AddToAny
Nabavite kod gumba društvenih medija za bilo koju web stranicu. Odaberite vrstu i stil gumba, odredite e-poštu i druge opcije ili odaberite jednu od platformi: WordPress, Drupal, Tumblr, Joomla, Elgg, WordPress.com, Blogger, TypePad ili FeedFlare. Nabavite kod gumba.

U posljednje vrijeme svaki drugi (ako ne i prvi) kupac u zahtjevima za razvoj stranice traži da ga obavezno poveže s društvenim mrežama. "Društveni" gumbi na stranici su alat broj 1 za privlačenje ciljane publike, distribuciju sadržaja i PR općenito. I to potpuno besplatno!

Društvene mreže daju kodove za svoje gumbe i widgete za postavljanje na stranicu te prilažu upute za njihovu instalaciju u sustav za upravljanje sadržajem. Bilo koji CMS (operativni sustav) omogućuje vam da ih instalirate, glavna stvar je da ih skladno uklopite u dizajn vaše stranice.

Koje su značajke i funkcije?

Ako je vaša stranica namijenjena ljudima koji komuniciraju na popularnim društvenim mrežama. mreže, na primjer, Vkontakte, Twitter, Instagramm, Facebook, Google+, Pinterest itd., a želite ih pokriti sve kako ne biste postavljali gumbe za svaku od njih posebno, s obzirom da se mogu razlikovati po veličini i dizajna, preporučujemo korištenje usluga agregatora. Ovo su jednostavni i praktični alati koji će posjetiteljima stranice omogućiti brzo dijeljenje informacija sa svojim prijateljima, bez obzira na to koju društvenu mrežu koriste. U nastavku ćemo analizirati najpopularnije usluge.

Gumbi na društvenim mrežama Dijeli Pluso

"Zašto je potrebna?" - pitaš. Vjerojatno pokušavam ići ukorak s vremenom - mi zaostajemo za buržoazijom, a njihova promocija web mjesta nešto je drugačija od naše trenutne stvarnosti.

Ako pogledate blogove u burzhunetu, onda gotovo svi imaju razne plutajuće ploče koje vam omogućuju dodavanje objave članka na najpopularnije društvene mreže i oznake. Sada je buržujima prilično teško napredovati kupujući linkove, a važnost društvenih signala počela je nevjerojatno rasti.

Ploča vam omogućuje povećanje broja dijeljenih članaka, a time i utjecaj na. Pa kako nas tako nešto čeka, bilo bi u redu da malo preduhitrimo događanja.

Zašto vam je potreban Share42 panel, njegove prednosti

Htio sam imati ploču s gumbima za ove četiri društvene mreže, koje su najrelevantnije za ruski internet. Moguće je da društveni signali kod nas još nisu tako svemoćni kao među buržujima, jer jednostavno još nisu dovoljni da izvrše relevantnu selekciju.

Ali bolje je sada ih početi skupljati i biti potpuno naoružani kada globalni Armagedijanac dođe na Runet zbog, po našem izopačenom shvaćanju - značajnog smanjenja utjecaja i strože kazne za manipulaciju linkovima.

Općenito, unoseći različite upite na i Google, dok sam tražio odgovarajuću verziju panela, naišao sam na web stranicu Dimox.name, ali kada sam tamo vidio prekrasan panel, nisam smatrao potrebnim tražiti opis njegovu instalaciju na svom resursu.

Znam samo da on sam radi takve stvari (bez dodataka), ali danas baš nisam htio ulaziti u nijanse i postavke. Htio sam uzeti nekoliko komada koda i dobiti izvrsnu, s estetske točke gledišta, i radnu verziju plutajući gumbi društvenih medija.

Onda sam naišao na servis Share42, a kada sam na njemu vidio iste gumbe društvenih mreža, bio sam malo iznenađen – Dimox koristi stamping. To je kao da će vješt postolar ići na robu široke potrošnje. No, nakon što sam malo kopao po netu, naišao sam gdje piše o pokretanju besplatnog servisa za samoizbor, konfiguraciju i dobivanje gotovog koda skripte za društvene gumbe.

Umoran od traženja pomoći u izradi gumba za stranicu, otvorio je zaseban projekt, koji je, po mom mišljenju, sada najbolji od svih ponuda na tržištu. Samo da ih nabrojim pros to mi je zapelo za oko:

Sada o nedostacima:

1. Morate imati barem osnovno razumijevanje i. Ne mislim da ćete odmah požuriti čitati moje publikacije, ali se ipak nadam vašoj namjeri da to učinite u budućnosti (uostalom, pokušao sam, napisao, a pojava ovih članaka samo je izazvala brzi odljev pretplatnika - tužno je).

Također ćete morati barem približno zamisliti kako je uređena ona koju koristite. U, na primjer, ne morate kopati u kodu - možete ga koristiti (iako ga nisam isprobao za ovu skriptu).

Ako vam nedostaci nisu značajni (ili ste spremni gaziti na licu mjesta u potrazi za istinom), a prednosti su značajne, onda slobodno pročitajte ovaj članak dalje. Što se zove - ne prebaci. Pojasnit ću vrlo jednostavno postavljanje i prikaz kreirane trake gumba društvenih medija na Share42, kao i kako ga instalirati. Nemojte mi zamjeriti, ali na ovom motoru moj blog radi.

Konfiguriranje Share42 i instaliranje skripte na stranicu

Bacio sam ovu mapu u direktorij s WordPress dodacima, pa sam u četvrtom koraku čarobnjaka morao navesti ovu točnu stazu:

I također sam morao staviti kvačicu ispred WordPressa, jer to je motor koji koristi moj blog. Sve je, s postavkama Share, gotovo, ostaje samo umetnuti Html i CSS kod predložen u petom i šestom koraku čarobnjaka. Zapravo, ovdje obično nastaju ozbiljni problemi za neobučene korisnike.

Imajte na umu da se sadržaj ovog koda odmah mijenja kada promijenite svoje postavke (Ajax je očito sjajan i užasan). Stoga, prilikom odabira vertikalne plutajuće trake, morat ćete umetnuti dva dijela CSS koda umjesto jednog (prilikom odabira horizontalne trake). No, sve su to detalji, iako vrlo dojmljivi i ugodni (slava Dimoksu).

Prvo razgovarajmo o jednostavnom - umetanje CSS koda... Kopirajte isječak ili dva pravila i pronađite datoteku kaskadnog lista stilova koju vaš predložak ili koža koristi.

U WordPressu se obično zove Style.css i nalazi se u mapi s temom koju koristite (/wp-content / themes / naziv teme). U Joomli morate potražiti datoteku stila u mapi s predloškom koji trenutno koristite (/templates / naziv predloška)

Vi samo otvorite ovu datoteku za uređivanje, na primjer, i dodajte na sam kraj fragmente koda stila koji ste kopirali (zalijepit ćemo HTML kod negdje drugdje). Spremite promjene i ne zaboravite, odlaskom na Filezilu, primijeniti te promjene, pristankom na pop-up ponudu.

Pa, sada je vrijeme da se pozabavimo tri retka Kôd HTML skripte Share42... Autor savjetuje da ih umetnete prije ili poslije članaka. U WordPressu to nije lako, ali vrlo jednostavno. Otvorite single.php datoteku za uređivanje iz mape s vašom temom (zapamtite, nalazi se na /wp-content / themes / naziv WordPress teme).

Kod možete zalijepiti odmah nakon članaka. Da biste to učinili, pronađite redak s funkcijom_content i umetnite predloženi fragment odmah nakon njega, na primjer, ovako: