Magento Social Bookmark Extension Tab- und Toolbar (Update 23.02.2011)

Diese Extension ermöglicht, wie auf dieser Seite oder unter demo.snm-portal.de zu sehen eine Tabbar am oberen Bildschirmrand, mit den Tabs 'Translator','Share' und 'Feedback', sowie eine Social Bookmark Leiste für Produkte und CMS-Artikel (siehe unten).

Damit der Seitenaufbau nicht durch Facebook blockiert wird, wird hier auf die gängige Variante über ein iFrame zur Ermittlung der Anzahl der "Shares" verzichtet.

Dies übernimmt ein, nach dem Laden der Webseite, ein kleines JQuery-Script, welches die Counts für Twitter und Facebook nachlädt.

Damit ergeben sich auch neue Gestaltungsmöglichkeiten.

Diese Toolbar kann leicht an das Design einer beliebigen Magento-Seite angepasst werden. Im Normalfall sollte das Anpassen der CSS-Datei genügen. Eine CSS-Abwandlung ist auf dieser Seiten zu finden (rechts oben).

Für die Magento-Version ab 1.5.0.1 steht unter dem
Channel: http://connect2.snm-portal.com/snm_toolbar  (26.08 gändert)
diese Extension bereit.

Achtung!
Es wird in der Magento Version 1.5.0.1 noch der Patch für den Downloader für abhänige Extension benötigt.

Anpassungen können leicht über die XML-Layout-Beschreibung vorgenommen werden, so können über die Action "addTab" eigene Tabs integriert werden bzw. durch entfernen der Action z.B. der Translater entfernt werden.

<layout version="0.1.0">
	<default>
		<reference name="head">
			<action method="addJs">
				<script>jquery/jquery.easing.1.3.js</script>
			</action>
			<action method="addCss">
				<stylesheet>css/auit/toolbar/styles.css</stylesheet>
			</action>
			<action method="addJs">
				<script>auit/toolbar/toolbar.js</script>
			</action>
		</reference>
		<reference name="top.container">
			<block type="auit_toolbar/tab" name="auit_toolbar_tab" as="auit_toolbar_tab" template="auit/toolbar/tab.phtml">
				<action method="addTab" translate="title">
					<alias>translator</alias>
					<title>Open the Translator</title>
					<text>Translator</text>
					<block>core/template</block>
					<template>auit/toolbar/translator.phtml</template>
				</action>
				<action method="addTab" translate="title">
					<alias>share</alias>
					<title>Share this page</title>
					<text>Share</text>
					<block>auit_toolbar/tab_share</block>
					<template>auit/toolbar/share.phtml</template>
				</action>
				<action method="addTab" translate="title">
					<alias>feedback</alias>
					<title>Give a Feedback</title>
					<text>Feedback</text>
					<block>core/template</block>
					<template>auit/toolbar/feedback.phtml</template>
				</action>
			</block>
		</reference>
	</default>
</layout>

Um die entsprechenden Anzahl von Shares für Facebook und Twitter nach zuladen benutzen wir JQuery.
Dabei werden alle Platzhalter gesucht und mit dem zugehörigen Wert gefüllt.

Platzhalter für Twitter:

<a 	rel="external nofollow" href="<?php echo $_Url; ?>"	class="share-twitter" title="<?php echo $this->__('Share on Twitter') ?>">
	<span class="i"></span>
	<span class="t"><?php echo $this->__('Twitter') ?></span>
	<span class="c"><span>0</span></span>
</a>

Platzhalter für Facebook:

<a 	rel="external nofollow" href="<?php echo $_Url; ?>"	class="share-facebook" title="<?php echo $this->__('Share on Facebook') ?>">
	<span class="i"></span>
	<span class="t"><?php echo $this->__('Share') ?></span>
	<span class="c"><span>0</span></span>
</a>

Das entsprechende Javascript: 
Dabei wird für Facebook, alle Links mit der Klasse "share-facebook" gesucht, das Ergebnis kommt dann in den SPAN mit der Klasse "c".

(function($) {
	jQuery(document).ready(function() {
		updateFBCount();
		updateTwitterCount();
	});
	function updateFBCount() {
		var fbUrls='',lnk,href,fblinks=[];
		$('a.share-facebook').each(function(idx) {
			var p = getQueryParams(this.href);
			if ( p.u ) {
				$(this).find('span.c span').each( function(){
					if ( !fblinks[p.u] )
						fblinks[p.u]=[];
					fblinks[p.u].push(this);
				}); 				
				
			}
		});
		fbUrls='';
		for ( lnk in fblinks ) {
			if (!fblinks.hasOwnProperty(lnk)) continue;
			if ( fbUrls)
				fbUrls += ',';
			fbUrls += encodeURIComponent(lnk);
		}
		if ( fbUrls )
		{
			 $.ajax({
				 url: "http://api.facebook.com/restserver.php?"+'v=1.0&method=links.getStats&format=json&urls='+fbUrls, 
				 dataType: "jsonp",
				 success: function (data, textStatus, XMLHttpRequest) {
					 if ( data && data.length )
					 	for ( var i=0; i < data.length;i++ )
					 	{
					 		var item = data[i];
					 		var a = fblinks[item.url];
					 		if ( a && item.total_count){
					 			$.each(a,function( ){
					 				$(this).text(item.total_count);
					 			});
					 		}
					 	}
				 },
				 error: function (XMLHttpRequest) {
				 }
			 });
		}		
	}
	function updateTwitterCount() {
		var lnk,href,fblinks=[];
		$('a.share-twitter').each(function() {
			
			var p = getQueryParams(this.href);
			if ( p.url ) {
				$(this).find('span.c span').each( function(){
					if ( !fblinks[p.url] )
						fblinks[p.url]=[];
					fblinks[p.url].push(this);
				}); 				
			}
		});
		for ( lnk in fblinks ) {
			if (!fblinks.hasOwnProperty(lnk)) continue;
			 $.ajax({
				 url: 'http://urls.api.twitter.com/1/urls/count.json?url='+lnk, 
				 dataType: "jsonp",
				 mainLnk:lnk,
				 success: function (data, textStatus, XMLHttpRequest) {
					 if ( data && data.count )
				 		var a = fblinks[this.mainLnk];
				 		if ( a ){
				 			$.each(a,function( ){
				 				$(this).text(data.count);
				 			});
				 		}
				 },
				 error: function (XMLHttpRequest) {
				 }
			 });
		}		
	}
	function getQueryParams(qs) {
		var params = {};
		qs = qs.split("?");
		if ( !qs || qs.length < 2 )
			return params;
		qs = qs[1].split( '&' );
		for ( var i=0; i<qs.length; i++ ) {
		      var name = qs[i].split('=')[0];
		      var value = qs[i].split('=')[1];
		      params[name] = value;
		}		
		return params;
	}
})(jQuery);