Postup pro vytvoření tlačítka VKontakte je jednoduchý, ale aby widget VK rád fungoval správně, musí být splněny všechny požadavky. Všechny další pokyny budeme dodržovat na základě skutečnosti, že máte účet VK a jste k němu přihlášeni.
Vytvoření aplikaceNejprve přejděte na odkaz „Vývojáři“ (umístěný ve spodní části rozhraní) a vyberte kartu „Moje aplikace“. Pokud jste ještě nevytvořili widgety VK, bude seznam aplikací prázdný. Musíte vytvořit něco nového. To lze provést kliknutím na odkaz „Vytvořit aplikaci“.
Po vytvoření aplikace musíte potvrdit právo ji spravovat. To lze provést prostřednictvím pětimístného SMS kódu nebo prostřednictvím zařízení propojeného s vaším účtem. Po dokončení potvrzení přejděte do nastavení aplikace a povolte ji. Tím jsou dokončeny manipulace s aplikací.
Otevřete kartu „Dokumentace“ a vyberte podsekci „Weby a widgety“. V bloku „Widgety pro web“ vyberte požadovaný widget – „To se mi líbí“.
Ve formuláři, který se otevře, vyberte naši aplikaci, možnost tlačítka a jeho design. Vezměme vkládací kód z textového bloku.
Umístění widgetu do šablony KotontiOtevřeme šablonu header.tpl a do bloku head umístíme kód, který vypadá asi takto:
VK.init((apiId: 4752432, pouze widgety: true));
Tam, kde potřebujete umístit samotné tlačítko like, například do šablony page.tpl, přidejte kód:
VK.Widgets.Like("vk_like", (typ: "mini"));
Dobrý den, milí čtenáři tohoto blogu! Pokračujeme ve studiu sociálních sítí jako objektů propagace SMO a CMM. Nyní je v řadě řada článků, ve kterých se pokusím odhalit všechny detaily instalace tlačítek sociálních sítí. Předchozí materiál byl věnován tomu, jak přidat z a Facebooku (registrace a základní nastavení a podrobné informace o stránce Můj Facebook).
Dnes budeme hovořit o tlačítkách z Twitteru, VKontakte a dalších hlavních sociálních sítí. Navíc, jak jsem již zmínil, v článku o sociálních tlačítkách Google Plus a Facebooku, na který je odkaz uveden hned nad textem, lze tlačítka nainstalovat dvěma způsoby. Nejprve přijetím kódu pomocí konstruktoru, který je dostupný všem oblíbeným službám. Za druhé tím, že si sami vytvoříte sociální tlačítka. Obě metody mají své klady a zápory, proto se podívejme na obě.
Přijetí kódu a instalace tlačítka z VKontakte a z mikroblogovací služby TwitterNyní přejdeme k získání tlačítka pro sdílení z Twitteru. Chcete-li to provést, musíte přejít na a provést příslušná nastavení:
Jak vidíte, zde je možné vygenerovat kód pro čtyři tlačítka s různou funkčností. Prozatím zvažme první možnost, protože právě ta zajišťuje vytvoření tlačítka „Tweet“, pomocí kterého budou uživatelé sdílet zajímavý materiál na vašem webu se svými přáteli.
Tato možnost je vhodná pro standardní blog WordPress, pokud chcete po každém publikovaném článku zobrazovat tlačítka pro sdílení, tedy u dynamických stránek příspěvků. První část výsledného kódu bude vypadat nějak takto:
Jen nezapomeňte nastavit značku A, která definuje odkaz v HTML, s atributem rel=“nofollow“, abyste zabránili úniku hmotnosti stránky. A nezapomeňte nahradit hodnotu atributu data-via uvedením svého uživatelského jména na Twitteru, jinými slovy přihlašovacích údajů, které používáte k přihlášení k této sociální síti.
Chcete-li optimalizovat rychlost načítání stránky vašeho webu, je třeba tuto první část vložit na místo, kde byste chtěli vidět sociální tlačítko z Twitteru. Pokud po každé publikaci, otevřete šablonu SINGLE.PHP (pro většinu témat WordPress) a najděte následující řádek:
První část vložte za tento fragment PHP kódu, který je zodpovědný za zobrazování příspěvků. Upozorňuji na skutečnost, že názvy šablon, kde je tato funkce přítomna, se mohou lišit, ale většina z nich má komponentu SINGLE. Vzhledem k tomu, že tlačítka sociálních sítí jsou obvykle umístěna pro pohodlí na jednom místě na jednom řádku, níže dám screenshot šablony SINGLE.PHP, kde mám blok tlačítek. Druhá část (scénář):
!function(d,s,id)(var js,fjs=d.getElementsByTagName(s),p=/^http:/.test(d.location)?"http":"https";if(!d. getElementById(id))(js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs ;)))(dokument, "script", "twitter-wjs");
zůstává nezměněn a vkládá se pro urychlení načítání stránky, obvykle před uzavírací značku BODY v šabloně FOOTER.PHP. Opět níže uvidíte odpovídající obrázek.
Nyní se pokusme získat pro uživatele tlačítko pro přidání vašich materiálů na sociální síť VKontakte ( - registrace VK a přihlášení do Kontaktu a nastavení profilu). Za tímto účelem jdeme do stránka generátoru kódu a proveďte potřebná nastavení:
Zde je dle mého názoru všem naprosto jasné. Standardní nastavení tlačítek je dáno ve výchozím nastavení. V závislosti na vašich preferencích můžete změnit tvar tlačítka, odmítnout zaoblené rohy a také zadat libovolný text, který se na tlačítku zobrazí (ve výchozím nastavení - „Uložit“).
Doporučuje se vložit první část výsledného kódu (zvýrazněná červeně) mezi otevírací a uzavírací tag HEAD. Jako obvyklý byste měli otevřít soubor HEADER.PHP a (můžete před uzavírací značku) vložit tento fragment:
Pro názornost uvedu opět příklad (všimněte si, že skript lze umístit před uzavírací BODY, jako v jiných případech, ale pro zpestření bychom měli zvážit tuto možnost):
No a znovu umístěte druhý fragment tam, kde chcete vidět tlačítko. Pro dynamické stránky blogu WordPress je to SINGLE šablona. Opakuji, že výjimky jsou možné, podrobně jsem o tom psal v materiálu o přijímání tlačítek z Google+ a Facebooku, odkaz na tento příspěvek je na samém začátku publikace. Mimochodem, jak jsme slíbili, začínáme analyzovat kroky, které vám pomohou plně porozumět nejen algoritmu pro vkládání potřebných kódů, ale také nastavení tlačítek pro jejich přizpůsobení designu vašeho webu.
Definování vlastností CSS pro blok tlačítek (na příkladu Google plus, Facebook, Twitter, VKontakte)Doufám tedy, že rozumíte tomu, jak a kam vložit přijaté kódy pro tlačítka sociálních sítí. Abych to posílil, jak jsem slíbil, uvedu příklad, jak jsou na mém blogu umístěny části kódů pro čtyři tlačítka nejoblíbenějších sociálních sítí. Nejprve skriptové části kódů tlačítek v šabloně FOOTER (pro VKontakte, jak doporučujeme, pokud si vzpomínáte, umístili jsme skript mezi značky HEAD, věnujte pozornost výše uvedenému snímku obrazovky):
A zde jsou oblasti zodpovědné za skutečné umístění sociálních tlačítek (SINGLE.PHP):
Každé z tlačítek jsem zabalil a použil vhodné styly CSS, aby vypadaly krásně a odpovídaly designu stránek webu. Za tímto účelem jsem pro každý definoval DIV, dal jim jména a přiřadil vlastnosti s určitými parametry:
#twitter, #fb, #google(float:left;margin-left:50px;margin-top:15px;) #vk(float:left;margin-right:30px;margin-left:40px;margin-top:15px) ;)
Zkuste zkopírovat možnost, kterou jsem navrhl, a vložit ji do souboru style.css vašeho motivu WordPress (možná úplně na konci, abyste se nespletli). Jsem si jist, že mnoho lidí shledá tyto styly vhodné. Pokud v některém motivu tlačítka vypadají nesprávně, můžete si pohrát s číselnými hodnotami každé z vlastností. Pokud se vám to zdá ohromující, podívejte se na tuto sekci blogu, kde se dozvíte základy kaskádových stylů. Takto bude sada tlačítek vypadat po tomto:
Oficiální tlačítka z webů Odnoklassniki a SurfingbirdNa příkladu čtyř populárních sociálních služeb v RuNet a ve světě (Twitter a VKontakte jsou podrobně popsány v tomto článku a Google+ a Facebook v předchozím) jsme analyzovali algoritmus pro vkládání kódů tlačítek na web WordPress. Nyní si rychle projdeme zbytek nejdůležitějších sítí, kterých mohou být vaši čtenáři velmi pravděpodobně uživateli.
Myslím, že již automaticky zjistíte, kam vložit první pasáž (zvýrazněnou zeleně):
kde je fragment skriptu:
!function (d, id, did, st) ( var js = d.createElement("script"); js.src = "http://connect.ok.ru/connect.js"; js.onload = js. onreadystatechange = function () ( if (!this.readyState || this.readyState == "načteno" || this.readyState == "complete") ( if (!this.executed) ( this.executed = true; setTimeout( function () ( OK.CONNECT.insertShareWidget(id,did,st); ), 0); d.documentElement.appendChild(js )(document,"ok_shareWidget",document.URL,"(šířka :145,výška); :30,st:"rounded",sz:20,ck:1)");
Možná by si někdo chtěl nainstalovat tlačítko Share ze služby Surfingbird. V takovém případě si můžete nastavit příjem kódu na jeho oficiální stránce:
Pokud chcete získat tlačítko s počítadlem, klikněte nahoře na „S počítadly“. V návrháři vyberte tlačítko, které se vám líbí, pouhým kliknutím na něj. V důsledku toho opět dostaneme dva kusy kódu. Skript (zvýrazněn červeně):
Umístěte jej znovu před uzavírací BODY a umístěte samotné tlačítko (po zadání nofollow):
Podíl
Na správné místo na stránce.
Vlastní tvorba tlačítek pro sociální sítě (bez skriptů a pluginů)Na závěr se podívejme na to, jak můžete sami vytvořit tlačítka pro sdílení pro svůj web. Již jsem řekl, že každý způsob výroby sociálních tlačítek má své výhody a nevýhody. Tato možnost není výjimkou.
Mezi výhody patří absence skriptu v kódu (který stále zatěžuje server a negativně ovlivňuje rychlost načítání webu), možnost snadno nastavit atribut rel nofollow pro každé tlačítko, protože odkaz na zdroj je uveden explicitně (ačkoli hodnota nofollow neovlivňuje rozložení váhy stránky tolik jako dříve).
Obecně platí, že využití takové příležitosti v mnoha případech není užitečné, zejména pro mladé weby ve světle potřeby získat autoritu. A v takových podmínkách nemohou být žádné maličkosti, takže absence skriptů, pokud se tomu dá vyhnout, vám může hrát jen do karet.
Než začnete, musíte si připravit obrázek, který si nejprve sami vytvoříte. Zde se ukazuje hlavní výhoda tohoto způsobu vytváření sociálních tlačítek. Obrázek může být vyroben z jakéhokoli typu, barvy a tvaru, taková volba je prostě nemožná při přijímání kódů od návrháře. Můžete navrhnout obrázky tlačítek, například, uložit je do počítače a poté nahrát do složky IMG, která se nachází na adrese:
Site_name/wp-content/themes/theme_name/img/
Další výhodou vlastního vytváření obrázků pro tlačítka je, že pokaždé, když k nahrání nedojde ze zdroje třetí strany, ale přímo z vašeho hostitelského serveru, sníží se také rychlost načítání. Pro přehlednost nabízím snímek obrazovky s umístěním složky IMG v hierarchii adresáře webu:
Jen nezapomeňte věnovat pozornost názvu složky s obrázky (u některých témat se nazývá IMAGES). Můžete si však vytvořit vlastní složku pro sociální tlačítka, stačí k ní zadat správnou cestu. Níže uvádím kódy pro každou ze služeb při vytváření vlastních sociálních tlačítek na webu WordPress.
Jak jsem již řekl, atribut REl=“NOFOLLOW” je určen k zablokování indexování odkazu vyhledávači a přidal jsem atribut TARGET=”_BLANK”, abych zajistil otevření kontaktu na jiné kartě, což je velmi pohodlné pro uživatele, protože stránka webu zůstává otevřená.
Pomocí atributu ONCLICK pro tag A, jehož hodnotou je funkce WINDOW.OPEN() z JAVASCRIPT, však můžete dosáhnout toho, že se neotevře nová karta, ale nové okno pro přidání oznámení o článku a můžete nastavte pro něj pevné velikosti pomocí atributů WIDTH (600) a HEIGHT (400):
Některé parametry, které definují ovládací prvky okna (včetně jeho velikostí HEIGHT a WIDTH), však již mohou být nastaveny v konfiguraci konkrétního prohlížeče, takže zadané hodnoty nemusí být provedeny. Otevření nového malého okna je podle mě při sdílení pohodlnější. V každém případě u každé služby dám dvě možnosti pro její vlastní tlačítka (standardní a s otevřením nového okna).
Cvrlikání:
Facebook:
Ya.ru:
Živý žurnál:
&subject=">