Gdje je gumb VKontakte za reći prijateljima. Kako napraviti cool sustav "Reci prijateljima" na VKontakteu za preuzimanje koristeći CSS i JQuery. Kako radi

Pozdrav, dragi čitatelji bloga. Zbog brojnih zahtjeva čitatelja, danas ćemo napraviti cool sustav "Podijeli s prijateljima" na VKontakteu za preuzimanje datoteke koristeći JQuery i CSS.

Prijatelji, želim reći da će ovaj sustav višestruko povećati broj veza na vaš resurs, ovisno, naravno, o tome što nudite za preuzimanje i kakav promet imate.

Htio bih i to reći ovaj sustav vrlo sličan cool " " sustavu, koji zauzvrat povećava broj poveznica na Twitteru. U ovom slučaju je gotovo sve isto, samo sam malo uredio. I na kraju je sve dobro ispalo :-)

Pa, sad prijeđimo na sam sustav.

Sustav "Reci prijateljima" na VKontakteu za preuzimanje datoteke Kako to radi?

Vidite, nije tako teško. :-)

Kako to učiniti?

Za početak sam nacrtao jednostavan predložak za stranicu s gumbom. Možete ga vidjeti u primjeru, a također ga koristiti na svojoj web stranici, dostupan je u izvornom kodu. Korisnik će biti preusmjeren na ovu stranicu kako bi mogao izvršiti dragocjene operacije preuzimanja datoteke.

Zatim sam napravio ovaj predložak i dobio sam ovo:

Kao što vidite, stranica nije nimalo velika niti složena.

Glavna stvar je na početku između oznaka i dodajte sljedeće skripte:

jquery.min.js je JQuery biblioteka, ako je već imate ne morate je ponovno instalirati

jquery.vkAction.js - ova skripta otvara prozor VKontakte.

script.js - ali ova skripta aktivira gumb "Preuzmi".

Sad malo dodajmo CSS stilovi, kako bismo malo ukrasili našu stranicu.

CSS

Prijatelji, sve slike koje su navedene u stilovima mogu se pronaći u izvornom kodu u mapi img.

* ( margina: 0; padding: 0; ) body ( margin-top:-50px; width: 100%; height: 100%; color:#555; background: url(img/body.jpg) repeat 100% 0; font-family: "Ubuntu", sans-serif; font-size:0.85em; line-height:135%; ) ul (list-style:none; ) a (color: #538e28; text-decoration:none; ) a:hover (boja: #69b432) #wrapper (position:relative; border:0px solid #d6d6d6; width: 1004px; height: 787px; background: url(img/bodycont.jpg) 50px 0px no-repeat; margin: 0 auto; ) #copy( position:apsolute; left:330px; bottom:0px; border:0px solid #d6d6d6; font-size:11px; color:#bbb; ) #text (position:apsolute; left:0px; top: 150px; border:0px solid #d6d6d6; width: 1004px; height: 157px; background: url(img/text.png) no-repeat; margin: 0 auto; ) #vk ( position:absolute; left:370px; top: 300px; border:0px solid #d6d6d6; width: 262px; height: 262px; neprozirnost: 0,5; -moz-transition: sve 0,2s 0,01s ease-in; -o-transition: all 0,2s 0,01s ease-in; - webkit-transition: sve 0,2 s 0,01 s lagano ulazak; ) #vk:hover (opacity: 1.0;) #str1 (background: url(img/str1.png) no-repeat; position:absolute; left:140px; top:290px; border:0px solid #d6d6d6; width: 262px ; visina: 262px; ) #str2 ( pozadina: url(img/str2.png) bez ponavljanja; pozicija:apsolutno; desno:100px; gore:450px; obrub:0px solid #d6d6d6; širina: 262px; visina: 262px; ) .downloadButton( position:absolute; left:373px; top:580px; width:253px; height:98px; overflow:hidden; background:url("img/dbuthov.png") no-repeat; cursor:default; ) . downloadButton.active( background:url("img/dbut.png") no-repeat; width:253px; height:98px; cursor:pointer; -moz-transition: all 0.2s 0.01s ease-in; -o-transition : svih 0,2 s 0,01 s laganog ulaska; -webkit-transition: svih 0,2 s 0,01 s laganog ulaska; ) .downloadButton.active:hover( neprozirnost: 0,9; )

Nadam se da vam je ovdje sve jasno. Za početak sam napravio blok dimenzija 1004 puta 787 piksela u koji sam zatim smjestio sve objekte koje vidite s apsolutnim pozicioniranjem. To su VKontakte i gumbi za preuzimanje, kao i strelice i sami natpisi.

Ako vam nešto nije jasno, pitajte u komentarima.

Sada prijeđimo izravno na skripte.

(function($)( var win = null; $.fn.tweetAction = function(options,callback)( // Standardni parametri za skočni prozor: opcije = $.extend(( url:window.location.href), opcije); return this.click(function(e)( if(win)( e.preventDefault(); return; ) var width = 550, height = 350, top = (window.screen.height - height)/2, left = ( window.screen.width - širina)/2; var config = [ "scrollbars=yes","resizable=yes","toolbar=no","location=yes", "width="+width,"height=" +height,"left="+left, "top="+top ].join(","); // Skočni prozor iz VKontakte API-ja: win = window.open("http://vkontakte.ru /share. php?"+$.param(options), "TweetWindow",config); (function checkWindow())( try( // potrebno je staviti ovaj kod u try/catch: if(!win || win .closed)( throw "Closed!"; ) else ( setTimeout(checkWindow,100); ) ) catch(e)( win = null; callback(); ) ))(); e.preventDefault(); )); ); ))(jQuery);

Kao što vidite, promijenio sam samo ovaj link http://twitter.com/intent/tweet? ovome http://vkontakte.ru/share.php?. Drugim riječima, link s Twittera zamijenio sam VK linkom. To je to, više nije bilo promjena.

Sada da vidimo kakav je moj sljedeći scenarij.

skripta.js

$(document).ready(function())( // Koristeći naš tweetAction dodatak. Za potpuni popis s podržanim // parametrima, pogledajte http://dev.twitter.com/pages/intents#tweet-intent $( " #tweetLink").tweetAction(( naslov: "Kako napraviti sustav "Reci prijateljima" na VKontakteu za preuzimanje s koristeći JQuery i CSS", url: "http://site/", opis: "Ovdje možete preuzeti cool "Tell Friends" sustav" na VKontakte za preuzimanje, a također saznajte kako radi" ),function())( // Kada će se prozor zatvoriti: $(".downloadButton") .addClass("active") .attr("href","Direct link to file"); )); ));

Važno

Morate urediti ovu skriptu za svoju stranicu.

U polje za naslov: potrebno je unijeti naslov objave koji bi trebao biti prikazan u kontaktu.

U polju za opis: potrebno je navesti opis objave.

To je sve, prijatelji. Želio bih zahvaliti web stranici tutorialzine.com na ideji i skriptama. Pa, vidimo se uskoro. :-)

Pozdrav svim čitateljima stranice

U ovom članku ću vam reći kako dodati gumbe "Sviđa mi se", "Razred", "Reci prijateljima" itd. na svoju web stranicu.

Također ću vam dati savjet o tome kako instalirati komentare na bilo koju stranicu vaše stranice.

Postoji nekoliko načina za instaliranje gornjih gumba na vašu web stranicu. Pogledajmo svaki od njih:

Idite na web mjesto resursa s kojeg želite imati gumb. Zatim pronađite odjeljak za programere i tamo, slijedeći upute, generirajte html kod za umetanje na stranicu.

Upotrijebite izvrsnu uslugu Yandexa i generirajte posebnu ploču za lajkove.

Pogledajmo svaku uslugu.

U kontaktu s

Pažnja, za instaliranje gumba morate biti registrirani! Poveznica na odjeljak nalazi se na samom dnu društvene mreže. mreže.

Sada imate potpunu slobodu za letove mašte. Možete instalirati bilo koju uslugu koju želite. Odabrao sam gumb "Sviđa mi se".

Nakon što kliknete na odjeljak koji ste odabrali, vidjet ćete čarobnjaka za postavljanje.

Sada malo o čarobnjaku za postavljanje. Svaki programer ima svoj API. Obavezno provjerite njegovu prisutnost u prozoru s generiranim kodom.
Također, ne zaboravite navesti adresu svoje web stranice na vrhu obrasca.

Svi! Sada preostaje samo pola skripte staviti u glavu naše stranice, a drugu polovicu u tijelo, gdje želite da vam bude gumb.

Ovdje možete provjeriti kako to radi na mojoj web stranici. Vrh stranice.

Odnoklassniki i Moj svijet

I postavili smo ga upravo ovdje izgled gumbi. I onda kopiramo kod. Ovaj kod nije podijeljen u dva dijela, potrebno ga je odmah umetnuti na mjesto gdje želite da bude gumb.

Isprobajte ga na djelu.

Posjetimo Yandex :)

Ovdje je sve još jednostavnije nego u metodama koje smo ranije pogledali.
Jednostavno odabiremo potrebne usluge, njihov prikaz i zalijepimo dobiveni kod na stranicu.

To je sve? Tako jednostavno?

Pišite u komentarima ako vam nešto nije jasno.

Moglo bi vas zanimati:

Pozdrav dragi čitatelju, u ovom članku ćemo pogledati:

što je css
kako povezati stilove sa svojom stranicom
kako koristiti css
osnovna css "svojstva"

Svaki dan (ili možda ne baš svaki dan) uključite računalo, otvorite preglednik i aktivno koristite internet.

Jeste li se ikada zapitali kako ova mreža funkcionira? Ne? Onda neka autor stranice objasni kako stvari stoje.

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

Društveni mediji dostaviti kodove svojih gumba i widgeta za postavljanje na stranicu, te priložiti upute za njihovu instalaciju u sustav za upravljanje stranicom. Bilo koji CMS omogućuje vam da ih instalirate ( OS), glavna stvar je da ih skladno uklopite u dizajn svoje web 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, Instagram, Facebook, Google+, Pinterest itd., a želite ih sve pokriti, a zatim kako ne biste instalirali gumbe za svaki od njih zasebno, s obzirom da se mogu razlikovati u veličini i dizajnu , preporučujemo korištenje usluga skupljača. To su jednostavni i prikladni alati, koji će posjetiteljima stranica omogućiti brzu razmjenu informacija sa svojim prijateljima, bez obzira koju društvenu mrežu koriste. U nastavku ćemo pogledati najpopularnije usluge.

Gumbi društvenih medija Share Pluso

Vrijeme čitanja: 5 minuta

Integrirane marketinške kampanje putem e-pošte i društvenih medija dosežu više publike i povećavaju ROI (povrat ulaganja). Naučite kako koristiti Mailigenovu integriranu marketinšku platformu za dosezanje klijenata putem e-pošte i društvenih medija.

Zašto dodati gumbe društvenih medija "Reci prijateljima" svojoj e-pošti?

Prema studiji iz 2014. o marketinškim strategijama u 2014. koju je provela tvrtka za upravljanje digitalnom imovinom WebDAM, postoje tri dobra razloga za to:

U 2013. godini 43% prodavača pronašlo je kupce putem LinkedIna

Kako dodati gumbe društvenih medija "Reci prijateljima" u poruku e-pošte Korak 1

Kada ste u četvrtoj fazi kreiranja e-mail biltena, povucite blok za dijeljenje na društvenim mrežama na mjesto gdje želite instalirati ove gumbe.

Korak 2

Nakon toga otvorit će se novi prozor u kojem možete napraviti sve potrebne postavke.

Ako odaberete “E-mail arhiva”, primatelj mailinga moći će podijeliti sadržaj cijelog pisma na društvenim mrežama. Naslov newslettera koristit će se kao uvodni tekst.

Ako odaberete "Druga poveznica", možete unijeti poveznicu na bilo koji sadržaj koji želite podijeliti. Na primjer, ovo bi mogao biti novi članak na vašem blogu.

Zatim unesite tekst koji će se nalaziti uz gumbe, odaberite veličinu gumba i razmak između njih.

Facebook Rezimirajmo

O tome kako društvene mreže mogu pomoći u promociji web stranice i dovesti nove posjetitelje na nju. Ali ovaj put bih želio prijeći s teorije na praksu i govoriti detaljnije o tome kako postaviti gumbe "Sviđa mi se" na vašu web stranicu s popularnih društvenih mreža, kao što su: VKontakte, Facebook, Twitter, Odnoklassniki, MoiMir, Google+, QIP i Yandex .

Što su "lajkovi" i koja je korist od njih?

No, u internetskom žargonu “lajkovi” znače nešto sasvim drugo i izgledaju ovako:

Ako je promet na vašoj stranici najmanje 20 posjeta dnevno, trebali biste razmisliti o postavljanju takvih gumba na svoju stranicu jer:

“lajkovi” privlače nove posjetitelje s društvenih mreža: “lajkanjem” ove ili one objave na vašem blogu, korisnik može govoriti o tome na svojoj stranici na društvenoj mreži;
moći ćete razumjeti posjetitelje svoje web stranice: analizom članaka ili stranica web stranice čiji broj "sviđa mi se" znatno premašuje ostale stranice na vašoj web stranici, shvatit ćete što se vašim posjetiteljima više sviđa;
ovo će promovirati stranicu u tražilicama: tražilice Dugo smo naučili komunicirati s društvenim mrežama, zbog čega “lajkovi” ostavljaju traga u SEO-u.

Mislim da su komplimenti za “lajkove” dovoljni da shvatimo koliko je to korisno i važno za stranicu. Stoga možete sigurno nastaviti s uputama za instalaciju.

Brzi prolaz na upute

"Sviđa mi se" iz VKontakte

1. Idi na stranicu za povezivanje widgeta s vašim web mjestom.

3. Prilagodite izgled widgeta svom ukusu i dobijte gotov kod:

4. Kôd widgeta mora se umetnuti u predloške stranice web-mjesta.

"Like" s Facebooka

1. Idite na stranicu postavki gumba "Sviđa mi se".

2. Konfigurirajte widget i kliknite gumb "Dohvati kod":

3. U prozoru koji se otvori kopirajte primljeni kod i zalijepite ga u predloške stranice.

"Tweet" s Twittera

1. Idite na .

2. Odaberite vrstu gumba:

3. Prilagodite izgled gumba:

4. Kopirajte i zalijepite dobiveni kod u predloške:

"Klasa!" iz Odnoklassniki

A još je lakše doći do gumba "Razred!". zajedno s gumbom "Sviđa mi se" na društvenim mrežama. Mreža "MyMir". Upravo o tome ćemo dalje govoriti.

2 u 1: "Like" iz MoyMir + "Class" iz Odnoklassniki

1. Idite na stranicu za postavljanje widgeta "Like" i "Cool!". .

2. Prilagodite widget svom ukusu:

3. Kopirajte i zalijepite rezultirajući kod u predloške web mjesta:

"+1" s Google+

1. Idi na Stranica postavki gumba "+1"..

2. Prilagodite izgled gumba:

3. Dobiveni kod kopirajte i zalijepite u predloške:

Sve u jednom: za lijenčine!

Ako ste previše lijeni za postavljanje svih društvenih mreža zasebno, možete koristiti gotova rješenja te skripte koje daju mogućnost postavljanja univerzalnog gumba s dijeljenjem (funkcija "reci prijateljima") na svim popularnim društvenim mrežama. Imajte na umu da ovdje nema jake veze s web mjestom i da su takvi gumbi stvoreni više zbog praktičnosti nego zbog SEO učinka.

Nabavite kodove gumba i zalijepite ih na svoju web stranicu.

Gdje ubaciti primljene kodove?

Da biste postavili gumbe "sviđa mi se" na svoju web stranicu, prvo morate odlučiti koje su stranice vaše web stranice najprofitabilnije i na koje ih je najbolje postaviti. Postoje sljedeće opcije za postavljanje gumba na web mjesto:

početna stranica;
sve stranice stranice;
stranica objave/materijala.

Nema potrebe ponovno izmišljati kotač i postavljati gumbe u postove na forumu, na stranice s podacima za kontakt i tako dalje: takvi se gumbi neće svidjeti. Nakon što odlučite gdje ćete umetnuti gumbe, prijavite se na upravljačku ploču svoje stranice na your-site.ucoz.ru/admin i idite na:

uređivač stranice → upravljanje stranicama stranice → uredite glavnu stranicu stranice(ako želite staviti kodove gumba samo na početna stranica mjesto);
upravljanje dizajnom → modul (izborno) → stranica materijala i komentari na nju(ako za svaki materijal želite postaviti gumbe “like”);
upravljanje dizajnom → globalni blok "Vrh stranice"(ako želite postaviti kod na sve stranice stranice).

Zalijepite primljene kodove gumba u jedan od ovih predložaka i spremite promjene. Pogledajmo ovu točku konkretan primjer- postavljanje gumba “Ovo je zanimljivo!” pored unosa u našem službenom blogu uCoz.