Toch is de code om dit te realiseren niet zo heel erg ingewikkeld. Onderstaand enkele voorbeelden welke de mogelijkheden weer geven. Implementatie van de code gebeurd op template level niveau en kan eigenlijk overal binnen de template gebruikt worden.

1 – Alleen de main categorieën weer geven (first level categories).

1
2
3
4
5
6
7
8
9
10
11
12
13

<?php $_helper = Mage::helper('catalog/category') ?>
<?php $_categories = $_helper->getStoreCategories() ?>
<?php if (count($_categories) > 0): ?>
    <ul>
        <?php foreach($_categories as $_category): ?>
            <li>
                <a href="<?php echo $_helper->getCategoryUrl($_category) ?>">
                    <?php echo $_category->getName() ?>
                </a>
            </li>
        <?php endforeach; ?>
    </ul>
<?php endif; ?>

2 – Hoofd categorie + sub categorie weergeven.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<?php $_helper = Mage::helper('catalog/category') ?>
<?php $_categories = $_helper->getStoreCategories() ?>
<?php $currentCategory = Mage::registry('current_category') ?>
<?php if (count($_categories) > 0): ?>
    <ul>
        <?php foreach($_categories as $_category): ?>
            <li>
                <a href="<?php echo $_helper->getCategoryUrl($_category) ?>">
                    <?php echo $_category->getName() ?>
                </a>
                <?php $_category = Mage::getModel('catalog/category')->load($_category->getId()) ?>
                <?php $_subcategories = $_category->getChildrenCategories() ?>
                <?php if (count($_subcategories) > 0): ?>
                    <ul>
                        <?php foreach($_subcategories as $_subcategory): ?>
                            <li>
                                <a href="<?php echo $_helper->getCategoryUrl($_subcategory) ?>">
                                    <?php echo $_subcategory->getName() ?>
                                </a>
                            </li>
                        <?php endforeach; ?>
                    </ul>
                <?php endif; ?>
            </li>
        <?php endforeach; ?>
    </ul>
<?php endif; ?>

3 – Hoofd categorie + sub categorieën van de op dat moment actieve hoofd categorie.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<?php $_helper = Mage::helper('catalog/category') ?>
<?php $_categories = $_helper->getStoreCategories() ?>
<?php $currentCategory = Mage::registry('current_category') ?>
<?php if (count($_categories) > 0): ?>
    <ul>
        <?php foreach($_categories as $_category): ?>
            <li>
                <a href="<?php echo $_helper->getCategoryUrl($_category) ?>"><?php echo $_category->getName() ?></a>
                <?php if ($currentCategory &amp;&amp; $currentCategory->getId() == $_category->getId()): ?>
                    <?php $_category = Mage::getModel('catalog/category')->load($_category->getId()) ?>
                    <?php $_subcategories = $_category->getChildrenCategories() ?>
                    <?php if (count($_subcategories) > 0): ?>
                        <ul>
                            <?php foreach($_subcategories as $_subcategory): ?>
                                <li><a href="<?php echo $_helper->getCategoryUrl($_subcategory) ?>"><?php echo $_subcategory->getName() ?></a></li>
                            <?php endforeach; ?>
                        </ul>
                    <?php endif; ?>
                <?php endif; ?>
            </li>
        <?php endforeach; ?>
    </ul>
<?php endif; ?>

Bovenstaand gebeurde dus bij een klant van ons en daar moest dus een oplossing voor gevonden worden. Nu kun je onderstaande code gebruiken uit het OG (open graph) protocol zoals Facebook hem voorschrijft en die (onderstaande code is voorbeeld en geen werkende code!) in de head weg plakken…

<meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/>

Jammere is alleen dat dit niet echt universeel is. Dat kan beter en het eindresultaat is onderstaande code. Voordeel van onderstaande code is dat hij niet op pagina’s verschijnt waar hij geen nut heeft, alleen op de product pagina’s dus en tevens een image uit de cache pakt wanneer die voorhanden is.

1
2
3

<?php if (Mage::registry('current_product')) : ?>
<link rel="image_src" href="<?php echo Mage::helper('catalog/image')->init(Mage::registry('current_product'), 'small_image')->resize(300);?>" />
<?php endif;?>

Nu kun je om de +1 button te installeren op je website een plugin gaan downloaden en die zal naar alle waarschijnlijkheid zijn werk ook wel doen. Voor WordPress bijvoorbeeld zijn er velen te verkrijgen en ook voor Joomla is er wel het één en ander te vinden. De vraag is of je echter wel een plugin wil installeren voor zoiets simpels als een Google +1 button.

Wanneer zou je wel een plugin installeren?
Wanneer je ook meteen Twitter, Facebook en Hyves links wil integreren zou het de moeite kunnen zijn een plugin te installeren. Ik heb die behoefte echter niet aangezien de Google +1 nu al veel meer wordt gebruikt dan de eerdere genoemden en dit in de toekomst alleen nog maar toe zal nemen. Ik zie het nut dus niet meer van een Twitter / Facebook share button om nog maar te zwijgen over de implementatie van een Huves button.

Mocht je de behoefte hebben aan configuratie opties kan het ook lonen om een plugin te installeren. Ik heb die behoefte niet want ik wil de button bijvoorbeeld op dit WordPress blog alleen maar bij ‘posts‘ hebben en niet bij de zogenaamde ‘pages‘. Het nut van een Google +1 button op een contact pagina ontgaat mij namelijk een beetje. Daarnaast mag de button bij iedere post en mocht ik een bepaalde categorie uit willen sluiten kan ik dat altijd nog middels een stukje PHP code doen.

De laatste en de beste reden waarom je een plugin zou willen installeren is omdat je geen enkele ‘technische’ kennis hebt en bijvoorbeeld niet eens weet waar je <head> tag te vinden is in een template.

Waarom kiezen voor het implementeren in de template?
Om de doodsimpele reden dat dit zorgt voor de minste overhead. De simpelste plugin die ik kon vinden bestond nog altijd uit een factor 20 meer aan code dan de 2 regels die je volgens Google daadwerkelijk nodig hebt. Daarnaast zorgt het implementeren in de template NOOIT voor problemen met een upgrade en weet je precies wat voor code er gebruikt wordt.

Implementeren van de Google +1 button op je WordPress website zonder plugin…
Als eerste gaan we bepalen hoe groot de button moet zijn, of we wel of geen tellingen willen laten zien, welke landcode we willen gebruiken e.d. en dat doen we op de Google +1 button pagina.

Wanneer we alle instellingen hebben gemaakt zien we op deze pagina een stukje code staan (Zie bovenstaande afbeelding onder de tekst ‘Kopieer de volgende code en plak deze in uw site:’) welke geplaatst moet worden op de site.

Als eerste gaan we de javascript code plaatsen.
Open hiervoor de header.php van je template, zoek de afsluitende </head> tag en plaats vlak daarvoor de volgende code;

<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
  {lang: 'nl'}
</script>

Bovenstaande code is zoals ik hem hier op Vout ook gebruik en kan eventueel gekopieerd worden.

Het plaatsen van de daadwerkelijke button.
Nu de javascript code ingeladen wordt kunnen we gaan bepalen waar we de +1 button willen hebben. Onderstaande code zorgt er voor dat de Google +1 button linkt naar de pagina waarop de Google +1 button is gebruikt. Waar je deze code plakt is afhankelijk van waar je de button wilt implementeren.

<g:plusone size="small" href="<?php the_permalink(); ?>"></g:plusone>

Zoals te zien is er op de standaard code die Google genereert een aanvulling gemaakt welke de pagina link invoegt. Hiervoor gebruiken we ‘<?php the_permalink(); ?>‘.

Waar bovenstaande code ingevoegd wordt is afhankelijk van waar je de button geplaatst wil hebben. Ik heb de button bijvoorbeeld alleen bij ‘posts‘ en niet bij alle andere pagina’s. Mocht je dat echter wel willen zou je er ook voor kunnen kiezen de +1 button in je ‘loop.php‘ op te nemen en bijvoorbeeld in je pagina titel te zetten en rechts uit te lijnen. In dat geval even een ‘‘ zetten en deze rechts uitlijnen middels CSS.

Belangrijk is dat de button in ieder geval in het zicht staat… hij krijgt tenslotte pas waarde wanneer hij ook veelvuldig gebruikt wordt.

Het reviewen van dj gear mis ik niet echt, het zo af en toe een avond achter de computer weg zitten teren, zaken uit zoeken en daar vervolgens een lap tekst over weg tikken wel. Ondanks dat de teksten geen literaire hoogstandjes waren en ze zeker in de begindagen nog barstensvol met spel en grammatica fouten stonden (ik heb de handicap dat ik mijn teksten altijd in 1 keer weg tik en dan de moeite niet neem deze minstens 3 keer door te lezen, men noemt het ook wel lui geloof ik…) werden ze wel altijd goed gelezen. In de hoogtijdagen meer dan 50K unieke bezoekers per maand, een gemiddeld bezoek wat 6:04 duurde en teksten die door magazines schaamteloos geript werden.

Ik heb besloten me komende tijd maar eens flink te gaan verdiepen in Google Adwords en Analytics en met behulp van die twee mijn SEO kennis ook naar een hoger plan te tillen. Daarnaast werk ik natuurlijk dagelijks met Magento @ Dutchworld Solutions dus ook daar zal wel eens wat tekst aan gewijd gaan worden.

En inderdaad, design van de site is nog niet 100% in orde maar daar gaat komende dagen verandering in komen. Doel gaat in ieder geval zijn om met zo min mogelijk code zoveel mogelijk op het scherm te krijgen. Optimaliseren tot het maximale!

Mijn Google+ profiel, https://plus.google.com/103826605847574494484/posts

Meer tekst volgt later…

‘Meld u aan voor het nieuwe Google-programma voor webprofessionals en laat uw bedrijf vandaag nog groeien!‘ stond er boven aan de brief die ik onlangs ontving van Google. Niets meer dan een ordinair stukje reclame van Google om je te verleiden tot het afnemen van advertenties bij de zoekmachine gigant… maar toch wekte het mijn interesse.

Naast de 20x Adwords coupons van 50 euro (die je er binnen no time doorheen jaagt maar dat even terzijde) werd er ook melding gemaakt van trainings materiaal waarmee je bakken geld gaat verdienen volgens Google (en dat is handig aangezien ik ooit nog eens een Porsche 911 wil gaan rijden en sparen nou niet echt een persoonlijk USP is) en bijbehorende tools.

Nu was ik een tijd geleden al eens begonnen met de ‘adwords en analytics’ professional kwalificaties maar was het er nog niet van gekomen om de boel ook echt af te ronden. Daar gaat dus verandering in komen en binnenkort zal ik ook eens een poging gaan wagen de examens af te ronden en de officiële kwalificatie binnen te slepen. Daarna meteen door met ‘analytics’ en dan de bakken met geld binnen gaan halen zoals Google het zo mooi weet te brengen.

Mochten er mensen zijn die nog GEEN adwords campagne voor hun site hebben lopen maar daar wel in geïnteresseerd zijn… let me know want ik zoek nog wat proefkonijnen. De eerste 50 euro adwords tegoed heb ik voor je in coupon vorm.