Nová služba Google+ od Googlu bere vývojářský svět útokem, a proč by také neměla? Díky minimalistickému uživatelskému rozhraní, použití špičkových webových technik a celkové použitelnosti je Google+ jednou z nejpůsobivějších webových aplikací, které jsem za dlouhou dobu viděl (chtěl jsem říct „od Google Wave“, ale ta nedopadl dobře, že?) Google+ umožňuje sdílet fotografie, odkazy, stavy a mnoho dalšího; považujte to za síť mezi Twitterem a Facebookem.
Google+ bude jen získávat větší pozornost, což znamená, že informace, které sdílíme, se budou dostávat k více a více lidem. To představuje vynikající příležitost k propagaci našich webových stránek, podobně jako Twitter a Facebook. Dovolte mi ukázat vám několik různých způsobů, jak přidat nový odznak Google+1 na váš web.
Jednoduché HTML
Přidání odznaku Google+1 je stejně snadné jako přidání několika značek HTML:
<!-- one button, uses canonical link or current URL --> <g:plusone></g:plusone> <!-- customized for a specific address --> <g:plusone href="https://davidwalsh.name/google-plus-badge"></g:plusone> <!-- include the JS file --> <script src="https://apis.google.com/js/plusone.js"></script>
Zadejte g:plusone označte adresu URL ke sdílení prostřednictvím HREF atribut (pokud není zadán, bude vyhledán a použit kanonický odkaz stránky, jinak se použije aktuální URL) a požadovanou velikost tlačítka pomocí atributu size. Tato značka by měla být přidána kamkoli na stránce, kde chcete tlačítko zobrazit; tag SCRIPT by se měl nacházet ve spodní části stránky. Pokud si s kódem HTML nechcete zahrávat sami, Google poskytuje nástroj pro tvorbu tlačítek Google+1, který za vás udělá špinavou práci. V současné době jsou nabízeny čtyři velikosti tlačítek.
K vykreslení tlačítka můžete také použít následující kód HTML5:
<div class="g-plusone" data-size="standard" data-count="true"></div>
Vaše tlačítko musí mít g-plusone třídy CSS a data- atributy pro možnosti.
Odložení načítání
Výše uvedený HTML kód se vykreslí se zbytkem stránky, ale co když chcete vykreslit tlačítko podle vlastního plánu? Žádný strach – Google API vám umožňuje vykreslovat tlačítka, kdykoli budete chtít:
<!-- one button, uses canonical link or current URL -->
<g:plusone></g:plusone>
<!-- Place this tag in your head or just before your close body tag -->
<script src="https://apis.google.com/js/plusone.js">
{parsetags: 'explicit'}
</script>
<!-- Now render! -->
<script>
gapi.plusone.go();
</script>
Pomocí {parsetags: 'explicit'} a gapi.plusone.go() změní váš g:plusone značky do odznaků, kdykoli budete chtít. Můžete také vykreslit konkrétní tlačítko pomocí následujícího kódu JavaScript:
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{"parsetags": "explicit"}
</script>
<script type="text/javascript">
function renderPlusone() {
gapi.plusone.render("plusone-div");
}
</script>
<body>
<a href="#" onClick="renderPlusone();">Render the +1 button</a>
<div id="plusone-div"></div>
</body>
Kompletní informace o API a úvodní video jsou k dispozici zde. K dispozici je několik dalších malých možností přizpůsobení, takže se na ně podívejte, pokud chcete určit jazyk nebo si pohrát s vlastním vykreslováním.
Nenechte si ujít další způsob sdílení vašeho úžasného webového obsahu se všemi! Implementace tlačítek pro sdílení na Twitteru, Facebooku a Google+1 zabere 5 minut, ale objem provozu, který můžete prostřednictvím těchto doporučení získat, je obrovský!