socialBaker - WebsiteBaker snippet

Functies: socialBaker - shareBaker - followBaker - openGraph

Er zijn vele diensten te vinden die op een redelijk simpele manier een blokje met knoppen naar social media op uw website plaatsen.

Ze werken vrijwel allemaal met zware scripts die de laadtijd van uw website nadelig beinvloeden en ze plaatsen vaak grote aantallen "tracking" cookies op uw website waarvoor u wettelijk toestemming moet vragen.

Deze snippet genereert ook een blokje met (10) veel voorkomende social media websites, maar dan zonder de zware scripts én zonder cookies.

Na de installatie van de snippet kunt u simpel op de plaats in uw template waar u de share knoppen wilt hebben de volgende code toevoegen:

<?php echo socialBaker(); ?>

Dit zal een blok met iconen toevoegen zoals u hieronder ziet staan.

De snippet kent een aantal parameters om de werking aan te passen.

De parameters zijn:

1) status
Hiermee kan je de verschillende zaken die gepost worden aanpassen. Wat precies wordt gebruikt is natuurlijk afhankelijk van de gebruikte social media.
Standaard wordt hiervoor de paginatitel, de url en de pagina beschrijving (page_description) gebruikt.
Als je dit wil aanpassen moet een array met parameters (status / url / description) worden meegegeven.

Voorbeeld:

<?php
$status = array (
    'status' => 'Beautiful article',
    'url' => 'http://myserver.com/the_article',
    'description' => 'A nice article about beautiful websites'
);
echo socialBaker($status);
?>

2) imagePath
Met deze parameter kan je bepalen waarvandaan de afbeeldingen gebruikt moeten worden.
Als je dus eigen afbeeldingen wilt gebruiken en die staan in /media/social/ kan je die als tweede parameter opgeven.
Als je de eerste parameter ($status) niet wilt gebruiken kan je daarvoor de waarde null of '' voor invullen.

Voorbeeld:

<?php
echo socialBaker(null,'/media/social/');
?>

3) shares
Met deze parameter kan je aangeven welke shares (en in welke volgorde) getoond moeten worden.
Dit kan je doen als nummer of de naam voor de social media.
Als je de eerste twee parameters niet wil gebruiken kan je daarvoor de waarde null of '' gebruiken.

Voorbeeld:

<?php
echo socialBaker(null,null,'1,2,3,4'); // alleen twitter/facebook/google-plus/linkedin
?>

of

<?php
echo socialBaker(null,null,'twitter,facebook,googleplus,linkedin');
?>

de te gebruiken waardes zijn:

1 = twitter
2 = facebook
3 = googleplus
4 = linkedin
5 = digg
6 = stumbleupon
7 = delicious
8 = vk
9 = reddit
10 = tumblr
11 = email (vanaf v2.5)

shareBaker - WebsiteBaker snippet

Vanaf versie 1.2 bestaat ook de functie aanroep shareBaker();

Dit is dezelfde functie als socialBaker(), alleen met de eerste twee parameters weggelaten.
Deze eerste twee parameters blijken in de praktijk zelden gebruikt te worden waardoor het gebruik van deze nieuwe aanroep het dus een klein beetje simpeler maakt.

Voorbeeld:

<?php
echo shareBaker('1,2,3,4'); // alleen twitter/facebook/google-plus/linkedin
?>

of

<?php
echo shareBaker('twitter,facebook,googleplus,linkedin');
?>

De te gebruiken waardes zijn gelijk als bij de derde parameter van socialBaker.

followBaker - WebsiteBaker snippet

Dezelfde snippet heeft vanaf versie 1.1 ook de functie followBaker(). Hiermee kunnen "Volg ons" knoppen worden gegenereerd.

Om deze te gebruiken moeten er voor de verschillende social media accounts de accountnamen worden opgegeven.
Deze accountnamen worden als array doorgegeven aan de functie.

Voorbeeld:

<?php
$follows['twitter'] = 'mytwitter';
$follows['facebook'] = 'myfacebook';
$follows['googleplus'] = '+mygoogleplus';
$follows['linkedin'] = 'mylinkedin';
$follows['youtube'] = 'myyoutube';
$follows['vimeo'] = 'myvimeo';
$follows['instagram'] = 'myinstagram';
$follows['pinterest'] = 'mypinterest';
$follows['flickr'] = 'myflickr';
$follows['vk'] = 'myvkontakte';
echo followBaker($follows);
?>

Bovenstaande voorbeeld geeft gelijk aan welke services in de snippet zijn geconfigureerd.

openGraph - WebsiteBaker snippet

Vanaf versie 2.0

Het openGraph protocol wordt door Facebook en Google plus gebruikt om details van de huidige pagina door te geven.
Voeg simpel in het <head> </head> van de website de volgende regel toe:

<?php echo openGraph(); ?>

Of als je de shorturl methode gebruikt:

<?php echo openGraph(true); ?>

Het resultaat kan je onder andere in de broncode van deze pagina zien.

<meta property="og:title" content="socialBaker" />
<meta property="og:description" content="Voeg simpel share links toe aan je #webistebaker website. " />
<meta property="og:site_name" content="WebsiteBaker CMS - Professional Developer" />
<meta property="og:type" content="website" />
<meta property="og:locale" content="nl_NL" />
<meta property="og:url" content="http://www.dev4me.nl/modules-snippets/opensource/socialbaker/" />
<meta property="og:image" content="http://www.dev4me.nl/media/pages/socialBaker.jpg" />
<meta property="og:image:width" content="211" />
<meta property="og:image:height" content="194" />

Als "bonus" wordt voor Twitter een Twitter Card toegevoegd:

<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="WebsiteBaker CMS - Professional Developer"/>
<meta name="twitter:title" content="socialBaker"/>
<meta name="twitter:description" content="Voeg simpel share links toe aan je #webistebaker website. "/>
<meta name="twitter:url" content="http://www.dev4me.nl/modules-snippets/opensource/socialbaker"/>
<meta name="twitter:image" content="http://www.dev4me.nl/media/pages/socialBaker.jpg"/>
<meta name="twitter:image:width" content="211" />
<meta name="twitter:image:height" content="194" />

Afbeeldingen...
Een belangrijk onderdeel  van het openGraph protocol is dat je de socialmedia website kan aangeven welke afbeelding er als thumbnail gebruikt kan worden.
Om dit te realiseren moet een speciale map /pages/ in de mediamap gemaakt worden.
De snippet zal in die map zoeken naar een bruikbare afbeelding.

1) zoekt naar /media/pages/{PAGE_ID}.jpg of /media/posts/{POST_ID}.jpg voor nieuwsberichten.
2) zoekt naar /media/pages/{MENU_TITLE}.jpg (hoofdletter gevoelig!)
3) zoekt naar /media/pages/website.jpg (als nogniet is gevonden is dit de standaard afbeelding voor de hele website)

Als er geen afbeeldingen gevonden worden zal de og:image metatag niet worden toegevoegd.

Nieuws en Bakery
De snippet detecteert of je op een nieuwspagina of een Bakery productpagina staat en zal dan daar de details vandaan halen.
Nieuw: Ook oneforall pagina's worden nu gedetecteed (vanaf versie 2.4). Bij deze pagina's (en bij Bakery) als de hoofdafbeelding automatisch worden gebruikt!