Počítače a moderné prístroje

Dobrý deň, milí čitatelia blogu. Na túto úlohu môžete samozrejme použiť plugin, ale nie je to také ťažké urobiť sami, a bude ich menej, najmä preto, že ich už pracujem dosť (pozri článok na uvedenom odkaze). Prevzal som z nich ikony sociálnych sietí, o ktorých som už dosť podrobne písal (dúfam, že Dimox proti tomu nebude namietať).

A považoval som to za vhodné aj pre Email.

Vytvorte sprite z tlačidiel a vložte Html kód na stránku

Po vytvorení všetkých potrebných skupín a stránok na sociálnych sieťach, čo znamená, že ste dostali všetky potrebné odkazy, môžete byť zmätení pridaním tlačidiel na stránku. Pre každú sociálnu sieť si samozrejme môžete v súlade s mojím príspevkom o vybrať vhodnú ikonu a v prípade potreby jej veľkosť zmenšiť na požadovanú veľkosť v a.

Ale to nie je najlepšia možnosť. prečo? Pretože na načítanie každého obrázka sociálnej siete bude na váš server odoslaná samostatná požiadavka. Ak máte tucet ikon, znamená to desať požiadaviek, ktoré akýmkoľvek spôsobom vytvoria dodatočné zaťaženie servera a . Takáto extravagancia nám nesedí, najmä keď už je to dávno.

Rozhodol som sa nevynájsť koleso (vytvoriť sprite), ale použil som to, ktoré vytvára konštruktor Share42 (odkaz na popis práce s ním je uvedený vyššie). V ňom si vyberiete tie sociálne siete, ktorých ikony potrebujete, a spolu s kódom dostanete CSS sprite, t.j. fyzicky jeden grafický súbor, ktorý bude obsahovať všetky potrebné ikony sociálnych sietí a odbery RSS kanála (a e-mailu, ak je to potrebné).

Vybral som štyri hlavné siete a pár ikon pre odbery noviniek s veľkosťou ikon 24 x 24 , takže môj sprite vyzerá takto ( , ale stále sa tam odčervoval, ale na tom nezáleží):

Teraz máme všetky ingrediencie – odkazy na skupiny alebo stránky sociálnych sietí a ikony na ich zobrazenie na webe. Zostáva len to všetko správne pripraviť, t.j. makeup. Môj blog používa WordPress, takže kód tlačidla vložím do jedného z . V mojom prípade sa volá sidebar.php. html kód výsledkom je veľmi jednoduchý:

No najzaujímavejšie. S pomocou určíme, ktorá oblasť nášho sprite sa na tomto konkrétnom mieste zobrazí ako pozadie (v našom prípade je toto pozadie umiestnené pod hypertextovým odkazom). Vysvetlenie, ako sa to deje, trvá veľmi dlho, preto si prečítajte článok na odkaze a všetko bude jasné (sú tam aj názorné príklady). Ak ste príliš leniví, potom len experimentujte s číslami, ktoré, ako ste si mohli všimnúť, nie sú márne násobky 24.

Áno, nahrajte súbor sprite cez FTP na vašu stránku a zadajte cestu k nemu na pozadí (). To je všetko. Ak to nevyjde, pozornejšie si prečítajte materiály na vyššie uvedených odkazoch a ak sa nepodarí vôbec nič, popíšte svoju situáciu v komentároch (podrobne - pre vloženie kódu ho nezabudnite priložiť do PHP tagy s hranatými zátvorkami).

Veľa šťastia! Uvidíme sa čoskoro na stránkach blogu

Možno vás bude zaujímať

V poslednej dobe každý druhý (ak nie prvý) zákazník v požiadavkách na rozvoj stránky žiada, aby ju určite prepojil so sociálnymi sieťami. „Sociálne“ tlačidlá na stránke sú nástrojom číslo 1 na prilákanie cieľového publika, distribúciu obsahu a PR vo všeobecnosti. A úplne zadarmo!

Sociálne siete poskytujú kódy pre svoje tlačidlá a widgety na umiestnenie na stránke a pripájajú pokyny na ich inštaláciu do redakčného systému. Každý CMS (operačné systémy) vám ich umožňuje nainštalovať, hlavnou vecou je harmonicky zapadnúť do dizajnu vášho webu.

Aké sú vlastnosti a funkcie?

Ak je vaša stránka zameraná na ľudí, ktorí komunikujú s populárnymi sociálnymi sieťami. siete, napríklad Vkontakte, Twitter, Instagramm, Facebook, Google+, Pinterest atď., a chcete ich všetky pokryť, potom, aby ste nenastavovali tlačidlá pre každú z nich samostatne, pretože sa môžu líšiť veľkosťou a dizajn, odporúčame využiť agregačné služby. Ide o jednoduché a pohodlné nástroje, ktoré návštevníkom stránok umožnia rýchlo zdieľať informácie so svojimi priateľmi bez ohľadu na to, ktorú sociálnu sieť používajú. Nižšie budeme analyzovať najobľúbenejšie služby.

Zdieľať tlačidlá sociálnych médií Pluso

Teraz existuje niekoľko spôsobov, ako pridať tlačidlá sociálnych sietí na stránku, je tu výber a poteší. Sociálne tlačidlá hrajú na stránke dôležitú úlohu, s ich pomocou, ako už mnohí vedia, môžete rýchlo repostovať akýkoľvek záznam na niektorú z vybraných sociálnych sietí. Sociálne tlačidlá pre web sú teraz umiestnené kdekoľvek a kdekoľvek, ale niekedy na nesprávnom mieste.

Sociálne tlačidlá pre web

Mnoho ľudí už vie, aké sú teraz sociálne siete vyspelé a aké je skvelé, ak má vaša stránka také tlačidlá, pomocou ktorých si môžete pridať svoj obľúbený príspevok alebo časť príspevku na svoju nástenku. Touto akciou nielen komentujete alebo preposielate správy, ale dávate aj dodatočný signál vyhľadávacím nástrojom.

Sen každého majiteľa stránky, ak všetky jeho príspevky čitatelia uverejnia na svojich stránkach v jednej zo sociálnych sietí. Teraz je tu predovšetkým dopyt po Vkontakte, Facebooku, Twitteri a Odnoklassniki. Pridal by som aj LiveJournal, liveinternet a Blogger. Je žiaduce pridať tieto tlačidlá na stránku pre úplné pohodlie používateľa.

Najmä Twitter si dnes zaslúži čoraz väčšiu pozornosť, s jeho pomocou sa vaše nové publikácie rýchlejšie objavia v indexe vyhľadávača.

Ak ste vlastníkom stránky, s najväčšou pravdepodobnosťou by ste mali mať účet naživo na internete alebo na LiveJournal. Aby sa do týchto služieb nepridávali zakaždým nové položky, prítomnosť ich tlačidiel šetrí čas. Okrem toho mnoho ľudí využíva tieto služby a možno bude chcieť prepísať váš záznam do svojho denníka.

Existuje niekoľko najlepších spôsobov, ako rýchlo pridať sociálne tlačidlá na stránku. Môžete to urobiť pomocou online služieb, ktoré vám s tým rýchlo a jednoducho pomôžu. Alebo priamo cez každú sociálnu sieť zvlášť. Tu má každý svoj vlastný výber. Predtým som mal tlačidlá pridávané samostatne cez každú sociálnu sieť, teraz som ich nainštaloval pomocou služby.

Existuje taká služba, je to tzv zdieľať42. Bolo o ňom napísaných veľa materiálov, aký je dobrý a ako ho používať. Dobré, ale pre bežného používateľa, ktorý tomu nič nerozumie, to bude ťažké zvládnuť.

Za takú malú okupáciu, kopírovanie priečinkov na hosting a následné kúpanie so štýlmi, to teraz už nejazdí. Existujú aj ďalšie možnosti, v ktorých musíte skopírovať a prilepiť už hotový kód bez akýchkoľvek ďalších priečinkov. Tak na túto službu zabudnite.

Pridajte len tie najzákladnejšie tlačidlá sociálnych médií, ktoré používa väčšina, nevyrezávajte desiatky nepotrebných zabudnutých tlačidiel.

Čo dnes môžete použiť na pridanie sociálnych tlačidiel na stránku:

  1. Obsluha podobná.
  2. Sociálne tlačidlá Yandex.
  3. Ručné pridávanie každej sociálnej siete zvlášť.
  4. Plus servis.
  5. Používanie pluginov pre WordPress (pre lenivých).

Pravdepodobne sa nemusíte miešať nikde inde, nemôžete nájsť lepšie spôsoby. Každá z týchto možností je dobrá svojím vlastným spôsobom. Ak poznáte pohodlnejší alebo atraktívnejší spôsob, napíšte do komentárov.

Tlačidlá sociálnych sietí musia byť vložené na koniec každého článku, aby po prečítaní mohol návštevník webu váš príspevok prípadne znova odoslať. Nemal by ich hľadať niekde na konci stránky. Najoptimálnejšie miesta, kde by sa takéto tlačidlá mali umiestniť, sú podľa mňa na bočnom paneli a hneď na konci každého záznamu.

Uptolike

Momentálne sám túto službu využívam, zapáčila sa mi. Okrem pohodlia má služba uptolike niekoľko privilégií oproti iným svojho druhu.

  • Široký výber medzi tlačidlami sociálnych médií;
  • Tlačidlá prispôsobené pre mobilné zariadenia;
  • Schopnosť citovať akúkoľvek časť textu v sociálnej sieti;
  • Navrch môžete pridať tlačidlo;
  • Schopnosť pridať vyskakovacie okno na predplatné do skupiny Vkontakte;
  • Výber veľkosti ikon;
  • Výber štýlu ikon pre stránku;
  • Pridať efekt vznášania;
  • Zmeniť pozadie tlačidla, farbu textu, pozadie počítadla;
  • Zvýšte alebo znížte text v počítadle.

Na jej používanie stačia privilégiá oproti iným takýmto službám. V tomto prípade je pridaný iba malý kód vo forme skriptu a pár riadkov so štýlmi. Zároveň neexistuje žiadny cudzí odkaz, skontroloval som to prostredníctvom služby odchádzajúcich odkazov. Ak sa mýlim, môžete ma opraviť.

Okrem toho, čo iné môže služba uptolike robiť.

Najdôležitejšie nastavenia Vyberte, ktoré sociálne tlačidlá pre web chcete vidieť. V prípade potreby môžete otvoriť zoznam a vybrať niekoľko ďalších z väčšiny. Začiarknite políčko pre podporu. Potom sa na mobilných telefónoch budú tlačidlá sociálnych sietí vždy zobrazovať v spodnej časti obrazovky.

Vyberte vodorovnú polohu tlačidiel, veľkosť a štýl. Ozdobte, ako sa vám páči, a pridajte efekt vznášania. Nič viac netreba robiť. Ak chcete vygenerovať kód počítadla, musíte zadať adresu webovej stránky a poštovú schránku. Hneď na to sa objaví kód na vloženie sociálnych tlačidiel na stránku.

Ak máte web WordPress, otvorte súbor single.php a vložte hotový kód hneď za koniec obsahu stránky. Obnovte stránku a uvidíte, čo sa stane. Nie je nič ťažké.

Yandex

Vyberte ikony požadovaných služieb. Twitter je len vo forme ikon, bez počítadiel. Vyberieme vzhľad blokov a nižšie bude pripravený kód na vloženie. Ako už bolo spomenuté, Yandex nepridáva nič iné, všetko je skromné ​​a vkusné.

Metóda manuálneho pridávania

Pri tejto metóde musíte otvoriť každú sociálnu sieť samostatne a nakonfigurovať každé tlačidlo repost samostatne. Ak chcete pridať tlačidlo Facebook, musíte prejsť tu. Pre spolužiakov a môj svet je potrebné doplniť údaje. Pre twitter sa všetko deje na . Ak chcete pridať tlačidlo Vkontakte, prejdite na táto strana .

Budete mať hotový kód len zo sociálnych sietí, bez akýchkoľvek extra skriptov. Pravdepodobne najlepší spôsob, ako pridať tlačidlá sociálnych médií na webovú stránku. Problém nastáva v tom, že je potrebné vystrihnúť každé tlačidlo zvlášť, potom všetko prilepiť na jedno miesto a pomocou css štýlov to zarovnať do jedného stĺpca. Ak s tým nemáte žiadne problémy, môžete to skúsiť.

V kontakte s

Ak chcete pridať tlačidlo Vkontakte, kliknite na Pripojiť stránky a miniaplikácie, nižšie bude úplný zoznam všetkých možných doplnkov. Nechýba ani možnosť pridávať komentáre na stránku, písať na stenu, pridávať svoju skupinu, odporúčania, ankety, odoberať autora a zverejňovať odkazy. V našom prípade vyberte možnosť Publikovať odkazy.

Nie je to nič zložité, vyberieme štýl tlačidla (s počítadlom alebo bez), napíšeme text na tlačidlo, možnosť loga a v spodnej časti bude hotový embed kód. Sám som použil tento manuálny spôsob pridávania, no momentálne skúšam službu tretej strany. Poďme sa pozrieť čo sa stalo. Ak mi nebude vyhovovať, okamžite sa vrátim k manuálnemu spôsobu.

pluso

Ďalším spôsobom, ako pridať tlačidlá na stránku, je s Služba Pluso. Služba tiež nie je zlá, mnohí si z nej všimli tlačidlá. Výber možností dizajnu je veľký, okrem amatérskeho existujú veľké veľkosti obrázkov. Schopnosť pridávať siete nie je v porovnaní s inými podobnými službami v žiadnom prípade horšia. Inštalácia nevyžaduje žiadne súbory, iba kód.

Vyberte si akýkoľvek štýl dizajnu a pridajte potrebné služby. O niečo nižšie sa zobrazí hotová ukážka, ako to všetko bude na stránke vyzerať. Ikony je možné nastaviť na veľké, stredné alebo malé. Tiež štvorcové ikony pre web alebo okrúhle, v jednom riadku alebo v dvoch riadkoch, horizontálne alebo vertikálne. S počítadlom alebo bez neho, bez pozadia alebo nastavte pozadie tak, aby zodpovedalo dizajnu vašej webovej stránky.

Po všetkých týchto krokoch bude nižšie pripravený kód na vloženie na stránku. Ak potrebujete vložiť na hlavnú stránku, hrabeme v súbore index.php, ak vo všetkých vašich príspevkoch, pridáme kód do súboru single.php hneď po skončení príspevku.

WordPress

Ak nerozumiete ničomu v tomto kóde, čo je potrebné kam skopírovať a ako to všetko funguje, existuje cesta von. Ak máte motor WordPress, môžete si nainštalovať doplnok, ktorý vám poskytne tlačidlá sociálnych médií. Dnes existuje len veľké množstvo takýchto pluginov. Prejdite na panel správcu - Pluginy. Do vyhľadávania doplnkov môžete okamžite napísať „sociálne tlačidlá“, „sociálne“ alebo „VKontakte“. Som si istý, že niečo nájdeš.

Medzi väčšinou takýchto podobných doplnkov pre WordPress, pri pohľade na hodnotenie, sú tieto najčastejšie:

  1. Tlačidlá zdieľania na sociálnych sieťach pre WordPress.
  2. sociálna.
  3. Social Media Feather – ľahké tlačidlá na zdieľanie a sledovanie na sociálnych sieťach.

V skutočnosti existuje veľa takýchto pluginov, musíte si ich nainštalovať a utriediť si, ktorý sa vám najviac páči, funguje správne, čo zobrazuje a ako si ho môžete prispôsobiť. Pozrime sa na príklad prvého takéhoto pluginu Social Share Buttons pre WordPress.

Samotný plugin je v ruštine, s tým nebudú žiadne problémy. Po inštalácii sa v ponuke vľavo objaví nové tlačidlo „Share Buttons“. V hlavných nastaveniach umiestnime logo stránky a napíšeme text pred sociálne tlačidlá.

Nezabudnite zapnúť generovanie metadát, názov a popis stránky budú zahrnuté. Zarovnajte tlačidlá vodorovne a vyberte, kde budú. Vyberáme len v príspevkoch. Voliteľne môžete vylúčiť potrebné stránky. Úplne dole musíte zadať prezývku v tritteri.

Na ďalšej karte Nastavenia zdieľania vyberte štýl tlačidiel. Nižšie môžete zapnúť alebo vypnúť zbytočné sociálne siete a pridať odrážky pre celý blok nad alebo pod. Nemusíte nikam vkladať žiadny kód navyše, plugin urobí všetko za vás.

Je na vás, akú metódu použijete. Pridajte ikony sociálnych médií cez uptolike, Pluso alebo cez Yandex. Doplnok na WordPress by ste nemali okamžite inštalovať, skúste všetko urobiť ručne alebo pomocou služby.

Ak poznáte nejakú inú dobrú službu alebo spôsob, ako pridať sociálne tlačidlá na stránku, budem vďačný za komentár.

Prehľad domácich dizajnérov a skriptov pre tlačidlá sociálnych sietí pre webové stránky, ako aj zahraničné analógy. Stručne, jasne a jasne.

Konštruktéri tlačidiel webových stránok sociálnych médií

2. Jednoduchý spôsob, ako získať odkazy na stránku - QIP.RU
Umiestnite na svoju stránku tlačidlo a poskytnite návštevníkom možnosť pridať obsah stránky, ktorý sa im páči, do záložiek, blogov a sociálnych sietí. Tri kroky: kde rozložiť tlačidlo (webová stránka, Blogger alebo WordPress), štýl tlačidla (hotové možnosti) a získať tlačidlo.

3. Tlačidlá pre pridávanie obsahu na sociálne siete - Pluso
Umiestnite tlačidlá a umožnite návštevníkom zdieľať svoje obľúbené stránky na sociálnych sieťach, ako aj tlačiť, posielať e-maily a pridávať záložky.

4. Služba sociálnej aktivity - UpToLike
Prispôsobené tlačidlá sociálnych médií s možnosťou nastavenia farby, tvaru, veľkosti a špeciálnych efektov. Ďalšími funkciami sú widget na zdieľanie obrázkov PicShare, funkcia „Quote“ a prispôsobená funkcia Follow.

5. Jedno tlačidlo! - pre všetky záložky a sociálne siete
Vyberte tlačidlo zobrazenia. Kde bude tlačidlo nainštalované: web, Blogger alebo WordPress. Pridajte tlačidlo.

Skripty tlačidiel sociálnych sietí pre web

1. Krásne sociálne tlačidlá pre stránku - goodshare.js
Zobrazte tlačidlá na takmer akomkoľvek zariadení. Čistý kód. Stručná dokumentácia. SEO priateľský.

2. Skriptovacie tlačidlá pre sociálne záložky a siete - Share42
Vyberte veľkosť a označte ikony služieb, ktoré chcete na stránke používať. Vyberte požadované možnosti. Pozrite sa, ako to bude vyzerať a / alebo si stiahnite hotový skript. Nainštalujte skript na web WordPress, Drupal atď.

3. Krásne sociálne tlačidlá Páči sa mi pomocou jQuery – Sociálne Páčia sa mi
Skript tlačidla Páči sa mi s počítadlami v rovnakom štýle pre sociálne siete: Facebook, Twitter, VKontakte, Odnoklassniki, Môj svet, Google+ a Pinterest.

Zahraničné analógy tlačidiel sociálnych sietí pre web

1. Tlačidlá zdieľania - AddThis
Tlačidlá zdieľania vám pomôžu zvýšiť návštevnosť stránky prilákaním návštevníkov z iných zdrojov a sociálnych sietí prostredníctvom distribuovaného obsahu.

4. Sociálne zdieľanie - Po.st
Získajte viac zo zdieľania na sociálnych sieťach. Služba návštevníkom uľahčí proces zdieľania na sociálnych sieťach, čím sa zvýši organická návštevnosť stránky.

5. Tlačidlá zdieľania pre akúkoľvek webovú stránku – AddToAny
Získajte kód tlačidiel sociálnych médií pre ľubovoľnú stránku. Vyberte si typ a štýl tlačidiel, zadajte e-mail a ďalšie možnosti alebo si vyberte jednu z platforiem: WordPress, Drupal, Tumblr, Joomla, Elgg, WordPress.com, Blogger, TypePad alebo FeedFlare. Získajte kód tlačidla.

o 8:00 Upraviť správu 6 komentárov

Dobrý deň milí priatelia. Dnešný článok bude venovaný vytvoreniu bloku sociálnych tlačidiel bez služieb a pluginov. A tento blok bude obsahovať aj tlačidlá, ktoré umožnia návštevníkom stránky vytlačiť si stránku, poslať odkaz na článok e-mailom a uložiť si článok do záložiek. Takéto tlačidlá dnes nájdeme takmer na každej stránke. Až teraz sa implementujú pomocou služieb alebo pluginov. A ukážem vám, ako to urobiť sami.

Služby, ktoré som používal na klientskych stránkach a na mojom blogu – a . Tieto služby uľahčujú implementáciu úlohy.

Aká je výhoda vlastných sociálnych tlačidiel oproti službám a pluginom

  1. Samozrejme, neodškriepiteľným faktorom je rýchlosť načítania stránky. Čiže napríklad služba PLUSO, ktorú na blogu využívam, v tom lepšom prípade pridá k záťaži 633 milisekúnd.

A v tomto bloku sa používajú iba potrebné obrázky sociálnych tlačidiel, kombinované v . Všetky štýly sú obmedzené na minimum. Plus jednoduchý html framework.

  1. Spôsob, ktorý navrhujem, neobsahuje žiadne externé odkazy. Nie, existujú odkazy, ale všetky budú ako interné odkazy. Ak chcete, vždy ich môžete mať. A potom ich už vôbec neuvidíte.

  1. Veľmi jednoduchá inštalácia. Stačí vložiť html kód bloku do zdrojového kódu stránky, nahrať sprite, pridať css štýly a inštalácia je hotová. Musíte len opraviť cestu k súboru obrázka tlačidla.
  2. Táto položka nie je skôr ani plus, ani mínus voči vlastnému bloku sociálnych tlačidiel. Trik je v tom, že jeho vlastný blok nemá počítadlo kliknutí na tlačidlo. A to sa dá považovať za mínus. Ale na druhej strane je možné nasadiť každé tlačidlo a budete presne vedieť, koľkokrát vaši návštevníci klikli na tlačidlá a zdieľali vaše články na sociálnych sieťach.
  3. Štatistiky zhromaždené službami na vašej stránke sa už nebudú prenášať na tretie strany.

Vloženie bloku sociálnych tlačidiel do zdrojového kódu

Budeme uvažovať o klasickej verzii, keď sú tlačidlá umiestnené za článkom.

Môžete to urobiť buď otvorením súboru zodpovedného za zobrazovanie článkov (single.php) a pridaním bloku sociálnych tlačidiel do zdrojového kódu. Alternatívne to možno urobiť prostredníctvom súboru funkcií témy (functions.php).

Ukážem obe možnosti a vy si vyberiete tú, ktorá vám vyhovuje.

Vloženie bloku do zdrojového kódu single.php

Upozornenie: Pred pokračovaním vytvorte záložnú kópiu súboru single.php!

Otvorenie panela správcu WordPress "vzhľad""Editor""Jeden záznam (single.php)".

V zdrojovom kóde hľadajte miesto, kde končí výstup článku a začínajú komentáre alebo stránkovanie. Práve na toto miesto budete musieť vložiť html kód bloku sociálnych tlačidiel.

Pozorne si pozrite snímku obrazovky, zamerajte sa na kódy zodpovedné za výstup článkua komentáre. A vložte kód nižšie.

Samozrejme, vo vašich šablónach budú nejaké rozdiely, ale určite na to prídete, nie je na tom nič zložité. A okrem toho máte záložnú kópiu, nie je sa čoho báť.

A tu je html kód bloku sociálnych tlačidiel:

Vysvetlenia kódov: je to jeden div s triedou .share, ktorý obsahuje odkazy na sociálne siete. Odkaz sa otvorí v samostatnom vyskakovacom okne, za čo je zodpovedná táto funkcia onClick=window.open. Nahradenie odkazu na článok sa vykonáva pomocou tohto kódu. Každý odkaz má svoju triedu, cez ktorú je priradený obrázok tlačidla.

Tým sa dokončí vkladanie cez zdrojový kód. A potom musíte pridať štýly css.

Vkladanie bloku do zdrojového kódu single.php cez funkcie témy

Upozornenie: skôr ako začnete, vytvorte si záložnú kópiu svojho súboru functions.php!

Ak chcete použiť túto možnosť, musíte otvoriť súbor functions.php a pridať tento kód na úplný koniec:

/* Vložiť sociálne tlačidlá */ add_action("comments_template","soc_button"); funkcia soc_button() ( ?> A buďte opatrní, po vložení kódu by ste nemali mať medzery ani iné znaky. Alebo len zatvorte php kód?>. V opačnom prípade stránka prestane fungovať.

Vysvetlenia kódov: miesto, kde budú umiestnené tlačidlá sociálnych médií, je určené kľúčom API comments_template . Tento kľúč určuje miesto pred komentármi. Samotný kód sociálneho tlačidla je uzavretý v zadných značkách na otváranie a zatváranie php. V kóde som ich označil červenou farbou. toto je celý trik vkladania html kódu do php cez funkcie témy.

Na tejto a tejto metóde je koniec, prejdime k nahrávaniu obrázkov na stránku.

Nahrávanie obrázkov tlačidiel na server

Napríklad som pripravil niekoľko spritov s obrázkami sociálnych tlačidiel. Môžete si ich stiahnuť.

Sprite, ktorý používam ako príklad, má iba 3,97 kb a obsahuje iba potrebné tlačidlá. A keďže ide o sprite, potom je len jedna požiadavka na databázu, a nie pre každé tlačidlo zvlášť.

Stiahnite si obrázky alebo si pripravte vlastné a nahrajte ich na svoju stránku. Myslím, že by to nemal byť problém. Ďalej bude potrebný odkaz na tohto sprite na navrhovanie tlačidiel prostredníctvom štýlov css.

Vrátane štýlov CSS

Samozrejme, tento krok sa dá urobiť úplne ako prvý, ale radšej najprv urobím všetky zložité technické práce a potom pristúpim k pekným maličkostiam so štýlmi css.

Otvorte teda súbor style.css zodpovedný za dizajn vašej stránky. A prilepte tieto štýly:

Share a ( display: inline-block; vertical-align: inherit; margin: 5px 0 0 2px; padding: 0px; font- size: 0px; width: 40px; height: 40px; background: url("http://test ..png ") no-repeat scroll 0px 0px transparent;) .share a.vkontakte ( background: url("http://test..png ") no-repeat scroll -168px 0px transparent; ) .share a.google ( background: url("http://test..png ") no-repeat scroll -252px 0px transparent; ) .share a.livejournal ( background: url("http://test..png ") no-repeat scroll -336px 0px transparent; ) .share a.twitter ( background: url("http://test..png ") no-repeat scroll -42px 0px transparent; ) .share a.mail ( background: url("http ://test..png ") rolovanie bez opakovania -294px 0px transparentné; ) .share a.odnoklassniki (pozadie: url("http://test..png ") rolovanie bez opakovania -126px 0px transparentné; ) .share a.pinterest ( background: url("http://test..png") bez opakovaného posúvania -210px 0px transparentné; ) .share a.liveinternet ( background: url("http://test..png) ") no-repeat scroll -378px 0px transparent; ) .share a.evernote ( background: url("http://test..png") bez opakovaného posúvania -420px 0px transparentné; ) .share a.bookmark ( background: url("http://test.. png ") no-repeat scroll -462px 0px transparent; ) .share a.email ( background: url("http://test..png")) no-repeat scroll -504px 0px transparent; ) .share a.print ( background: url("http://test..png ") rolovanie bez opakovania -546px 0px transparentné; ) .share a.digg ( background: url("http://test..png ") rolovanie bez opakovania -588px 0px transparentné; ) .share a.spring (pozadie: url("http://test..png") bez opakovaného posúvania -630px 0px transparentné; )

Vysvetlenia kódov: trieda .share definuje všeobecný vzhľad bloku, veľkosť každého tlačidla, výplň a nastavuje jednotné pozadie. Potom má každý odkaz svoju vlastnú triedu a každému takémuto odkazu je prostredníctvom vlastnosti pozadia priradený vzhľad tlačidla. Tlačidlá sú vykreslené ako sprite css a každé tlačidlo má šírku 40 pixelov a výšku 40 pixelov, pričom medzi nimi je odsadenie 2 pixelov, čo vám umožňuje presne definovať obrázok pre každé tlačidlo. To znamená, že prvé tlačidlo je špecifikované ako 0 a druhé ako 42 atď. V kóde sú tieto hodnoty označené oranžovou farbou. Odkaz na sprite je tiež zvýraznený oranžovou farbou, zmeníte ho na cestu k svojmu spriteovi.

Tým sa dokončí celý proces vytvárania bloku sociálnych tlačidiel. Môžete bezpečne pokračovať v kontrole.

A mám aj videonávod, v ktorom je celý proces znázornený vizuálne, tyč ukazuje činnosť samotných tlačidiel. Sledujte a implementujte na svojich webových stránkach a blogoch.


Teraz je to všetko. S úlohou sa vyrovnal. Prajem vám všetkým veľa šťastia a vidíme sa pri nových článkoch a videonávodoch.

Ak si všimnete chybu, vyberte časť textu a stlačte Ctrl + Enter
ZDIEĽAM:
Počítače a moderné prístroje