jQuery Socialist: Alle Social Media Streams an einem Platz

Kein Beitragsbild

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren...

Das Leben kann so einfach sein. Das sehr komfortabel zu bedienende jQuery-Plugin Socialist aggregiert nahezu beliebig viele Social Media Streams in einer grid-basierten, sehr modernen Übersicht. Dazu bedient es sich einer an Pinterest erinnernden Optik, liefert andere Theme-Vorlagen mit und verhält sich zudem responsiv. Wer’s lieber mag, kann den Stream auch in langweiliger Listenoptik generieren lassen.

Socialist: Streams als Array hinterlegen, der Rest geht automagisch

Socialist aggregiert die Streams aus Facebook, Twitter, LinkedIn, Flickr, YouTube, Tumblr, Pinterest, Craigslist und Google+. Da es aber grundsätzlich jeden RSS-Feed verarbeiten kann, sind der Fantasie kaum Grenzen gesetzt. Socialist ist in der Lage, die genannten Streams einzeln darzustellen, aber auch in beliebiger Kombination zu kumulieren.

Das funktioniert sehr einfach über die Definition eines Arrays, welches die zu aggregierenden Streams definiert und auf einen beliebigen DIV-Container angewendet wird. Das sieht zum Beispiel so aus:

    $('#mydiv').socialist({ 
        networks: [ 
            {name:'facebook',id:'in1dotcom'}, 
            {name:'tumblr',id:'in1blog'}, 
            {name:'twitter',id:'in1_'}, 
            {name:'pinterest',id:'potterybarn/Fall-Weddings-by-Pottery-Barn'}, 
            {name:'youtube',id:'potterybarn'}, 
            {name:'googleplus',id:'105588557807820541973/posts'}, 
            {name:'rss',id:' http://feeds.feedburner.com/good/lbvp'} 
        ], 
        maxResults:4 
    }); 
 
    

In diesem Falle würden Streams aus Facebook, Tumblr, Twitter, Pinterest, YouTube und Google+ zusammengeführt und von einem RSS-Feed aus Feedburner ergänzt. Das Array networks, dessen Codeaufbau sicherlich auf den ersten Blick verständlich ist, macht es möglich.

Pro Zeile wird ein Stream definiert. Unter name gibt man die Herkunft, etwa Facebook an und unter id legt man den entsprechenden Account ab, Im Falle von Facebook also den Namen des eigenen (oder fremden) Profils. In Sachen Google+ wird die kryptische Zahlenkombination hinterlegt, die uns Google momentan noch als Account-Bezeichnung aufbürdet. Bei RSS-feeds ist unter id die Feed-URL zu hinterlegen. Mit dem Parameter maxResults kann die Zahl der abzurufenden Inhalte pro Stream begrenzt werden. Im obigen Beispiel werden aus jedem Stream maximal vier Inhalte angezeigt.

Weitere mögliche Parameter legen fest, welche Inhaltsteile aus den Streams zur Anzeige gelangen sollen, so könnte man das Grid etwa nur mit Bildern bestücken, wenn man so wollte. Ebenso ist einstellbar, in welcher Größe die einzelnen Kacheln erscheinen, respektive, ob die Streams überhaupt gekachelt dargestellt werden sollen. Zur Vereinheitlichung des Erscheinungsbildes können maximale Längen für Überschriften und Texte definiert werden.

Socialist setzt jQuery ab Version 1.6 voraus und integriert die Plugins Isotope und Cross Domain Ajax, die somit nicht separat eingebunden werden müssen. Mithin reicht der folgende Aufruf an geeigneter Stelle:

  
     

Socialist steht unter der MIT-Lizenz kostenlos zur privaten und kommerziellen Anwendung bereit. Wie so oft, ist es auch hier das integrierte Isotope-Plugin, das den Einsatz auf den privaten Bereich beschränkt, da es für kommerzielle Nutzung eine kostenpflichtige Lizenz voraussetzt. So kann Socialist kommerziell kostenlos nur genutzt werden, wenn man auf die Grid-Ansicht verzichtet und die Streams in Listenoptik darstellen lässt.

Links zum Beitrag:

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für diverse Medien, hauptsächlich zu den Themenfeldern Technik und Design. Man findet ihn auch auf Twitter und Google+.

Sortiert nach:   neueste | älteste | beste Bewertung
Yannick
Gast

Schönes Plugin, um eine Webseite mit Aggregierten Informationen anbieten zu können. Werd ich mir näher anschauen.

trackback

[…] jQuery Socialist: Alle Social Media Streams an einem Platz […]

trackback

[…] Eine gute Anleitung zum Einbau findet Ihr hier oder auch hier. […]

Carsten
Gast

Danke! Das habe ich gesucht.

Nebenbei: Für alle, die dieses Tool kommerziell einsetzen, sei kurz bemerkt, dass die ISOTOPE Developer Lizenz einmalig (nur) 25$ kostet.

Jonathan Hornung
Gast

ich hab eine open source alternative für angularjs geschreiben, namens apiNG: https://aping.readme.io/

wpDiscuz