Schlagwort-Archiv: Webdesign

Designidee: Wie auf Facebookseiten Autoren sichtbar gemacht werden könnten

Nachdem meine Blogpraktikantin Ulrike jetzt auch als Co-Admin auf meiner Facebook-Seite und meiner Google+ Seite aktiv wird, komme ich – wie viele andere Seitenbetreiber – in die Not, kenntlich machen zu müssen, wer da gerade schreibt. Bislang war der gewiesene Weg für solche Fälle, das Einführen von Kürzeln. Und so handhaben wir es jetzt auch: wenn -ud- dabei steht, ist Ulrike dran, wenn nicht, dann ich. Denn wenn ihr Praktikum beendet ist, werde wieder nur ich posten und kein Kürzel benötigen. Aber was wäre, wenn man den Autor auf Seiten in jedem Beitrag mit Bild und Info sichtbar machen könnte?

Weiterlesen

Ich freue mich, wenn Sie diesen Beitrag weitersagen via        

Facebook: Neues Script für lange iframe-Tabs erforderlich

Facebook hat wieder mal was geändert und so funktioniert der bisherige Workaround zum Entfernen des Scrollbalkens und vollständigen Anzeigen von iframe-Tabs auf Facebook-Seiten jetzt leider nicht mehr. Den Scrollbalken entfernt es zwar weiterhin, aber der Reiter wird abgeschnitten angezeigt.

Ich gab die Frage an meine Leser weiter und erhielt sogleich folgende Lösung von Danny Trapp:

  • der body-tag wird künftig ohne overflow:hidden verwendet
  • man füge statt des alten fb-root scripts folgendes ein:

<div id=”fb-root”></div>
<script type=”text/javascript”>
window.fbAsyncInit = function() {
FB.init({
appId: ‘APP-ID‘,
status: true,
cookie: false,
xfbml: true
});
FB.Canvas.setSize({ width: 810, height: xxxxx });
};
(function() {
var e = document.createElement(‘script’);
e.async = true;
e.src = document.location.protocol +
‘//connect.facebook.net/de_DE/all.js’;
document.getElementById(‘fb-root’).appendChild(e);
}());
</script>

  • Bei APP-ID setzen Sie wie gewohnt die ID Ihrer eigenen App ein, mit der Sie Ihre page(s) in Facebook einbinden.
  • Mit der Pixelangabe der Höhe muss man ggf. etwas experimentieren, bis man den richtigen Wert hat.
  • Wichtig ist auch, dass man in den App-Settings im Developer-Bereich auf 810px Weite umschaltet (falls nicht ohnehin schon geschehen).

 Herzlichen Dank, Danny!

Das komplette (und hiermit aktualisierte) Tutorial zum Einbinden von eigenen Inhalten in Seitentabs bei Facebook finden Sie hier:

http://spr.li/iframe

oder auf Scribd:

http://www.scribd.com/doc/50039880/Facebook-iframe-Tabs-Tutorial

Ich freue mich, wenn Sie diesen Beitrag weitersagen via        

Wie barrierefrei ist Facebook?

Foto von Heiko KunertHeiko Kunert (34) ist blind und liebt Facebook. Daher habe ich den Sprecher des Blinden- und Sehbehindertenvereins Hamburg gebeten, in einem Gastbeitrag zu beschreiben, wie er das soziale Netzwerk nutzt, welche Barrieren es gibt und wie diese abgebaut werden können:

Immer mehr blinde und sehbehinderte Menschen sind bei Facebook. Mithilfe einer sog. Screenreader-Software, einer synthetischen Sprachausgabe und einer Braillezeile, die den Bildschirminhalt in Blindenschrift ausgibt, bin ich als blinder User online. Menschen mit einem geringen Sehrest verwenden Vergrößerungssoftware. Facebook als größtes soziales Netzwerk ist gerade für behinderte Menschen besonders reizvoll, fallen hier doch viele Berührungsängste und alltägliche Barrieren weg. Leider gilt dies nicht für die technischen Hürden.

Technische Hürden und Umwege

Manche Grafiken und Schaltflächen sind nicht mit einem Alternativtext versehen, den die Sprachausgabe wiedergeben könnte. Der Dynamik der Site sind gerade ältere Screenreader nicht gewachsen – so aktualisieren sich irgendwo auf der Seite Inhalte, ohne dass der blinde Nutzer es merkt. Viele Applikationen sind vollkommen unzugänglich. Blinde User bekommen hier lediglich endlose, kryptische Zeichenfolgen angesagt. Facebook sollte die App-Entwickler hier zu mehr Accessibility verpflichten.

Dennoch macht die Faszination Facebook vor blinden Nutzern nicht halt. Viele von uns nutzen nicht die reguläre Startseite, sondern m.facebook.com. Die Seite ist eigentlich für mobile Endgeräte gedacht und als reine HTML-Site auf die wesentlichen Punkte reduziert. Damit ist sie auch von den Hilfsmitteln blinder und sehbehinderter User klarer darstellbar.

Facebook ist durchaus bemüht, Barrieren abzubauen. Das Unternehmen kooperiert mit der American Foundation for the Blind. Immer wieder werden Elemente, die das Surfen erleichtern, eingebunden, zuletzt die Orientierungspunkte. Das sind für den sehenden Nutzer nicht sichtbare HTML-Informationen, die aber vom Screenreader erkannt werden – so kann ich mit einfachen Tastenkombinationen direkt zur Suche, zur Navigation o. Ä. springen und bekomme Infos über die Struktur der Seite.

Dennoch gibt es für die Webdesigner aus Kalifornien noch viel zu tun. Zum Beispiel sind nicht alle Funktionen der Hauptseite in der mobilen Version verfügbar – an Grenzen stoßen blinde User beim Erstellen von Events. Dass der Chat optimierbar ist, gibt Facebook auf der Hilfeseite für behinderte Nutzer selbst zu. Dort heißt es:

„Facebook-Chat arbeitet derzeit mit dynamischen Internetinhalten, die bei manchen Bildschirmlesern Probleme bereiten können. Wir arbeiten daran diese Probleme zu lösen. Alternativ dazu unterstützt Facebook-Chat jetzt Jabber, so dass du mit deinen Facebook-Freunden über deinen Lieblings-IM-Client chatten kannst (z.B. AIM 7.2).“

Die Hilfeseite gibt weitere nützliche Tipps für die barrierefreie Nutzung von Facebook: U. A. zur Registrierung und für den Zugang zum Geschenkeladen. Sie nennt Tastenkombinationen, gibt Tipps zum Vergrößern der Seite und bietet Usern mit einer Seh- oder Körperbehinderung besondere Kontaktformulare an.

Eigene Inhalte barrierefrei gestalten

Und noch ein wichtiger Tipp, wie Sie blinden und sehbehinderten Nutzern den Zugang zu Ihren Fotos ermöglichen können:

„Die beste Möglichkeit sicherzustellen, dass deine Bilder für jeden zugänglich sind, ist das Hinzufügen von Bildunterschriften. In der Bildunterschrift kannst du das Bild kurz beschreiben und so sicherstellen, dass Nutzer, die das Bild nicht sehen können, als Alternative eine Beschreibung des Bildes haben.“

Seit einiger Zeit können Sie als Betreiber von Facebook-Seiten Inhalte via Iframe-Tabs einbinden. Der Inhalt von externen Seiten wird damit direkt in der Facebookseite wiedergegeben. Dies ist eine Chance für mehr Accessibility. Dies gilt selbstverständlich nur, wenn Ihre externe Seite barrierefrei gestaltet ist.

Wenn Sie weitere Fragen zum Thema Facebook und Barrierefreiheit im Besonderen oder über das Surfen und Leben blinder Menschen im Allgemeinen haben, besuchen Sie mich gern in meinem Blog, bei Twitter und natürlich bei Facebook. Schauen Sie auch gern auf der noch jungen Facebook-Seite des Blinden- und Sehbehindertenvereins Hamburg vorbei. Infos zu barrierefreiem Webdesign erhalten Sie beim Projekt „Barrierefrei Informieren und Kommunizieren“.

Danke für Deinen Gastbeitrag, Heiko! :-)
(Foto von Heiko Kunert: Anna-Karina Handke
)

Damit auch sehende Nutzer einen Eindruck davon bekommen, wie sich Facebook vom Screenreader vorgelesen anhört, hier eine Aufnahme von meiner Fanseite, die Manuela und Martin Kramer netterweise als Ergänzung zu diesem Artikel gemacht haben (Danke, Ihr beiden!):

mit passendem Screenshot als optischem Äquivalent dazu:

Bildschirmfoto der Fanseite wie sie in der vorangegangenen audiodatei vom Screenreader vorgelesen wurde

Ich freue mich, wenn Sie diesen Beitrag weitersagen via        

Facebook: Wenn der iframe-Tab Probleme macht – UPDATED

Das iframe-Tab-Tutorial zum Einbinden individueller Inhalte in Facebook-Fanseiten erfreut sich großer Resonanz. Leider gibt es aber beim ein oder anderen Anzeigeprobleme. Daher hier noch ein Nachtrag zum Tutorial:

Method POST not allowed

Problem 1: Die externen Inhalte werden im iframe-Tab nicht angezeigt, stattdessen erscheint eine Fehlermeldung wie: “Method Not Allowed The requested method POST is not allowed for the URL”

Lösung: Benennen Sie die einzubindenden Seiten von .html um in .php (auch Verlinkungen innerhalb des Tabs ändern, falls vorhanden!). Dann sollte alles normal angezeigt weden.

Scrollbalken

Problem 2: Die einzubindende Seite ist höher als 800px, so dass Facebook Scrollbalken in den Tab einfügt, was unschön aussieht.

UPDATE2 (August 2012): Die unten gezeigte Lösung funktioniert nicht mehr. Lesen Sie die neue Lösung HIER nach.

 

Lösung: Setzen Sie <body style=”overflow:hidden”>

und fügen Sie folgendes Script am Anfang des body ein:

<div id=”fb-root”>
<script src=”http://connect.facebook.net/en_US/all.js“></script>

<script type=”text/javascript”>
FB.init({
appId : ‘IHRE APP-ID‘,
status : true,
cookie : true,
xfbml : true,
oauth: true
});
FB.Canvas.setAutoResize(true, 500);
</script>

</div>

 

 

Das Tutorial wurde auch um diese beiden Hinweise ergänzt und kann nach wie vor als pdf (439kb) heruntergeladen werden unter:

http://www.scribd.com/doc/50039880/Facebook-iframe-Tabs-Tutorial

oder

http://www.schwindt-pr.com/iframetabs.pdf

Ich freue mich, wenn Sie diesen Beitrag weitersagen via        

Facebook-Fanseiten weitersagbar machen (iframe-Tab plus HTML)

Mit den neuen iframe-Tabs kann man ganz bequem individuelle Inhalte in seine Fanseite einbauen, Weitersage-Möglichkeiten inklusive. Damir lässt sich auch eine erweiterte Alternative zum  seit längerem fehlerhaften “Freunden vorschlagen”-Link erstellen. Ich habe das auf meiner Fanseite mal zu Demonstrationszwecken gemacht:

 

Wie das mit den Weitersagebuttons geht, habe ich hier im Blog bereits vor einiger Zeit erklärt:
http://dewww.schwindt-pr.com/2011/01/21/weitersagen-auf-facebook-und-twitter-fuer-fanseiten-static-fbml/

…und sie auch auf meiner Website und den anderen individuellen Unterseiten meiner Fanseite erfolgreich eingesetzt.

Das iframe-Tab-Tutorial von GECKOweb und mir finden Sie unter:
http://www.scribd.com/doc/50039880/Facebook-iframe-Tabs-Tutorial oder
http://www.schwindt-pr.com/iframetabs.pdf

 

 

Ich freue mich, wenn Sie diesen Beitrag weitersagen via        

Buttons zum Weitersagen auf Facebook und Twitter für Fanseiten

Obwohl ich hier schon vor einiger Zeit den Code für Weitersage-Buttons veröffentlicht hatte, bekomme ich trotzdem Rückfragen zur Umsetzung der bei mir verwendeten Buttons. Daher hier der konrekte Code inklusive Layout-Anweisungen von meiner Fanseite:

Anmerkung: (ich schreibe meine Stilanweisungen soweit möglich direkt mit style in die jeweiligen Elemente, weil Facebook das schneller lädt als ein externes CSS-Stylesheet und vorausgestellte Inline-CSS von ie nicht akzeptiert wird. Man kann das aber natürlich auch ins externe CSS setzen.)

<p style=”font-size:1.2em; text-align:right;”>

<a style=”border:1px solid #BED4FF; padding: 2px 10px; background-color:#D8DFEA; font-weight:600;” href=”http://www.facebook.com/sharer.php?u=WEITERSAGE-URL=WORUM GEHT’S?” title=”Via Facebook weitersagen”>Teilen</a>

<a style=”border:1px solid #B0E2FF; padding: 2px 10px; background-color:#CAEBFF; font-weight:600;” href=”http://twitter.com/home?status=TWEETEXT KURZ-URL” title=”Via Twitter weitersagen”>Tweet</a>

</p>

Auf meiner Fanseite sieht das dann so aus:

Das Layout der Buttons können Sie per HTML beliebig ändern. Ich habe meines an mein Design angepasst und nur mit Blau und Türkis Facebook und Twitter unterschieden.

In der Anwendung sieht das dann z.B. so aus:

Teilen auf Facebook

Anmerkung: Was da als Anhang angzeigt wird, liegt übrigens nicht am Teilen-Button, sondern an der Aufbereitung des Quelltexts der verlinkten Seite.

und so:

Weitersagen auf Twitter

Den Text inkl. @mention können Sie im Code des Weitersagebuttons vorgeben.

 

Meine neuen Buttons werden inzwischen schon eifrig genutzt. :-)

Ich freue mich, wenn Sie diesen Beitrag weitersagen via        

Static FBML-Reiter und der Internet Explorer…

UPDATE März 2011: FBML-Reiter sind hinfällig. Das Einbinden individueller Inhalte, sollte jetzt über iframe-Tabs gelöst werden. Siehe http://dewww.schwindt-pr.com/2011/03/04/facebook-iframetabs/

Wenn Sie Ihre FBML-Reiter wie bisher im Static FBML-Tutorial von mir und Alexandra Steiner beschrieben mit <style type=”text/css”> eingebunden hatten, werden Sie feststellen, dass der Internet Explorer aufgehört hat, das richtig umzusetzen (Abhilfe gibt es weiter unten in diesem Blogpost):

So sollte es aussehen (Firefox, Opera, Safari, Chrome verstehen es auch richtig):

Das ist, was der ie damit macht:

Dank folgenden Kommentars von August Florian Golser zur Diskussion über dieses Phänomen auf der Fanseite von schwindt-pr konnte ich das Problem schnell beheben:

Wenn Sie Ihre Reiter also bisher mit <style type=”text/css”> layoutet hatten, tun Sie einfach Folgendes:

  1. Erstellen Sie eine .css-Datei mit dem Inhalt, der sich bislang zwischen <style type=”text/css”><!– und –> </style> befunden hat und laden Sie diese auf den Server Ihrer regulären Website hoch.
  2. Löschen Sie im Code in Ihrem Static FBML-Reiter die Stilbefehle von <style type=”text/css”><!– bis einschließlich  –> </style>
  3. Setzen Sie statt dessen <link rel=”stylesheet” type=”text/css” href=”http://www.URLihrercssdatei.css”> als erste Zeile in den Code Ihre individuellen Reiters und speichern Sie das Ganze in Facebook ab.

Jetzt sollte auch der Internet Explorer Ihre Inhalte richtig anzeigen.

Deshalb haben wir das Static FBML-Tutorial an die neuen Bedingungen angepasst!
HIER KOSTENLOS DOWNLOADEN

Wer seine Stilbefehle übrigens inline (also z.B. <p style=”…”>) angegeben hat, braucht nichts zu ändern. Ist auch ein gangbarer (wenn auch umständlicher) Weg, wenn man die CSS-Datei nicht mal eben auf einen externen Server auslagern kann. Inline versteht sogar der Internet Explorer… ;-)

Ich freue mich, wenn Sie diesen Beitrag weitersagen via        

Kommende Änderungen für Facebook-Seiten

Lange, lange kündigen meine Kollegen und ich es schon an, jetzt gibt es – laut Facebook – endlich ein konkretes Datum für die Umsetzung:

In der Woche vom 23. August 2010 werden

  • Felder (Boxes) abgeschafft (und zwar in Profilen und Seiten!). Die Nutzer sollen sowohl in den Feldern als auch im Hilfe-Bereich darauf hingewiesen werden.
  • Anwendungs-Reiter (z. B. individuelle Reiter mit Static FBML oder Reiter für selbst geschriebene Anwendungen) auf 520px Breite verkürzt! Seiten-Admins sollen eine Vorschau davon erhalten, so dass sie ihre individuellen reiter rechtzeitig anpassen können. So oder so werden alle individuellen Reiter (auch die in Profilen) in der Woche vom 23.August 2010 automatisch größenangepasst.

Und so sieht das dann aus (anklicken, um den tatsächlichen Reiter zu sehen):

Dazu Facebook:

“These updates are designed to simplify navigation for users, reduce complexity for developers, and enable us to build the next generation of tools for growing your business with Facebook. We’ll share more of our plans for the roadmap in the coming weeks.”

Wir dürfen gespannt sein, wie dieser Übergang weiter kommuniziert und gemanagt wird. Am besten schieben Sie es nicht auf die lange Bank und richten Ihre Facebook-Präsenz gleich auf die kommenden Änderungen ein (wenn Sie es nicht ohnehin längst getan haben).

Ich freue mich, wenn Sie diesen Beitrag weitersagen via        

Facebook: Like-Buttons layouten und verwenden

Okay, ich hab jetzt mal zwei von den neuen Like-Buttons in schwindt-pr.com eingebaut und zwar in der rechten Spalte oben, auf den beiden Unterseiten, die sich auf Facebook beziehen:

Dabei habe ich den Code des iframes etwas modifiziert:

<iframe src=”http://www.facebook.com/plugins/like.php
?href=http://www.schwindt-pr.com/facebook_ebook.html
&amp;layout=standard
&amp;show-faces=false (= keine Gesichter anzeigen)
&amp;width=230
(= angepasste Weite)
&amp;action=recommend (=Empfehlungs-Button statt “Gefällt mir”)
&amp;colorscheme=light”
scrolling=”no”
frameborder=”0″
allowTransparency=”true”
style=”
border:1px solid #94A3C4; (= Rahmenlinie)
overflow:hidden;
width:230px;
(= angepasste Weite)
height:45px; (= angepasste Höhe)
padding: 10px; (= Innenabstand des Widgets)
margin-bottom:10px (=Außenabstand des Widgets nach unten)
“>
</iframe>

Das Ergebnis sieht so aus:

Ergebnis, wenn ich nicht auf Facebook eingeloggt bin

Wenn ich eingeloggt bin, sehe ich, wieviele meiner Freunde unter den Empfehlenden sind und wer

Wenn jemand den Empfehlen-Button anklickt, erscheint in seinem Profil eine Meldung wie diese:

Außerdem sehe ich als Freund von Thomas eine Meldung über die Empfehlung in meinem Newsfeed (Startseite):

Das kommt daher zustande, dass ich den dazu notwendigen meta-tag in den Quelltext der Seiten gestellt habe, die die Empfehlen-Buttons enthalten:

<meta property=”og:title” content=”Facebook-Einf&uuml;hrung von schwindt-pr” />

Es gibt zwar auch noch einen meta-tag für ein Bild dazu, aber das wurde mir bislang noch nicht angezeigt.

<meta property=”og:image” content=”http://www.schwindt-pr.com/bilder/schwindtpr.jpg” />

Interessant ist, dass, sobald man eine Empfehlung durch erneutes Anklicken des Empfehlen-Buttons auf der Website zurücknimmt, auch die Meldung dazu auf Facebook verschwindet. Hier findet also tatsächlich ein ständiger Informationsaustausch statt.

Was halten Sie von diesen neuen “social plugins”?
Verwenden Sie sie schon oder haben Sie es vor?
Oder haben Sie Bedenken und wenn ja, welche?

Ich freue mich, wenn Sie diesen Beitrag weitersagen via        

Facebook-Fanseiten: Inhalte auf FBML-Reitern nur für Fans sichtbar machen

FBML ist hinfällig. Individuelle Inhalte müssen jetzt mit eigener Anwendung via iframe oder mit Hilfe von Drittanwendungen eingebunden werden.

Dank des Hinweises eines meiner Blogleser wurde ich heute auf die Möglichkeit aufmerksam gemacht, bestimmte Inhalte in FBML-Reitern nur für Fans sichtbar zu machen. Alles, was man zu tun braucht, ist den betreffenden Bereich mit folgendem Tag zu versehen:

<fb:visible-to-connection>INHALT NUR FÜR FANS</fb:visible-to-connection>

 

Die so definierten Inhalte werden erst dann sichtbar, wenn jemand Fan der betreffenden Seite ist. Nichtfans kann man im öffentlichen Text auf die Tatsache hinweisen, dass weitere Inhalte nur für Fans sichtbar werden und Sie zum Fanwerden auffordern.

Weitere interessante Tags finden sich im FBML Developer Wiki.

Diesen Tipp finden Sie ab sofort auch im kostenlosen Tutorial für FBML-Reiter (pdf, 920kb) von Alexandra Steiner und mir.

Ich freue mich, wenn Sie diesen Beitrag weitersagen via