Aufgabe 3: Einbettung des Twitter-Feeds

corina.schilling.uni-linz, 30. September 2013, 16:04

Die Aufgabe war es den Twitter-Feed Hash-Tag "webwi" einzubetten.

Von Twitter wird angeboten ein Widget zu erstellen. Ich erstelle nun solch ein neues Widget mit der Suchanfrage #webwi. Die Häckchen bei "Sicher Sicherheitsmodus" und "Bilder automatisch ausklappen" lasse ich so stehen und stelle die Höhe auf 800. Das Thema möchte ich dunkel haben und die Link Farbe stelle ich auf #33c2e6 ein. Speichern.

Ich gehen nun in meinen Lernblog. Auf der rechten Seite unter Menü klicke ich auf Layouts. Danach im Content auf Skin, dann Site Layout und Main page. Ich öffne so den hinterlegte HTML Code (um diesen Code zu erstellen ist die SeiteSELFHTML oft sehr hilfreich). 

An diesem HTML Code ist für diese Aufgabe aber nur relevant heraus zu lesen welche id oder class welcher Teil der Seite darstellt. Content steht zum Beispiel für den Bereich wo meine Beiträge erscheinen. Der Header beispielsweise ist der (bei mir) grüne Balken oben mit dem Namen meines Lernblogs. 

Da ich mein Widget in der rechten Spalte ganz oben haben möchte suche ich den Begriff "Aktualisiert", welches der oberste Menüpunkt der rechten Spalte ist. <p class="boxheader">Aktualisiert</p> so sieht dies dann aus. Oberhalb dieses Codes im div "menu", welches die ganze rechte Spalte repräsentiert, füge ich nun den Code, vom generierten Widget, hier ein. Also:

1.     <div id="menu">

2.    Widget Code

3.    <p class="boxheader">Aktualisiert</p>

Damit ich dem Bereich nun noch einen Namen geben kann, gebe ich als Boxheader Twitter ein. Somit sieht der Code dann so aus: <p class="boxheader">Twitter</p>. Um die Striche beizubehalten füge ich eine Boxline vor dem Widget Code und nach ihm ein. Also: <p class="boxline"></p>.

Somit lautet jetzt die Abfolge:

1.    <div id="menu">

2.    <p class="boxheader">Twitter</p>

3.    <p class="boxline"></p>

4.    Widget Code

5.    <p class="boxline"></p>

 

Nun Speichere ich den Code und sehe mein Resultat auf der rechten Seite. 

0 comments :: Kommentieren