Twitter- und Facebook-Buttons W3C-konform und IE-kompatibel mit webEdition

Nachdem ich bereits erläutert habe, wie sich Web Analytics Code optimal mit webEdition integrieren lässt, möchte ich heute auf die immer beliebter werdenden Social Media-Buttons von bspw. Twitter und Facebook eingehen. Bei der Lösung, die ich vorstellen werde, ist zunächst NICHT die Datenschutz-konforme Lösung von heise berücksichtigt.

Social Media Buttons und W3C-Konformität

Facebook und Twitter bieten für die Integration ihrer Like- und Tweet-Buttons folgende Code-Bausteine an:

<a href="https://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="twitterAccount" data-lang="de">Twittern</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>

<div class="fb-like" data-href="www.example.com" data-send="false" data-width="450" data-show-faces="false"></div>

Versucht man nun diese Code-Bausteine mit dem W3C-Validator zu validieren, wird das nicht von Erfolg gekrönt sein, da Attribute wie “data-href”, “data-count” etc. nicht zur offiziellen Spezifikation. Um diese Problem zu umgehen, gibt es so genannte iFrame-Alternativen:

<iframe src="http://platform.twitter.com/widgets/tweet_button.html?text=TweetText&amp;lang=de&amp;count=none" style="width:67px; height:20px;padding-top:2px;" frameborder="0" scrolling="no" allowtransparency="true"></iframe>

<iframe src="//www.facebook.com/plugins/like.php?locale=de_DE&amp;href=www.example.com&amp;send=false&amp;layout=standard&amp;width=450&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=35" allowtransparency="true" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:35px;"></iframe>

Bei dieser Lösung steht nur noch das proprietären IE-Tag ALLOWTRANSPARENCY=”true” einer Validierung entgegen. Dieses könnte man in den aktuellen Browser auch getrost entfernen. Leider führt das Fehlen von ALLOWTRANSPARENCY=”true” dazu, dass in einigen IE-Versionen ein weißer Hintergrund zu sehen ist.

Weiße Darstellung bei der iFrame-Lösung von Twitter und Facebook im Internet Explorer

Die Lösung in webEdition

In webEdition lässt sich eine W3C-konforme und IE-kompatible Lösung mit dem automatischen Setzen aller Parameter wie folgt lösen:

<we:ifNotWebEdition>
  <iframe src="http://platform.twitter.com/widgets/tweet_button.html?text=<we:var name="Title" />&amp;lang=<we:pageLanguage type="language" case="lowercase" doc="top" />&amp;count=none" style="width:67px; height:20px;padding-top:2px;background-color:transparent;" frameborder="0" scrolling="no" <we:ifClient browser="ie">allowtransparency="true"</we:ifClient>></iframe>

  <iframe src="//www.facebook.com/plugins/like.php?locale=<we:pageLanguage type="complete" case="unchanged" />&amp;href=<?php echo urlencode("http://www.example.com"); ?>&amp;send=false&amp;layout=standard&amp;width=450&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=35" <we:ifClient browser="ie">allowtransparency="true"</we:ifClient> scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:35px;"></iframe>
</we:ifNotWebEdition>

Zunächst sorgt der <we:ifNotwebEdition> Tag dafür, dass die Social Media Buttons nicht im Backend geladen werden. Der <we:var name=”Title”/> gibt den Titel des aktuellen Dokumentes aus. <we:pageLanguage type=”language” case=”lowercase” doc=”top” /> sorgt für die kleingeschriebene Sprachauszeichnung des aktuellen Dokumentes, z.B. de und <we:pageLanguage type=”complete” case=”unchanged” /> gibt das vollständige Locale des aktuellen webEdition Dokumentes, z.B. de_DE aus. Zum Schluss nutzen wir noch das <we:ifClient browser=”ie”> Tag, um ALLOWTRANSPARENCY=”true” nur im Internet Explorer auszugeben.