WebdesignloversTutorials | Webdesignlovers

Order by Rating like a Superhero

Webdesignlovers — Mon, 24 Oct 2011 05:37:46 +0000

Viele Websites benutzen Bewertungen, um die Wichtigkeit oder die Beliebtheit eines Artikels oder Produkts zu messen. Beliebte jQuery Plugins wie das 5 Star-Rating sind schnell und einfach integriert. Die Schwierigkeit liegt eher an der Ausgabe der Daten und dabei wollen wir helfen!

Bei unserem neusten Projekt Stokedcamps geht es darum, dass sich einerseits Surfcamps mit einem Profil präsentieren können und anderseits dass Besucher diese bewerten können. Wir haben ebenfalls das verbreitete 5 Star-Rating eingesetzt. Folgendes Problem ergibt sich:

Problem

Surfcamp 1 erhält 23 Bewertungen:
20 x 5
3 x 4
ergibt eine durchschnittliche Bewertung von 4.8

Surfcamp 2 erhält 1 Bewertung:
1 x 5
ergibt eine durchschnittle Bewertung von 5

Was läuft hier falsch?

Sortiert man nun die Surfcamps nach ihrer durchschnittlichen Bewertung wird das zweite Surfcamp besser gelistet als das erste. Rein mathematisch macht dies Sinn, allerdings ist das zweite Surfcamp aufgrund der vielen Besucher und der überdurchschnittlichen Bewertung natürlich als besser einzustufen.

Demo mit falscher Sortierung

Wir haben das ganze mal veranschaulicht mit einem Bewertungssystem für Superheroes, schaut es euch an, setzt Bewertungen und erkennt wie es sich verhält:

Wie kann das Problem gelöst werden?

Um das Problem zu lösen muss also eine Gewichtung geschaffen werden, möglichst eine organische welche sich an der Höhe der Gesamtbewertungen und der durchschnittlichen Bewertung orientiert. Wir haben gesucht und sind auf den Bayes’schen Durchschnitt gestossen. Der nach dem englischen Mathematiker Thomas Bayes benannte bayessche Wahrscheinlichkeitsbegriff interpretiert Wahrscheinlichkeit als Grad persönlicher Überzeugung. Genau das suchen wir!

Auf der Seite von The Broth haben wir folgende Formel dazu entdeckt:

bayesian = ( (avg_num_votes * avg_rating) + (this_num_votes * this_rating) ) / (avg_num_votes + this_num_votes)

Legende:

avg_num_votes: Die durchschnittle Anzahl an Bewertungen von allen Objekten die mehr als 0 Bewertungen haben
avg_rating: Die durchschnittliche Bewertung jedes Objekts (wieder alle mit mehr als 0 Bewertungen)
this_num_votes: Anzahl der Bewertungen für dieses Objekt
this_rating: Die Bewertung dieses Objekts

Wir haben also das ganze bei der Superhero-Bewertung eingebaut und Boom! Genau so wie es sein soll, die Bewertung wird aufgrund der Menge an Bewertungen und der durchschnittlichen Bewertung gemessen, wenn es viele Stimmen gibt können wir also darauf vertrauen, dass das die öffentliche Meinung vieler ist.

Demo mit Bayes’schen Bewertung

Vielen Entwicklern wird die oben erwähnte Formel reichen um das in ihre Projekte zu integrieren, wer noch eine Code-Beispiel benötigt helfen wir natürlich gerne.

PHP-Beispiel

 array ('id' => '1', 'name' => 'dark_knight', 'num_votes'   => 5, 'avg_rating' => 4.8),
'green_lantern' => array ('id' => '2', 'name' => 'green_lantern', 'num_votes' => 1, 'avg_rating' => 5  ),
'robin'         => array ('id' => '3', 'name' => 'robin', 'num_votes'         => 1, 'avg_rating' => 5  ),
'superman'      => array ('id' => '4', 'name' => 'superman', 'num_votes'      => 1, 'avg_rating' => 5  ),
'flash'         => array ('id' => '5', 'name' => 'flash', 'num_votes'         => 1, 'avg_rating' => 5  ),

);

// Loop array and count data

foreach ($superheroes as $k => $v) {
$total_votes           += $v['num_votes'];
$total_rating          += $v['avg_rating'];
$number_of_superheroes += 1;
}

// Do the math

$avg_num_votes = $total_votes/$number_of_superheroes; // Average number of votes
$avg_rating    = $total_rating/$total_votes; // Average rating for all superheroes

// Bayes it and write output

foreach ($superheroes as $k => $v) {
$karma = ( ($avg_num_votes * $avg_rating) + ($v['num_votes'] * $v['avg_rating']) ) / ($avg_num_votes + $v['num_votes']);
echo $v['name'] . ': ' . round(($karma*2*10)) . '
';
}

?>

Wie verwendet ihr dieses Beispiel?

Kopiert euch dieses PHP-Script in ein Textfile, speichert es beispielsweise unter superheroes.php und kopiert es auf den Server eures Vertrauens. Ruft das PHP im Browser auf und ihr seht die Ausgabe der Berechnung. Nun könnt ihr Werte im Array anpassen und schauen wie sich dies auf das Karma auswirkt. Das Script ist bestimmt eine gute Grundlage um die Bayes’schen Bewertung zu verstehen und anzuwenden. Als Live-Beispiel könnt ihr euch auch die Bewertungen auf Stokedcamps.com anschauen.

Habt ihr diese Bewertung auf eurer Seite integriert oder habt ihr Fragen? Meldet euch in den Kommentaren.

Facebook Page Template

Webdesignlovers — Wed, 09 Mar 2011 22:17:11 +0000

Ab mitte März werden auf Facebook Pages keine FBML-Anwendungen mehr unterstützt. Das ganze wird ersetzt durch sogenannte iFrame-Anwendungen. Dies hat viele Vorteile, jedoch auch einige Nachteile. Wir haben uns das ganze mal im Detail angeschaut und bieten euch unser Template mit vielen Features zum kostenlosen Download an.

Vor- und Nachteile von Facebook iFrame-Apps

Vorteile:

HTML, CSS und JavaScript können uneingeschränkt genutzt werden. Auch Libraries wie jQuery, Mootools, etc. können problemlos eingebunden werden
Tracking-Tools wie Google Anayltics können problemlos integriert werden. IP-Adressen und Browserinformationen sind nun also auch verwertbar.
Bei den bisherigen FBML Apps konnte in Fan Pages kein Autoplay genutzt werden, was nun funktioniert (YouTube Videos, Flash Animationen, etc.)
Die Nutzung aller Social Media Plugins wird unterstützt (Comment Box, Like Button, Freunde einladen, etc.)
Cookies können beim Benutzer hinterlassen werden, beispielsweise für die Speicherung der Sprachauswahl
Facebook nimmt kein Caching mehr vor, sodass z.B. Bilder keinen Cache Breaker mehr beim Update benötigen.

Nachteile:

Für den Hobby-Facebook-Admin wird es komplizierter, da man “richtige” Website entwickeln muss
Der Traffic wird auf eigenen Servern generiert, so entstehen je nachdem Mehrkosten
Static FBML App war bisher sehr einfach und ohne Hosting einer eigenen Seite möglich
CSS Styles werden nicht mehr von Facebook übernommen, will man also konsistent mit dem Facebook Layout bleiben muss kräftig gestylt werden
Die Standard-Höhe der iFrame Tabs ist auf 800px beschränkt, will man mehr muss man einen Scrollbalken in Kauf nehmen oder sich mit Facebook Funktionen drum kümmern. Beispielsweise mit FB.Canvas.setAutoResize(); und/oder FB.Canvas.setSize({ width: x, height: y });
HTML/CSS und JS kann aus dem Quelltext des IFrames kopiert/geklaut werden.

Trotz einigen Nachteilen überwiegen die Vorteile klar. Die Möglichkeiten sind, abgesehen von der fixen breite von 520px fast unbegrenzt. Natürlich wollten wir das ganze mal testen und haben dafür eine kleine aber feine Facebook iFrame-App umgesetzt.

Das Ergebnis findet ihr hier: http://facebook.com/Webdesignlovers.

Achtung: Falls ihr “sicheres durchstöbern” über https aktiviert habt, wird die App nicht angezeigt, da wir unsere App nicht über https anbieten.

Facebook Page Template

Unser Template mit HTML, CSS, JS und allen Facebook Funktionen stellen wir euch kostenlos zur Verfügung.

Features

HTML, CSS, JS Template
Integrierte Like Buttons
Share Funktion
Invite Friends Funktion
Kommentare
Integriertes Youtube Video
Google Adsense
Google Analytics

DOWNLOAD

Das ganze wurde nur auf Firefox getestet und dient ausdrücklich zum erweitern. Ladet es euch hier herunter und gebt uns Feedback was ihr damit angestellt habt.

Wie lege ich eine iFrame-App an?

Dann gehen wir mal zum praktischen Teil. Um eine iFrame-App zu erstellen sollte als erstes die App erstellt werden. Also eine einfache Website welche dann per iFrame integriert wird. Meine Website habe ich unter http://webdesignlovers.ch/fb erstellt. Wie ihr seht, kein Rocket-Science sondern kurz und knackig umgesetz.

Zu Testzwecken könnt ihr mein Template hier herunterladen und auf eurem Server wieder hochladen. Die Files können auch später noch problemlos eurem Content und Design angepasst werden.

Wie integriere ich die iFrame-App auf meiner Facebook Page?

Das ist etwas umständlicher als bisher mit FBML. Als erstes browst ihr die Developers Seite an: http://www.facebook.com/developers/ . Erstelle dort eine neue Anwendung. Gib der App im nächsten Schritt einen Namen und stimme den AGB’s zu.

Nachfolgend kann nun ein Icon und ein Symbol definiert werden, sowie die Sprache, den Link zu AGB’s, etc. definiert werden.

Die wichtigen Einstellungen findet man im Menüpunkt “Facebook-Einbindung”. Folgendes kann dort definiert werden:

Canvasseite : Hier geben wir eine Adresse ein, über die die Anwendung später direkt aufrufbar ist.
Canvas URL : Dies ist der absolute URL zu dem Anwendungsordner auf unserem Server. In diesem Beispiel also : http://webdesignlovers.ch/fb/
Canvas-Typ : Hier muß in jedem Fall “iFrame” ausgewählt werden.
iFrame-Größe : Die iFrame Grösse soll sich automatisch anpassen. Das funktioniert nur begrenzt, jedoch helfen wir hier mit Facebook Funktionen nach.
Name des Reiters : Hier kommt der Name hinein, den man später auf der Facebookseite im linken Menü sehen wird (neben dem Icon). Man hat hier 16 Zeichen zur Beschreibung zur Verfügung.
URL des Reiters : Dies ist der Name der Datei, die die Inhalte auf unserem Server beinhaltet. In unserem Fall also : index.html

Nach dem Speichern sieht man die Anwendung nochmal im Überblick:

Nun soll diese App natürlich auf unserer Facebook Page angezeigt werden. Das geht nun ganz fix. Einfach die Anwendungs-Profilseite anklicken, dann kommt man auf die Detailseite der Applikation.

Hier kann einerseits getestet werden ob die Facebook-Funktionen korrekt funktionieren (Zur Anwendung anklicken) oder man kann die App einer Facebook Page hinzufügen mit “Zu meiner Seite hinzufügen”.

Und Boom! – das Ding läuft!

Hier der Link zu unserer App: http://facebook.com/Webdesignlovers

Achtung: Falls ihr “sicheres durchstöbern” über https aktiviert habt, wird die App nicht angezeigt, da wir unsere App nicht über https anbieten.

Facebook-Template Download