Skript ilusatest sotsiaalmeedia nuppudest. Oma sotsiaalsed nupud. Nupu piltide üleslaadimine serverisse

Kuid sellel skriptil on üks puudus - skript, mis käsitles brauseri käitumist, kui ühel nupul klõpsati. Siin on osa sellest, milles näete ise kahte probleemi:

Vkontakte: funktsioon (poort, pealkiri, pimg, tekst) (url \u003d "http://vkontakte.ru/share.php?"; URL + \u003d "url \u003d" + kodeeridaURIComponent (poortima); url + \u003d "& title \u003d "(! LANG: + encodeURICkomponent (alapealkiri); URL + \u003d"&description=" + encodeURIComponent(text); url += "&image=" + encodeURIComponent(pimg); url += "&noparse=true"; Share.popup(url); }, !}

Esimene probleem on väike ja paljud võivad mulle öelda: „Hei, kutt kirjutas selle 2012. aastal! Muuda lihtsalt joont ja kõik. ” Ja olen teiega nõus, et saate lihtsalt muutudavkontakte.ru saidile vk.com ja lihtsalt sulgege küsimus.

Teiseks tuleb iga teenuse jaoks kirjutada uus plokk. Mis pole ka eriti problemaatiline, piisab, kui kopeerida-kleepida ja eemaldada / lisada vajalikud parameetrid.

Aga mida see stsenaarium lõpuks teeb? See loob lihtsalt hüpikakna, mis edastab loetletud parameetrid. Need on read:

Hüpikaken: funktsioon (url) (window.open (url, "", "tööriistariba \u003d 0, olek \u003d 0, laius \u003d 626, kõrgus \u003d 436");)

Täpselt selle skripti tööd muutsin veidi. Kuid sellest allpool. Vaatame nuppe ennast ja nende toimimist.

Esiteks peab meil jagamisnuppude jaoks olema mitu muutujat:

• $ Pealkiri - lehe pealkiri (pealkiri)
• $ Kirjeldus - lehe kirjeldus
• $ ImageUrl - tee lehepildini
• $ Link - otselink lehele

Nimetasin nad tinglikult nii, et oleks selgelt selge, kui palju neid on vaja ja mis nad on. Kuidas neid teie saidil võetakse - käsitsi või automaatselt -, sõltub ainult rakendusest, milles see käivitatakse. Näiteks WordPressi CMS-is näeb see välja järgmine:

• $ Pealkiri - see on
• $ Kirjeldus —
• $ ImageUrl —
• $ Link —

Nüüd lisame vajalikku kohta järgmise koodi, kus asendame muutujate asemel vajalikud väärtused (vajadusel):

See on kõik! Töö tulemust näete selle artikli lõpus.

Ülevaade kodumaistest konstruktoritest ja veebisaitide sotsiaalmeedia nuppude skriptidest ning välismaistest analoogidest. Lühidalt, arusaadavalt ja selgelt.

Veebisaidi sotsiaalmeedia nuppude kujundajad

2. Lihtne viis linkide saamiseks saidile - QIP.RU
Asetage nupp saidile ja andke külastajatele võimalus lisada oma lemmik saidimaterjalid järjehoidjatesse, ajaveebidesse ja suhtlusvõrgustikesse. Kolm sammu: kuhu nupp üles märkida (sait, Blogger või WordPress), nuppude stiil (valmisvalikud) ja nupp kätte saada.

3. Nupud sisu lisamiseks sotsiaalvõrgustikesse - Pluso
Asetage nupud ja andke külastajatele võimalus jagada neile meeldivaid lehti suhtlusvõrgustikes, samuti printida, saata e-kirju ja lisada järjehoidjaid.

4. Ühiskondliku tegevuse teenus - UpToLike
Kohandatud sotsiaalmeedia nupud, millega saab määrata värvi, kuju, suuruse ja eriefekte. Lisavõimalused on PicShare'i pildijagamise vidin, funktsioon Quote ja kohandatud funktsioon After.

5. Üks nupp! - kõigi järjehoidjate ja suhtlusvõrgustike teenuste jaoks
Valige nupp liik. Kuhu nupp installitakse: veebisait, Blogger või WordPress. Lisage nupp.

Selle saidi sotsiaalmeedia nuppude skriptid

1. Ilusad sotsiaalsed nupud saidi jaoks - goodshare.js
Kuva nupud peaaegu igas seadmes. Puhas kood. Lühidokumentatsioon. SEO sõbralik.

2. Sotsiaalsete järjehoidjate ja võrgustike skriptinupud - jagamine42
Valige saidil kasutatavate teenuste suurus ja märkige nende ikoonid. Valige soovitud valikud. Vaadake, kuidas see välja näeb, ja / või laadige alla valmis skript. Installige skript oma WordPressi saidile, Drupali jms.

3. Ilus sotsiaalmeedia nagu nupud, mis kasutavad jQuery - Social Likes
Skript "like" nuppudest, millel on samas stiilis loendurid sotsiaalvõrgustike jaoks: Facebook, Twitter, VKontakte, Odnoklassniki, My World, Google+ ja Pinterest.

Sotsiaalmeedia nuppude välismaised analoogid veebisaidi jaoks

1. Jaga nuppe - AddThis
Nuppude jagamine aitab teil oma saidi vaatajaskonda suurendada, meelitades hajutatud sisu kaudu külastajaid muudest ressurssidest ja sotsiaalsetest võrgustikest.

4. Sotsiaalne jagamine - Po.st
Saage rohkem väärtust sotsiaalmeedia jagamisest. Teenus hõlbustab külastajate suhtlusvõrgustikes jagamist, mis suurendab saidi orgaanilist liiklust.

5. Jaga nuppe mis tahes veebisaidi jaoks - AddToAny
Hankige sotsiaalmeedia nuppude kood mis tahes veebisaidi jaoks. Valige nupu tüüp ja stiil, määrake e-post ja muud suvandid või valige üks platvormidest: WordPress, Drupal, Tumblr, Joomla, Elgg, WordPress.com, Blogger, TypePad või FeedFlare. Hankige nupu kood.

Hiljuti palub iga teine \u200b\u200b(kui mitte esimene) klient saidi arendamise nõuetes kindlasti linkida seda sotsiaalsete võrgustikega. Saidi nupud "Sotsiaalsed" on number üks tööriist sihtrühma meelitamiseks, sisu levitamiseks ja üldiseks suhtekorralduseks. Ja see on täiesti tasuta!

Suhtlusvõrgustikud pakuvad koode oma nuppude ja vidinate jaoks saidile paigutamiseks ning lisavad juhised nende installimiseks sisuhaldussüsteemi. Mis tahes CMS (opsüsteemid) võimaldab teil neid installida, peamine on nende harmooniline sobitamine oma saidi kujundusega.

Millised on funktsioonid ja funktsioonid?

Kui teie sait on suunatud inimestele, kes suhtlevad populaarse suhtlusringkonnaga. võrgud, näiteks Vkontakte, Twitter, Instagramm, Facebook, Google+, Pinterest jne, ja soovite need kõik katta, et mitte installida nende kõigi nuppe eraldi, kuna need võivad erineda suuruse ja kujundamisel soovitame kasutada agregatsiooniteenuseid. Need on lihtsad ja mugavad tööriistad, mis võimaldavad saidi külastajatel teavet kiiresti oma sõpradega jagada, olenemata sellest, millist suhtlusvõrgustikku nad kasutavad. Allpool analüüsime kõige populaarsemaid teenuseid.

Sotsiaalmeedia nupud jagavad Plusot

"Miks teda vaja on?" - te küsite. Tõenäoliselt üritan ajaga kaasas käia - oleme kodanlusest maha jäänud ja nende veebisaidi reklaamimine erineb mõnevõrra meie praegusest tegelikkusest.

Kui vaatate burzhuneti ajaveebe, siis peaaegu kõigil neist on erinevad hõljuvad paneelid, mis võimaldavad teil populaarseimatesse suhtlusvõrgustikesse ja järjehoidjatesse lisada artikliteate. Kodanlikel on linkide ostmisega edasi liikumine üsna keeruline ja sotsiaalsete signaalide tähtsus on hakanud uskumatult kasvama.

Paneel võimaldab teil suurendada artiklite jagamise arvu ja seega mõjutada. Noh, kuna meid ootab midagi sarnast, oleks õige sündmustest veidi ette jõuda.

Miks vajate paneeli Share42, selle eeliseid

Tahtsin, et nende nelja suhtlusvõrgustiku jaoks oleks paneel nuppudega, mis on Venemaa Interneti jaoks kõige asjakohasemad. Võimalik, et sotsiaalsed signaalid meie riigis pole nad veel nii kõikvõimsad kui kodanluses, sest asjakohase valiku läbiviimiseks pole need lihtsalt veel piisavad.

Kuid nüüd on parem hakata neid koguma ja olema täielikult relvastatud, kui globaalne armagediaan tuleb Runetti meie väärastunud arusaamade pärast - mõju märkimisväärne vähenemine ja linkidega manipuleerimise karmim karistamine.

Üldiselt sattusin Google'is erinevate päringute sisestamisel paneeli sobiva versiooni otsimisel Dimox.name veebisaidile, kuid kui nägin seal ilusat paneeli, ei pidanud ma vajalikuks otsida selle installimine oma ressursile.

Ma tean lihtsalt, et ta teeb selliseid asju ise (ilma pistikprogrammideta), kuid täna ei tahtnud ma tõesti nüansidesse ja seadistustesse süveneda. Tahtsin võtta paar tükki koodi ja saada suurepärase, esteetilisest vaatepunktist ja tööversiooni hõljuvad sotsiaalmeedia nupud.

Siis komistasin Share42 teenuse otsa ja nähes seal samu sotsiaalmeedia nuppe, olin pisut üllatunud - Dimox kasutab tembeldamist. See on umbes selline, nagu osav kingsepp läheks tarbekaupadele. Pärast veidi netis kaevamist sattusin aga sinna, kus ta kirjutab tasuta valiku, seadistamise ja muutmise teenuse käivitamisest. valmis skriptikoodi hankimine sotsiaalsete nuppude jaoks.

Väsinud saidi nuppude loomisel abi paluma, avas ta eraldi projekti, mis on minu arvates nüüd parim kõigist turul pakutavatest pakkumistest. Lubage mul need lihtsalt loetleda plussidsee jäi mulle silma:

Nüüd miinustest:

1. Teil peab olema vähemalt elementaarne arusaam ja. Ma ei usu, et te kohe minu publikatsioone lugema tormaksite, kuid siiski loodan teie kavatsusele seda tulevikus teha (lõppude lõpuks proovisin, kirjutasin ja nende artiklite ilmumine põhjustas vaid kiire väljavoolu tellijad - see on kurb).

Samuti peate vähemalt ette kujutama, kuidas teie kasutatav on paigutatud. Näiteks ei pea te koodi sisse kaevama - saate seda kasutada (kuigi ma pole selle skripti jaoks proovinud).

Kui puudused pole teie jaoks olulised (või olete tõe otsimisel valmis kohapeal trampima) ja eelised on märkimisväärsed, siis võite seda artiklit edasi lugeda. Mida nimetatakse - ärge vahetage. Tutvustan teile Share42 loodud sotsiaalmeedia nupuriba väga lihtsat seadistamist ja vaadet ning selle sisselülitamist. Ära süüdista mind, kuid just see mootor töötab minu ajaveebis.

Share42 seadistamine ja saidile skripti installimine

Viskasin selle kausta kataloogi WordPressi pistikprogrammidega, nii et viisardi neljandas etapis pidin määrama selle täpse tee:

Ja ka mina pidin WordPressi ette linnukese panema, sest just seda mootorit minu blogi kasutab. Kõik, kui jagamise seaded on tehtud, jääb ainult viisardi viiendas ja kuuendas etapis soovitatud HTML- ja CSS-koodi sisestamine. Tegelikult tekivad just siin koolitamata kasutajatel tõsised probleemid.

Pange tähele, et selle koodi sisu muutub koheselt, kui muudate oma seadeid (Ajax on ilmselt suurepärane ja kohutav). Seetõttu peate vertikaalse ujuva riba valimisel sisestama ühe CSS-koodi kaks tükki (horisontaalse riba valimisel). Kuid need on kõik detailid, ehkki väga muljetavaldavad ja meeldivad (au Dimoksile).

Räägime kõigepealt lihtsast - cSS-koodi sisestamine... Kopeerige reeglijupp või kaks ja leidke kaskaadstiililehe fail, mida teie mall või nahk kasutab.

WordPressis nimetatakse seda tavaliselt Style.css-ks ja see asub teie kasutatava teema kaustas (/ wp-content / themes / theme name). Joomlas peate otsima stiilifaili kaustast, kus on praegu kasutatav mall (/ templates / template name)

Te lihtsalt avate selle faili näiteks redigeerimiseks ja lisate selle lõpus oma kopeeritud stiilikoodi fragmendid (kleepime HTML-koodi mujale). Salvestage muudatused ja ärge unustage Filezilasse minnes neid muudatusi rakendada, nõustudes hüpikpakkumisega.

Noh, nüüd on aeg tegeleda kolme reaga HTML-i skripti kood Share42... Autor soovitab need lisada artiklite ette või järele. WordPressis pole see lihtne, kuid väga lihtne. Avage redigeerimiseks fail single.php oma teemaga kaustast (pidage meeles, et see elab aadressil / wp-content / themes / WordPressi teema nimi).

Koodi saate kleepida kohe artiklite järele. Selleks leidke funktsioon funktsiooniga_sisu rida ja sisestage soovitatud fragment näiteks selle järele näiteks: