Računi 

Koda, da svojim prijateljem poveste o nas. Gumbi družbenih medijev. Zakaj bi svoji e-pošti dodali gumbe družbenih medijev »Povej prijateljem«?

Lep pozdrav, dragi bralci bloga. Zaradi številnih zahtev bralcev bomo danes naredili kul sistem »Deli s prijatelji« na VKontakte za prenos datoteke z uporabo JQuery in CSS.

Prijatelji, želim reči, da bo ta sistem večkrat povečal število povezav do vašega vira, odvisno seveda od tega, kaj ponujate za prenos in kakšen promet imate.

Prav tako bi rad povedal, da je ta sistem zelo podoben kul sistemu "", ki posledično poveča število povezav na Twitterju. V tem primeru je skoraj vse enako, le malo sem uredil. In na koncu se je vse dobro izšlo :-)

No, zdaj pa preidimo na sam sistem.

Sistem »Povej prijateljem« na VKontakte za prenos datoteke Kako deluje?

Vidiš, ni tako težko. :-)

Kako narediti?

Za začetek sem narisala preprosto predlogo za stran z gumbom. Vidite ga lahko v primeru in ga uporabite tudi na svoji spletni strani, na voljo je v izvorni kodi. Uporabnik bo preusmerjen na to stran, da bo lahko izvedel cenjene operacije prenosa datoteke.

Potem sem sestavil to predlogo in dobil sem tole:

Kot lahko vidite, stran sploh ni velika ali kompleksna.

Glavna stvar je na začetku med oznakami in dodajte naslednje skripte:

jquery.min.js je knjižnica JQuery, če jo že imate, vam je ni treba znova namestiti

jquery.vkAction.js - ta skript odpre okno VKontakte.

script.js - vendar ta skript aktivira gumb »Prenos«.

Zdaj pa dodajmo nekaj slogov CSS, da rahlo okrasimo našo stran.

CSS

Prijatelji, vse slike, ki so navedene v slogih, najdete v izvorni kodi v mapi img.

* ( rob: 0; oblazinjenje: 0; ) telo ( margin-top:-50px; širina: 100 %; višina: 100 %; barva: #555; ozadje: url(img/body.jpg) ponovi 100 % 0; družina pisav: "sans-serif; velikost črte: 135%; ) ul (barva: #538e28; dekoracija besedila: nič;) a:hover (barva: #69b432) #wrapper (položaj:relativno; obroba:0px polna #d6d6d6; širina: 1004px; višina: 787px; ozadje: url(img/bodycont.jpg) 50px 0px brez ponavljanja; rob: 0 auto; ) #copy( position:absolute; left:330px; bottom:0px; border:0px solid #d6d6d6; font-size:11px; color:#bbb; ) #text (position:absolute; left:0px; top: 150px; 0px; ozadje: url(img/text.png); 0px; 0,01s; ease-in; webkit-transition: vse 0,2 s 0,01 s ease-in; ) #vk:hover (opacity: 1.0;) #str1 (ozadje: url(img/str1.png) no-repeat; position:absolute; left:140px; top:290px; border:0px solid #d6d6d6; width: 262px ; višina: 262 slikovnih pik; ) #str2 (ozadje: url(img/str2.png) brez ponavljanja; položaj: absolutno; desno: 450 slikovnih pik; obroba: 0 pikslov, polna #d6d6d6; širina: 262 slikovnih pik; višina: 262 slikovnih pik; ) .downloadButton( position:absolute; left:373px; top:580px; width:253px; height:98px; overflow:hidden; background:url("img/dbuthov.png") no-repeat; cursor:default; ) . downloadButton.active(ozadje:url("img/dbut.png") brez ponavljanja; širina:253px; višina:98px; kazalec:kazalec; -moz-prehod: vse 0,2 s 0,01 s olajšanje; -o-prehod : vse 0,2 s 0,01 s ease-in; webkit-transition: vse 0,2 s 0,01 s ease-in;

Upam, da vam je tukaj vse jasno. Za začetek sem izdelal blok velikosti 1004 krat 787 pikslov, v katerega sem nato postavil vse objekte, ki jih vidite z absolutnim pozicioniranjem. To so gumbi VKontakte in prenos, pa tudi puščice in sami napisi.

Če česa ne razumete, vprašajte v komentarjih.

Zdaj pa preidimo neposredno na skripte.

JS

(function($)( var win = null; $.fn.tweetAction = function(options,callback)( // Standardni parametri za pojavno okno: options = $.extend(( url:window.location.href) , možnosti) ; 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 - width)/2; var config = [ "scrollbars=yes","resizable=yes","toolbar=no","location=yes", "width="+width, "height= "+height,"left="+left, "top="+top ].join(","); // Pojavno okno iz API-ja VKontakte: win = window.open("http:/ /vkontakte.ru/share .php?"+$.param(options), "TweetWindow",config); (funkcija checkWindow())( try( // to kodo je treba vstaviti v try/catch: if(! win ||. win.closed) ( throw "Closed!"; ) else ( setTimeout(checkWindow,100); ) catch(e)( win = null(); ))(); e.preventDefault()) ; )(jQuery);

Kot lahko vidite, sem spremenil samo to povezavo http://twitter.com/intent/tweet? na tole http://vkontakte.ru/share.php?. Z drugimi besedami, zamenjal sem povezavo s Twitterja s povezavo VK. To je to, ni bilo več sprememb.

Zdaj pa poglejmo, kakšen je moj naslednji scenarij.

script.js

$(document).ready(function())( // Uporaba našega vtičnika tweetAction. Za popoln seznam s podprtimi // parametri glejte http://dev.twitter.com/pages/intents#tweet-intent $( " #tweetLink").tweetAction(( naslov: "Kako narediti sistem "Povej prijateljem" na VKontakte za prenos z uporabo JQuery in CSS", url: "http://site/", opis: "Tukaj lahko prenesete cool "Povejte" sistemskim prijateljem"" na VKontakte, da prenesejo, in tudi ugotovite, kako deluje" ),function())( // Ko se okno zapre: $(".downloadButton") .addClass("active") . attr("href","Neposredna povezava do datoteke");

Pomembno

Ta skript morate urediti za svoje spletno mesto.

V polje za naslov: vnesti morate naslov objave, ki naj bo prikazana v kontaktu.

V polje z opisom: vnesti morate opis objave.

To je vse, prijatelji. Rad bi se zahvalil spletnemu mestu tutorialzine.com za idejo in skripte. No, zdaj pa se vidimo kmalu. :-)

Čas branja: 5 minut

Integrirane marketinške kampanje po e-pošti in družbenih omrežjih dosežejo več ciljnih skupin in povečajo ROI (donosnost naložbe). Naučite se uporabljati integrirano marketinško platformo Mailigen za doseganje strank prek e-pošte in družbenih medijev.

Zakaj bi svoji e-pošti dodali gumbe družbenih medijev »Povej prijateljem«?

Glede na študijo iz leta 2014 o tržnih strategijah podjetja WebDAM za upravljanje digitalnih sredstev obstajajo trije dobri razlogi za to:

  • Leta 2013 je 43 % prodajalcev našlo kupce prek LinkedIna
Kako v e-poštno sporočilo dodati gumbe družbenih medijev »Povej prijateljem« 1. korak

Ko ste na četrti stopnji ustvarjanja e-novic, povlecite blok za skupno rabo v družabnih omrežjih na mesto, kjer želite namestiti te gumbe.

2. korak

Po tem se odpre novo okno, v katerem lahko opravite vse potrebne nastavitve.

  • Če izberete »E-poštni arhiv«, bo lahko prejemnik sporočila delil vsebino celotnega pisma na družbenih omrežjih. Naslov glasila bo uporabljen kot uvodno besedilo.
  • Če izberete »Druga povezava«, lahko vnesete povezavo do katere koli vsebine, ki jo želite deliti. To je lahko na primer nov članek na vašem blogu.
  • Nato vnesite besedilo, ki se bo nahajalo poleg gumbov, izberite velikost gumbov in razdaljo med njimi.
Facebook Naj povzamemo

Pozdrav vsem bralcem strani

V tem članku vam bom povedal, kako na svoje spletno mesto dodate gumbe »Všeč mi je«, »Razred«, »Povej prijateljem« itd.

Dal vam bom tudi namig o tem, kako namestiti komentarje na katero koli stran vašega spletnega mesta.

Obstaja več načinov za namestitev zgornjih gumbov na vaše spletno mesto. Oglejmo si vsakega od njih:

  • Pojdite na spletno mesto vira, iz katerega želite imeti gumb. Nato poiščite razdelek za razvijalce in tam po navodilih ustvarite HTML kodo, ki jo vstavite na spletno mesto.
  • Uporabite čudovito storitev Yandex in ustvarite posebno ploščo všečkov.

    • Oglejmo si vsako storitev.

    V stiku z


    Pozor, za namestitev gumba morate biti registrirani! Povezava do razdelka je na samem dnu družbenega omrežja. omrežja.

    Zdaj imate popolno svobodo za polete domišljije. Namestite lahko katero koli storitev, ki jo želite. Izbral sem gumb "Všeč mi je".


    Ko kliknete razdelek, ki ste ga izbrali, boste videli čarovnika za nastavitev.


    Zdaj pa nekaj o čarovniku za nastavitev. Vsak razvijalec ima svoj apiId. Ne pozabite preveriti njegove prisotnosti v oknu z ustvarjeno kodo.
    Prav tako ne pozabite vključiti naslova svojega spletnega mesta na vrhu obrazca.

    Vse! Zdaj ostane le še to, da polovico skripta postavimo v glavo naše strani, drugo polovico pa v telo, kjer želite, da je vaš gumb.

    Tukaj lahko preverite, kako deluje na moji spletni strani. Vrh strani.

    Odnoklassniki in Moj svet


    In prav tukaj prilagodimo videz gumba. In potem kopiramo kodo. Ta koda ni razdeljena na dva dela; takoj jo je treba vstaviti na mesto, kjer želite, da je gumb.

    Preizkusite v akciji.

    Obiščimo Yandex :)


    Tukaj je vse še preprostejše kot pri metodah, ki smo jih pogledali prej.
    Preprosto izberemo potrebne storitve, njihov prikaz in nastalo kodo prilepimo na spletno mesto.

    To je vse? Tako preprosto?

    Napišite v komentarje, če vam kaj ni jasno.

    Morda vas bo zanimalo:

    Pozdravljeni dragi bralec, v tem članku si bomo ogledali:

    • kaj je css
    • kako povezati sloge z vašo stranjo
    • kako uporabljati css
    • osnovne "lastnosti" css

    Vsak dan (ali morda ne vsak dan) prižgete računalnik, odprete brskalnik in aktivno uporabljate internet.

    Ste se kdaj vprašali, kako to omrežje deluje? ne? Potem naj avtor strani razloži, kako je s stvarmi.

    V zadnjem času vsaka druga (če ne prva) stranka v zahtevah za razvoj spletne strani prosi, da jo obvezno poveže z družbenimi omrežji. “Social” gumbi na spletni strani so orodje številka 1 za privabljanje ciljne publike, distribucijo vsebine in PR nasploh. In to popolnoma brezplačno!

    Družbena omrežja zagotavljajo kode za svoje gumbe in pripomočke za umestitev na spletno mesto ter nudijo navodila za njihovo namestitev v sistem za upravljanje spletnega mesta. Vsak CMS (operacijski sistem) vam omogoča, da jih namestite; glavna stvar je, da jih harmonično prilagodite zasnovi vašega spletnega mesta.

    Kakšne so lastnosti in funkcije?

    Če je vaše spletno mesto namenjeno ljudem, ki komunicirajo na priljubljenih družbenih omrežjih. omrežij, na primer Vkontakte, Twitter, Instagram, Facebook, Google+, Pinterest itd., in jih želite pokriti vsa, da ne namestite gumbov za vsakega od njih posebej, glede na to, da se lahko razlikujejo po velikosti in dizajnu , priporočamo uporabo storitev zbiralnika. Gre za enostavna in priročna orodja, ki bodo obiskovalcem spletne strani omogočila hitro deljenje informacij s prijatelji, ne glede na to, katero družbeno omrežje uporabljajo. Spodaj si bomo ogledali najbolj priljubljene storitve.

    Gumbi družbenih medijev Share Pluso

    O tem, kako lahko družbena omrežja pomagajo promovirati spletno stran in nanjo privabiti nove obiskovalce. Toda tokrat bi se rad premaknil od teorije k praksi in podrobneje spregovoril o tem, kako na svoje spletno mesto postaviti gumbe »Všeč mi je« iz priljubljenih družbenih omrežij, kot so: VKontakte, Facebook, Twitter, Odnoklassniki, MoiMir, Google+, QIP in Yandex.

    Kaj so "všečki" in kakšna je njihova korist?



    Vendar pa v internetnem slengu »všečki« pomenijo nekaj povsem drugega in izgledajo takole:



    Če je promet na vašem spletnem mestu vsaj 20 obiskov na dan, potem razmislite o umestitvi takih gumbov na svoje spletno mesto, ker:

    • »všečki« pritegnejo nove obiskovalce iz družbenih omrežij: z »všečkom« te ali one objave na vašem blogu lahko uporabnik o tem govori na svoji strani v družbenem omrežju;
    • lahko boste razumeli obiskovalce svojega spletnega mesta: z analizo člankov ali strani spletnega mesta, katerih število »všečkov« znatno presega druge strani na vašem spletnem mestu, boste razumeli, kaj je vašim obiskovalcem bolj všeč;
    • to bo spletno mesto promoviralo v iskalnikih: iskalniki so se že dolgo naučili komunicirati s socialnimi omrežji, zato "všečki" pustijo svoj pečat v SEO.

    Mislim, da so komplimenti o "všečkih" dovolj, da razumemo, kako koristno in pomembno je za spletno mesto. Zato lahko varno nadaljujete z navodili za namestitev.


    Hiter skok na navodila


    "Všeč mi je" iz VKontakte


    1. Pojdite na stran za povezavo pripomočka z vašim spletnim mestom.

    3. Prilagodite videz pripomočka po svojem okusu in pridobite že pripravljeno kodo:

    4. Kodo pripomočka je treba vstaviti v predloge strani spletnega mesta.

    »Všeč mi je« s Facebooka


    1. Pojdite na stran z nastavitvami gumba »Všeč mi je«.

    2. Konfigurirajte gradnik in kliknite gumb »Pridobi kodo«:

    3. V oknu, ki se odpre, kopirajte prejeto kodo in jo prilepite v predloge spletnega mesta.

    "Tweet" iz Twitterja


    1. Pojdite na .

    2. Izberite vrsto gumba:

    3. Prilagodite videz gumba:

    4. Kopirajte in prilepite dobljeno kodo v predloge:

    "Razred!" iz Odnoklassnikov



    In še lažje je dobiti gumb "Razred!" skupaj z gumbom »Všeč mi je« iz družbenih medijev. Omrežje "MyMir". Prav o tem bomo govorili v nadaljevanju.

    2 v 1: »Všeč mi je« iz MoyMir + »Razred« iz Odnoklassnikov


    1. Pojdite na stran za nastavitev pripomočkov »Všeč mi je« in »Kul!«. .

    2. Gradnik prilagodite svojemu okusu:

    3. Kopirajte in prilepite dobljeno kodo v predloge spletnega mesta:

    »+1« iz storitve Google+


    1. Pojdite na Stran z nastavitvami gumba »+1«..

    2. Prilagodite videz gumba:

    3. Kopirajte prejeto kodo in jo prilepite v predloge:

    Vse v enem: za lenuhe!


    Če ste preleni, da bi vsa socialna omrežja nastavili ločeno, lahko uporabite že pripravljene rešitve in skripte, ki omogočajo namestitev univerzalnega gumba z deljenjem (funkcija »povej prijateljem«) na vseh priljubljenih družbenih omrežjih. Upoštevajte, da tukaj ni močne povezave s spletnim mestom in da so takšni gumbi ustvarjeni bolj zaradi udobja kot zaradi učinka SEO.



    Pridobite kode gumbov in jih prilepite na svoje spletno mesto.

    Kam vstaviti prejete kode?

    Če želite na svoje spletno mesto postaviti gumbe »Všeč mi je«, se morate najprej odločiti, katere strani vašega spletnega mesta so najbolj donosne in jih je najbolje postaviti. Obstajajo naslednje možnosti za postavitev gumbov na spletno mesto:

    • domača stran;
    • vse strani spletnega mesta;
    • stran z objavo/gradivom.

    Ni vam treba znova izumljati kolesa in postavljati gumbov v objave na forumih, na straneh s kontaktnimi informacijami itd.: taki gumbi ne bodo všeč. Ko se odločite, kam boste vstavili gumbe, se prijavite v nadzorno ploščo svojega spletnega mesta na naslovu your-site.ucoz.ru/admin in pojdite na:

    • urejevalnik strani → upravljanje strani spletnega mesta → urejanje glavne strani spletnega mesta(če želite kode gumbov postaviti samo na glavno stran spletnega mesta);
    • vodenje oblikovanja → modul (neobvezno) → stran gradiva in komentarji k njemu(če želite postaviti gumbe »všeč mi je« za vsak material);
    • upravljanje oblikovanja → globalni blok "Na vrhu spletnega mesta"(če želite kodo postaviti na vse strani spletnega mesta).

    Prejete kode gumbov prilepite v eno od teh predlog in shranite spremembe. Oglejmo si to točko na konkretnem primeru - postavitev gumba "To je zanimivo!" poleg zapisa v našem uradnem blogu uCoz.