Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung & Design

jQuery Socialist – Social-Media-Aggregation leicht gemacht

    jQuery Socialist – Social-Media-Aggregation leicht gemacht
jQuery Socialist

Mit Socialist könnt ihr automatische Nachrichten-Aggregationen von verschiedenen Social-Networks erstellen und sie in einem übersichtlichen, an Pinterest erinnerndem Layout ausgeben. Wir zeigen euch, was das Plugin kann und wie ihr es benutzt.

jQuery Socialist ist ein jQuery Plugin, das mehrere Social-Media-Feeds ausliest, zusammenführt und übersichtlich ausgeibt. Derzeit unterstützt das Plugin Facebook, Twitter, LinkedIn, YouTube, Pinterest, Flickr, Tumblr, RSS und weitere Social-Networks. Das Skript liest die neuesten Meldungen des jeweiligen Netzwerks aus und fasst sie in Form einer übersichtlichen und an das Design von Pinterest angelehnten Darstellung zusammen.

jQuery Socialist Screenshot
jQuery Socialist

jQuery Socialist einbinden

Für den Betrieb des Plugins ist nicht viel nötig. Nach dem Download muss die JavaScript-Datei nur noch zusammen mit dem dazugehörigen CSS-Stylesheet in das jeweilige Projekt eingebunden und auf ein beliebiges div-Element angewandt werden.

$('#content').socialist({
	networks: [
		{name:'facebook',id:'t3nMagazin'},
		{name:'pinterest',id:'t3nmagazin'},
		{name:'twitter',id:'t3n'},
		{name:'googleplus',id:'105588557807820541973/posts'},
		{name:'rss',id:' http://feeds2.feedburner.com/aktuell/feeds/rss/'}
	]
});

Zum reibungslosen Betrieb benötigt Socialist zumindest ein Array mit den jeweiligen Netzwerken, die es abfragen soll. Es können aber noch zusätzliche Werte, wie die maximale Länge für Headlines und Anreißer-Texte oder die maximale Anzahl der anzuzeigenden Meldungen festgelegt werden. Socialist unterstützt Theming und liefert zwei vorgefertigte Themes mit. Diese lassen sich beim Aufruf von Socialist festlegen und anpassen. Verschiedene Bereiche lassen sich per Skript einblenden bzw. durch Auslassen im Array ausblenden:

$('#content').socialist({
	networks: [{...}],
	fields:['source','heading','text','date','image','followers','likes']
});

Für den reibungslosen Betrieb wird jQuery 1.6 oder neuer benötigt. Bei unseren Tests gab es aber beim Einsatz von jQuery 1.9 größere Schwierigkeiten. Das jüngste Release, mit dem Socialist läuft, ist jQuery in der Version 1.8.3.

jQuery Socialist: Einfach zu benutzen, dafür etwas langsam

Socialist bietet eine einfache Möglichkeit, um Social-Media-Feeds zusammenzufassen und auf der eigenen Seite einzubinden. Da das Skript die Ergebnisse aber „on-the-fly“ erzeugt, lässt die Performance im Vergleich zu serverseitigen Lösungen manchmal doch zu wünschen übrig. Dafür lässt sich jQuery Socialist schnell und ohne tiefergehende Kenntnisse über APIs oder serverseitige Programmierung einbinden. Einen Blick ist das Tool auf jeden Fall wert.

Da die derzeitige Version des Skriptes Fehler in der Beispiel-Datei enthält, haben wir ein individuelles Paket für euch zum Testen des Skriptes vorbereitet.

Finde einen Job, den du liebst

5 Reaktionen
Benny Lava
Benny Lava

Der Name ist ein richtiger Fail. :-)
Was kommt als nächstes, jQuery Nazi?

Antworten
manuel
manuel

Super, vielen Dank. Damit funktioniert es auch bei mir.

Dann werde ich mal herumspielen und testen ob ich damit auch ein Art Social Media Monitoring über Twitter und Google+ betreiben kann. Dazu muss man auch suchen können, das hab ich bisher noch nicht gefunden.

Antworten
Ilja Zaglov

Im aktuellen Demo-Paket scheinen sich ein paar Fehler eingeschlichen zu haben, die das Testen ohne Webserver problematisch machen. Einige der Networks, die im Beispiel abgefragt werden, scheinen auch nicht mehr zu gehen.

Tut mir Leid Leute, das war zum Erstellungs-Zeitpunkt des Beitrags noch nicht so.

Ich habe mal ein kleines Paket zusammengestellt, mit dem ihr das Skript einfacher testen könnt! Könnt ihr unter http://files.zaglov.de/t3n/socialist.zip herunterladen. Hoffe das hilft.

Werde das gleich auch im Beitrag hinterlegen.

Antworten
manuel
manuel

Bei mir funktioniert das nicht.

Ich habe das Script heruntergeladen und entpackt und anschließend die example-Datei geöffnet. Ich bekomme nur einen weißen Bildschirm zu sehen.

Muss man davor etwas einstellen und beachten?

Antworten

Melde dich mit deinem t3n-Account an oder fülle die unteren Felder aus.

Abbrechen