Twitter im WebSoziCMS verwenden

Wenn man Twitter als Widget auf der Webseite verwenden will, bekommt man einen Code, der ungefähr so aussieht:

<a class="twitter-timeline"  href="https://twitter.com/spdbawue"  data-widget-id="251717227445895168">Tweets von @spdbawue</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

Wenn man diesen Code in eine Webseite packt, erhält man dieses Ergebnis:


Leider gibt es im WebSoziCMS in Kombination mit dem Firefox eine Fehldarstellung, deshalb muss man einen kleinen Umweg gehen, wenn man Twitter im WebSoziCMS als rechten Block einbauen will. Und der geht so:

  1. Code in eine leere Textdatei packen, bspw. so: http://dokumente.spd-bw.de/spdbw-twitter-embed.html
  2. Diese URL als iFrame einbauen, der Code dafür ist dieser:

<p><iframe align="left" frameborder="0" height="450" marginheight="0" marginwidth="0" scrolling="no" src="http://dokumente.spd-bw.de/spdbw-twitter-embed.html" width="310"></iframe></p>

Ergebnis:

Service: Piktogramme für Facebook, RSS, Twitter, YouTube und Flickr

Piktogramme sind praktisch und sehen hübsch aus (siehe rechte Spalte). Die ersten vier Piktogramme kommen aus dem Willy-Brandt-Haus, das Flickr-Piktogramm habe ich rasch selbst gebaut.

Facebook-Pictogramm RSS-Pictogramm Twitter-Pictogramm />YouTube-Pictogramm />Flickr-Pictogramm
Facebook RSS Twitter YouTube Flickr

Viel Spaß damit!

PS: Im internen Bereich von SPD.de findet ihr noch mehr Piktogramme, die müsst ihr allerdings aus einer EPS-Datei extrahieren – das habe ich in diesem Fall schon erledigt.

PPS: Ein kleiner Extraservice: Hier die vier aktuellen Farben (jeweils CMYK/RGB/HTML), die im Corporate Design der SPD zur Anwendung kommen:

Rotes Quadrat Purpurnes Quadrat Gelbes Quadrat Türkises Quadrat
Rot:
C 0 M 100 Y 100 K 0
R224 | g0 | B27
#e2001a
Purpur:
C 28 M 100 Y 0 K 25
R153 | g0 | B102
#990066
Gelb:
C 0 M 5 Y 35 K 0
R255 | g240 | B185
#fff0b9
Türkis:
C 42 M 0 Y 26 K 0
R162 | g212 | B199
#a2d4c7