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!

 

Download

socialBaker_v2.12.zip

Version 2.12
- Bugfix: use correct pagetitle on OFA pages with multiple OFA modules
- Bugfix: htmlspecialcars the bakery title in ld/json output
- Changed twitter logo to X
- Removed Google Plus
License: GNU / GPL
Timestamp: 05-02-2024
Version: 2.12
Filesize: 44.81 KB
Downloads: 382

socialBaker_v2.11.zip
Version: 2.11, Timestamp: 09-04-2020, Downloads: 1833
Version 2.11
- added bakery product gtag event
- added function breadcrumbs
- Bugfix: oneforall image for opengraph must be first active

socialBaker_v2.10.zip
Version: 2.10, Timestamp: 20-11-2018, Downloads: 1427
version 2.10
- Several small bugfixes
- added bakery product rich snippets

socialBaker_v2.9.zip
Version: 2.9, Timestamp: 27-01-2017, Downloads: 1700
version 2.9
- Improved handling of bakery/oneforall links and images in openGraph() functions

socialBaker_v2.6.zip
Version: 2.6, Timestamp: 01-07-2016, Downloads: 1321
version 2.6
- Bugfix: version 2.5 was based on an onlder version!

socialBaker_v2.5.zip
Version: 2.5, Timestamp: 02-06-2016, Downloads: 1345
version 2.5
- Added support share by Email

socialBaker_v2.4.zip
Version: 2.4, Timestamp: 01-12-2015, Downloads: 1917
version 2.4
- Added support for oneforall pages ( using openGraph() )
- Improved support for Bakery pages.
- - Both page-types now use the main product image to share

socialBaker_v2.3.zip
Version: 2.3, Timestamp: 03-10-2015, Downloads: 1838
version 2.3
- Added support for canonical links in the header ( using openGraph() )

socialBaker_v2.2.zip
Version: 2.2, Timestamp: 03-06-2015, Downloads: 1770
version 2.2
- Added support for 'News images'. Add an image with post_id in a folder like: /media/posts/[post_id].jpg

socialBaker_v2.1.zip
Version: 2.1, Timestamp: 22-05-2015, Downloads: 1620
version 2.1
- Added support for 'Topics'

socialBaker_v2.0.zip
Version: 2.0, Timestamp: 11-05-2015, Downloads: 1536
version 2.0
- Added openGraph and Twitter Card option

socialBaker_v1.2.zip
Version: 1.2, Timestamp: 05-01-2015, Downloads: 1662
version 1.2
- Added simplified shareBaker() function
- News and Bakery pagetitles are now used when no title is given.

socialbaker_v1.1.zip
Version: 1.1, Timestamp: 09-12-2014, Downloads: 1738
v1.1 - Added followBaker function

socialbaker.zip
Version: 1.0, Timestamp: 07-12-2014, Downloads: 1709
v1.0 - Initial release.