Posted in Canvas, Dev, Facebook, Fluid, Tech on Aug 23rd, 2011 Comments Off
Two weeks ago Facebook announced support for fluid canvas-layouts on their blog. Since not all developers have this new option available yet (it seems to be rolled out together with the new real-time app-activity-stream in the right sidebar), here’s a quick overview on these changes. Since the beginning of time (or rather since platform was first made available in 2007), the Facebook application-canvas has always been fixed to 760px width, content has been centered if the browser window was any larger. Fluid layouts abolish this limitation for the first time. To activate fluid layouts, go to the developer-app: You’ll notice new Canvas settings to set both “width” & “height” to fluid. The “height”-setting basically corresponds to the old setting for “auto-resizing iframes”, so you will most probably already have this set to “fluid” (you’ll still need the JavaScript-call FB.Canvas.setAutoResize(); to do the actual vertical resizing tough). The “width”-setting is entirely new, and has to be set to “fluid” to enable flexible layouts (fixed layouts still we be the default). So, how do fluid canvas layouts look and feel? We’ve prepared a Demo-App at http://apps.facebook.com/superfluidappcanvas/, however if the new layout-option hasn’t been rolled out for your user-account, this app will still be displayed in fixed, 760px width! If fluid layouts are enabled, the content will be rendered like this: Content of canvas is left-aligned Canvas grows dynamically with size of browser window (width of canvas = width of viewport – 256px for the sidebar) No Margin on left, top or right (which takes a bit getting used to) If you decrease the browser window’s width, the canvas-width is reduced down to 774px minimum: Again, here is how the canvas would look with fixed-layout enabled (or, if fluid layouts are not enabled for you yet): While we think the no-margins canvas, which btw. is also changing for fixed width apps, looks a bit strange (especially with rounded corners on your canvas-layout), the new fluid layout certainly gives developers more flexiblity. While it probably is mostly aimed at games, it might be a good solution to integrate existing web-apps/sites which can’t be easily trimmed down to 760px. What do you think, are you going to use fluid layouts on your Facebook-apps?
Read Full Post »
Posted in Dev, Facebook, Graph API, Tech, URL Linter on May 24th, 2011 Comments Off
Florian has just mailed in, asking: “How can I build a Like-button, that links to a particular tab on my Facebook-page, not the whole page itself?” Since we get asked this is regularly, here’s a quick how-to: 1st Attempt: First thing you might want to try – put the the URL to your tab into Facebooks Plugin-builder like you would do with any other URL. Let’s try this with our “We are hiring”-tab (full URL: http://www.facebook.com/diesocialisten?sk=app_173159669408314): Unfortunately, Facebook ignores the ?sk=… parameter, so the resulting like-button references the page itself (http://facebook.com/diesocialisten), and not the tab. You can easily verify this using the Facebook URL-Linter (Michael I. has introduced the Linter a while ago). The same behavior is expected when sharing the tab-URL directly on your Facebook-wall, so that won’t work. 2nd Attempt: the solution to this problem is quite simple! We just have to create an html-stump that only includes the Open-Graph-Tags (title & description of tab, image etc.) we want to be used (title & description of the tab, image etc.) when someone is sharing or liking our tab: <html> <head> <title>Die Socialisten – We are hiring!</title> <meta property="og:url" content="http://apps.diesocialisten.at/tab"/> <meta property="og:type" content="website"/> <meta property="og:title" content="We are hiring!"/> <meta property="og:sitename" content="Die Socialisten"/> <meta property="og:description" content="Unser Entwicklungs-Team sucht Verstärkung! Web-EntwicklerInnen die sich am LAMP-Stack pudelwohl fühlen, Web-Applikationen in Front- und Backend eigenverantwortlich umsetzen können und sich dabei mit Social Web-APIs aller Art austoben möchten, sind bei uns genau richtig!"/> <meta property="og:image" content="http://die.socialisten.at/wp-content/uploads/wp-post-thumbnail/bBT1cW.jpg"/> </head> <body></body> </html> We drop this file somewhere on our webserver (f.e. http://apps.diesocialisten.at/tab/index.php) and test it with the Linter until we are happy with how Facebook displays the Open-Graph-tags: But there’s still a big problem: when clicking on a share or like, users are now redirected to http://apps.diesocialisten.at/tab/index.php – which results in a blank page (containing just the “invisible” OG-tags). So what we basically need to do, is redirect everybody back to the tab, except of course the Facebook crawler, which we still want to feed the OG-tags. We do this by checking the user-agent-string, which identifies the crawler: facebookexternalhit/1.1 (+http://www.facebook.com/externalhit_uatext.php) So here’s complete stub, which includes a tiny php-snippet to examine the user-agent and do the redirect accordingly: <? // Check if we are dealing with Facebook‘s crawler by exmaining the User-Agent. if (strpos($_SERVER["HTTP_USER_AGENT"],"facebookexternalhit")===false) { // If it’s not the crawler, we redirect to the tab… header("Location: http://www.facebook.com/diesocialisten?sk=app_173159669408314"); exit; } // …otherwise we just feed the open-graph-tags: ?> <html> <head> <title>Die Socialisten – We are hiring!</title> <meta property="og:url" content="http://apps.diesocialisten.at/tab"/> <meta property="og:type" content="website"/> <meta property="og:title" content="We are hiring!"/> <meta property="og:sitename" content="Die Socialisten"/> <meta property="og:description" content="Unser Entwicklungs-Team sucht Verstärkung! Web-EntwicklerInnen die sich am LAMP-Stack pudelwohl fühlen, Web-Applikationen in Front- und Backend eigenverantwortlich umsetzen können und sich dabei mit Social Web-APIs aller Art austoben möchten, sind bei uns genau richtig!"/> <meta property="og:image" content="http://die.socialisten.at/wp-content/uploads/wp-post-thumbnail/bBT1cW.jpg"/> </head> <body></body> </html> And this is how the wall-posts, likes etc. referencing http://apps.diesocialisten.at/tab look like:
Read Full Post »
Posted in Business, Checkin, Coffee, Deals, Facebook, Places, Tech on Apr 28th, 2011 Comments Off
Während in Deutschland Facebook Deals (Facebooks Reward Programm für Checkins) bereits im Januar diesen Jahres für ausgewählte Partner gelauncht wurde, haben alle übrigen Betreiber von Places leider noch keine Möglichkeit dieses Angebot zu nutzen – in Österreich und der Schweiz ist von “Deals” ohenhin noch keine Rede. Doch ähnlich wie vor dem offiziellen Start von Facebook Places in Österreich haben wir einen Weg gefunden, das Feature vorab zu nutzen. Wer sich mit dem Thema Deals bereits in der Vergangenheit beschäftigte, der wird nicht um das internationale Unternehmen Groupon herum gekommen sein, die im vergangenen Jahr ein Portal für Österreich und die Schweiz starteten. Groupon vernetzt internetaffine Schnäppchen-Jäger mit Anbietern regionaler und überregionaler Produkte und Dienstleistungen. Die angebotenen Deals sind in diesem Zuge um durchschnittlich 70% des Originalpreises reduziert. Für den Konsumenten in jedem Fall ein lohnendes Geschäft (Textanzeige). Doch wie kam es dazu? In den letzten Tagen werden von Facebook auf Pages vermehrt Popups geschalten, die Administratoren zur Eingabe von fehlenden Adress-Daten auffordern. Da dieser Hinweis sehr oft erfolgt, gaben wir auf einer zu Test-Zwecken eingerichteten Page eine falsche Adresse an, um Facebook zu besänftigen. Wir wählten spaßeshalber als Ort unserer Seite den Apple Campus in der “1 Infinity Loop” in Kalifornien. Nun wurde unsere Fanpage automatisch in einen Facebook Place umgewandelt, der sich in Amerika befindet. Grund genug für Facebook, um uns in der Administratoren-Ansicht der Fanpage den Menüpunkt “Deals” zu spendieren. Als wir den Menüpunkt vorfanden waren wir überrascht und skeptisch, ob das Erstellen von Deals tatsächlich funktionieren würde, da diese erst (zumindest) halb-manuell von Facebook freigeschalten werden müssen. Wir änderten also Profilfoto & -namen auf ein plausibles “Cafehaus Szenario” in Amerika und warteten, ob Facebook tatsächlich unseren Deal freischalten würde. Prompt kam innerhalb von wenigen Stunden die Rückmeldung, dass Facebook unseren Deal “Get a free coffee” offiziell freigeschalten hat. Phase Eins erfolgreich abgeschlossen! Doch zum Aufrufen des Deals müsste man sich nun in Amerika befinden. Zeit für Phase Zwei. Phase Zwei beinhaltete eine erneute Adressänderung, die problemlos funktionierte. Wir änderten die Angaben nun auf unsere eigene Geschäfts-Adresse in Wien zurück. Voila, der Deal wurde nun in der Facebook iPhone-App in der Liste der umliegenden Places als verfügbar angezeigt (siehe Screenshot)! Und hier ist er nun, der vermutlich erste, in Österreich jemals erstellte Facebook Deal. Speziell für euch: “Get a free coffee!” – check in @ Die Socialisten Coffee Club! 100 Stück davon haben wir für euch reserviert. Zum Zeitpunkt des Verfassens des Artikels gibt es noch 98 davon abzuholen. Unsere Mitarbeiter sind über den Deal informiert und freuen sich, euch das Incentive während einem Tratsch über Deals, Places etc. auszuhändigen . Das Angebot gilt übrigens noch bis Ende Mai! (Der Cafe selbst schmeckt wohl im Starbucks, der nur einige Meter von unserem Büro entfernt ist, besser. Aber trendigeren Cafe als bei uns findet ihr in ganz Österreich wohl dennoch (noch) nicht!) Und hier findet ihr noch einige Screenshots, wie unser Facebook Deal am iPhone angezeigt wird: Hinweis: Obwohl das Ändern der Adresse und Anlegen des angesprochenen Deals auf unserer Test-Page probemlos funktionierte, raten wir derzeit dennoch von einem produktiven Einsatz ab.
Read Full Post »
Posted in Elegance, Facebook, Highlights, Umfrage on Mar 27th, 2011 Comments Off
Schon zu Beginn des Jahres haben wir gemeinsam mit unserem Partner Ambo Media die deutsche Facebook-Fanpage des Modeversands Elégance mit einem saisonal aktualisiertem Landing-Tab sowie einem Umfrage-/Quiz-Tab ausgestattet, welches seitdem für unters…
Read Full Post »
Europas größter Kulturkomplex, das MuseumsQuartier in Wien, hat neben einem Web-Relaunch endlich auch eine Social Web-Präsenz auf Facebook und Twitter spendiert bekommen – wir durften das von ambuzzador konzipierte Landing-Tab beisteuern.
Lin…
Read Full Post »
Posted in Berlin, Business, Facebook, H4ck on Mar 15th, 2011 Comments Off
Facebook is holding their first developer-event outside the United States next week in Berlin - the agenda is covering everything from basic platform-concepts to current hot topics like Facebook Credits and advanced techniques like Graph API-Batching, realtime updates and introspection. An opportunity we won’t miss – the better part of Die Socialisten will be in Berlin next week – let’s hack together! Signup: H4CK Berlin Full Agenda: 1. Kickoff: Welcome/Introduction 2. Facebook Platform: Overview and Core concepts 3. Social Design 4. Social plugins + Open Graph Protocol 5. Using Social Channels: Distribution via News Feed, Requests, Dialogs 6. Authentication in Canvas, Page Tabs, Your Site - Mobile SingleSignOn 7. Graph API 8. Insights 9. Using Facebook Credits 10. HTML5 Advanced: – Using the Graph API to the full – Batching, Realtime updates, Introspection etc PS: there are more Facebook-events coming in march – Paris & London – check out the developer blog!
Read Full Post »
Die von Facebook vor knapp zwei Wochen angekündigten “Sponsored Stories” (zum Intro-Video) werden seit gestern weltweit ausgerollt und sind – zumind. teilweise – auch schon in Österreich verfügbar. Mit Sponsored Stories werde…
Read Full Post »
Posted in Business, Checkins, Facebook, Foursquare, Gowalla, Highlights, LeWall, LeWeb, LeWeb10, Realtime, Tech, Twitterwall, Webfeuer on Dec 8th, 2010 Comments Off
For today’s LeWeb’10 in Paris we put together a neat showcase of our next-gen twitterwall dubbed LeWall Next-gen twitterwall? think of it as a typical (almost) realtime twitterwall plus additional sources like Foursquare- & Gowalla-checkins, Facebook-posts, Flickr-photos etc. (more to come!). Link: http://widgets.stadtkinder.com/leweb Want your own Wall? Contact wall@socialisten.at! Since LeWeb arguably is the largest internet-conference in europe, we pretty much were sure to get high volumes of posts, checkins etc… and volumes we got! as of now (afternoon of day #1) we count +11.000 tweets, +1.500, +300 flickr-photos (we’ve added flickr-support at noon) and only few facebook-posts (there seem to be general issues with public search of the graph API). Here are some screenshots displaying… …some Tweets, Photos from Flickr (left) and of course some checkins from Foursquare (right). Our wall can be used standalone/fullscreen for projection on a beamer or large TV-set, but can also easily be integrated as a widget on your own site (below, left). Right now, the wall supports these incoming channels (more to come, pretty soon!): Twitter (tracking multiple keywords, hashtags) Foursquare (tracking of multiple venues) Gowalla (tracking of multiple spots) Facebook (tracking of wallposts on multiple pages, Facebook-wide search for publicly available wallposts via Graph-API seems broken at them moment) Flickr (tracking of mutliple tags) Also: kudos go to webfeuer, who gave us a chance to premiere & beta-test our wall at their anniversary-party last week (click for more photos of the wall in action). Oh, and here’s a little screencast we’ve recorded today:
Read Full Post »
Posted in Facebook, Graph API, linter, meta, Open Graph, Tech on Nov 30th, 2010 Comments Off
Ever wondered how you can force Facebook to fetch and refresh your changed Open-Graph meta-tags again? Usually it takes days before Facebook crawls back to your page and update it’s meta-data – if you need to change an image or text you will have t…
Read Full Post »
Posted in Design, Facebook, Tabs, Tech on Nov 22nd, 2010 Comments Off
We sure don’t hope so! But if you take a closer look at the redesigned page-layout, which was been introduced with Facebook Places (and which already is effective for existing pages which have been merged with a Place, like this one), it looks l…
Read Full Post »
,
,
,
) 