WebdesignloversFacebook | Webdesignlovers

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

Web Heroes 2.0

Webdesignlovers — Tue, 18 Jan 2011 20:00:43 +0000

Web Heroes sind für uns die Helden welche das Internet zu dem machen was es heute ist. Wahre Erfolgsgeschichten unserer Zeit. Doch was waren die Beweggründe solche Projekte ins Leben zu rufen, wie erreichten sie solche Nutzerzahlen und was sind Ihre Ansichten zum digitalen Leben. Wir haben recherchiert und können euch interessante Interviews und Berichte zu Personen wie Matt Mullenweg (WordPress Gründer), Jack Dorsey (Twitter Gründer), Mark Zuckerberg und weiteren interessanten Persönlichkeiten vorstellen.

Matt Mullenweg, WordPress Gründer

Matthew Mullenweg (27 Jahre) ist Initiator und leitender Entwickler des weit verbreiteten Web-Publishing-Systems WordPress und arbeitet an weiteren Open-Source-Projekten mit. Ende 2005 gründete Mullenweg das Unternehmen Automattic, welches unter anderem das Blog-Portal WordPress.com betreibt, das WordPress-Plugin Akismet entwickelt und den im August 2007 gekauften Dienst Gravatar bereitstellt.

Website: http://ma.tt
Twitter: http://twitter.com/mattmullenweg

Jack Dorsey, Twitter und Square Gründer

Jack Dorsey (35 Jahre) ist ein Softwareentwickler und Unternehmer. Dorsey studierte an der Webster University. Seine bekannteste Entwicklung ist der Nachrichtendienst Twitter, welcher im März 2006 als ein Forschungs- und Entwicklungsprojekt innerhalb der San Franciscoer Podcasting-Firma Odeo entstand. Im Mai 2009 präsentierte er den mobilen Bezahldienst Square der Öffentlichkeit.

Twitter: http://twitter.com/JACK

Mark Zuckerberg, Facebook Gründer

Im Jahr 2004 gründete Mark Zuckerberg (27 Jahre) als Student Facebook, nachdem er sich erfolglos an einigen anderen Internetprojekten versucht hatte. Verschiedene Quellen schätzen den Gesamtwert des Unternehmens auf 3 bis 15 Milliarden US-Dollar.

Website: http://www.facebook.com/markzuckerberg
Twitter: http://twitter.com/finkd

Dries Buytaert, Gründer von Drupal

Dries Buytaert (33 Jahre) ist ein Programmierer von Open Source-Software und der Gründer und Chefentwickler des CMS Drupal. Buytaert verteidigte seine Dissertation in Informatik am 27. Januar 2008 an der Universität Gent in Belgien.

Website: http://buytaert.net/
Twitter: http://twitter.com/dries

Kevin Rose, Digg Gründer

Kevin Rose ist Gründer des Social Bookmark Dienst Digg, der sich auf jede Art von Nachrichten spezialisiert hat. Verweise auf Neuigkeiten werden von Benutzern mit Titel, Beschreibung und Kategorie eingestellt und von anderen Benutzern mit Hilfe des Verweises „digg it!“ als positiv bewertet.

Website: http://kevinrose.com
Twitter: http://twitter.com/KEVINROSE

Dennis Crowley, Foursquare Gründer

Dennis Crowley ist ein US-amerikanischer Internet-Unternehmer, der vor allem als Mitbegründer der populären Internet-Portale Dodgeball und Foursquare bekannt geworden ist. Crowley ist Bachelor-Absolvent der Syracuse University’s S.I. Newhouse School of Public Communications.

Website: http://denniscrowley.com
Twitter: http://twitter.com/dens

Pete Cashmore – Mashable Gründer

Pete Cashmore ist CEO und Gründer des populären Blogs Mashable. Er gründete Mashable in Aberdeen, Schottland 2005 im Alter von 19 Jahren.

Twitter: http://twitter.com/petecashmore

David Karp, Gründer von Tumblr

David Karp ist Unternehmer und lebt in New York City. Er ist Gründer und CEO der populären Microblogging Plattform Tumblr.

Website: http://davidslog.com
Twitter: http://twitter.com/davidkarp

Kreative Offices bei Facebook, Twitter & Co.

Webdesignlovers — Fri, 15 Jan 2010 10:56:35 +0000

Wer sich an seinem Arbeitsplatz wohl fühlt arbeitet besser, dies haben sich besonders die Tech-Firmen in den letzten Jahren hinter die Ohren geschrieben. Insbesondere wenn es um das Anwerben von den besten Entwicklern und kreativen Köpfe geht lässt sich damit ordentlich punkten. Schicke Einrichtungen, Meeting-Rooms zum wohlfühlen, Lounge und Spiele um die tatkräftigen Arbeiter bei Laune zu halten. Seht was sich die grossen und kreativen einfallen lassen.

Nothing Amsterdam

Link: http://www.nothingamsterdam.com

Ogilvy

Link: http://www.ogilvy.com

OKIA

Link: http://www.okia.ee

Panic Software

Link: http://www.panic.com

Pixar

Link: http://www.pixar.com

Razorfish

Link: http://www.razorfish.com

Selgas Cano

Link: http://www.selgascano.com

Skype

Link: http://www.skype.com

Softonic

Link: http://en.softonic.com

The Wonderfactory

Link: http://thewonderfactory.com

Third Frame Studios

Link: http://www.3fs.si/

Threadless

Link: http://www.threadless.com

Three Rings Design

Link: http://www.threerings.net

Twitter

Link: http://www.twitter.com

Yahoo

Link: http://www.yahoo.com

Youtube

Link: http://www.youtube.com

Zappos

Link: http://zappos.com

40 Facebook Fanpages die rocken!

Webdesignlovers — Thu, 12 Nov 2009 11:01:11 +0000

Auf den ersten Blick mögen viele Facebook Seiten uninteressant wirken, da nahezu keine Gestaltungsmöglichkeiten bestehen. Dieser Eindruck täuscht aber, denn die Seiten bieten durchaus sehr grosses Potential für die Markenführung. Die Seiten ermöglichen es den Nutzern, sich mit einem Thema oder einer Marke zu identifizieren und sich mit ihren Freunden hierzu auszutauschen.

Die facebook Nutzer nutzen die facebook Seiten vor allem (und nur dann!) wenn die Inhalte sie interessieren bzw. unterhalten. Es ist schon fast kurios, dass Seiten wie Skittles 3.5 Millionen Fans haben, die sich über die Süssigkeiten austauschen möchten. Mit der Möglichkeit, Anwendungen in Seiten zu integrieren werden die Möglichkeiten einer facebook Seite schier unbegrenzt. Wir haben euch eine Auflistung der schönsten Facebook Seiten zusammengestellt.

Wenn euch der Artikel gefällt, dann unterstützt uns doch auf unserer Fanpage

Ben & Jerry’s Homemade, Inc.

The Hangover

Bud Light