Schnellnavigation:

Kategorien

« Mai 2017»
S M T W T F S
  1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31      

Kopieren Sie diesen Link in Ihren RSS-Reader

RSS 0.91Nachrichten
RSS 2.0Nachrichten

In eigener Sache

Peter Linzenkirchner, Lisardo EDV Beratung in Augsburg. Freelance und Partner für Design- und Webagenturen in Augsburg und München. Pixelgenaue Templates, valides HTML, barrierearm. TYPO3-Projekte, Extension-Programmierung und mehr ... 

Zur Zeit wird gefiltert nach: redaktion
Filter zurücksetzen

Über den Webservice von AddThis ist es noch einfacher, einen Like-Button von Facebook einzubinden. Sie können den Button sogar anschließend umkopieren oder über das Inhaltselement Datensatz einfügen kopieren (siehe Artikel »Datensatz einfügen: Inhalte referenzieren statt kopieren«. Zusätzlich hat man den Vorteil, dass damit nicht nur Facebook sondern auch ein Tweet-Button eingebunden wird, und über ein kleines Popup noch etliche Dutzend weitere Bookmark- und Socialweb-Tools.


[mehr]

Ein einfacher Like-Button von Facebook kann von TYPO3-Redakteuren problemlos selbst eingebunden werden, ohne Rücksprache mit dem Administrator. Dazu ist nur erforderlich, dass Ihnen im Backend das Inhaltselement HTML zur Verfügung steht. Der Nachteil ist allerdings, dass der Button für jede Seite entweder neu erstellt oder zumindest editiert werden muss. Es muss nämlich die URL der aktuellen Seite eingegeben werden, was auch diese Art nicht automatisch möglich ist. Mit einem externen Web-Service können Sie das umgehen, das zeige ich in einem zweiten Schritt.

Der erste Schritt besteht darin, dass Sie auf die Developer-Seite von Facebook gehen und sich dort den HTML-Code generieren lassen:

  1. die URL der Seite eingeben, auf der der Like-Button erscheinen soll. 
  2. einen Layoutstil auswählen – einfach ausprobieren, Sie sehen den Stil sofort. 
  3. Sollen die Gesichter der Facebook-Fans gezeigt werden?
  4. die Breite des Buttons (mit den Gesichtern!) in Pixel. In meinem Fall passt die Voreinstellung. 
  5. Man kann hier »like« oder »recommended« anzeigen lassen. Praktisch alle wählen »like«
  6. Nach Belieben eine Schrift auswählen
  7. Farbschema light oder dark – mir gefällt wie den meisten light besser.

Sobald Sie auf Get Code klicken, erhalten Sie den HTML-Code, den Sie kopieren müssen.

  1. Wählen Sie den Code, der bei iframe steht. Mit XFBML können Sie nichts anfangen, das müsste in die Seite selbst eingebunden werden, wozu Sie einen Administrator benötigen.

Sobald Sie den Code kopiert haben, welchseln Sie in das Backend von TYPO3 und erstellen ein neues Inhaltselement. vom Typ HTML. Geben Sie ihm irgendeinen Titel und kopieren Sie den Code in der Karteikarte HTML in das Feld HTML:

Das wars auch schon, das Ergebnis sieht so aus:

Die Optionen aller Eingabefelder im Backend können modifizert (= geändert oder erweitert) werden. Prinzipiell ist die Syntax:

  1. TCEFORM.[tablename].[field] {
  2.   # Feld komplett entfernen:
  3.   disabled=1
  4.   # Item entfernen
  5.   removeItems=1,2,3
  6.   # Item hinzufügen (Achtung: erfordert für das Frontend noch TypoScript im Template!)
  7.   addItems.[itemValue]=100,101
  8.   # Umbenennen
  9.   altLabels.[item_value]=ein ganz neuer Name
  10. }

Leider gibt es keine Dokumentation, welche Optionen für welches Feld zur Verfügung stehen und wie diese im Frontend ausgegeben werden. Das kann man wohl am einfachsten aus dem Quelltext des Eingabeformulars im Backend entnehmen. Für das Frontend kenne ich im Moment nur die Möglichkeit, es auszutesten bzw im Falle von tt_content das TypoScript von css_styled_content durchzusehen.

Bezeichnungen der Headline-Layouts ändern:

Ins TSconfig der der Seite folgendes eintragen: 

  1. TCEFORM.tt_content {
  2.   # ausblenden
  3.   header_layout.removeItems=1,4,5,100
  4.   # mit anderem Namen versehen
  5.   header_layout.altLabels.0=Ebene 1,H1
  6.   header_layout.altLabels.2=Ebene 2,H2
  7.   header_layout.altLabels.3=Ebene 3,H3
  8. }

Falls H1 nicht genutzt werden soll, muss die Default-Einstellung noch geändert werden, bzw. die Ausgabe für header_layout.altLabels.0. Das geht über folgende Eingabe im Constants-Bereich des TypoScript-Templates:

  1. # Voreinstellunge auf Headline <h3>
  2. content.defaultHeaderType=3

Rahmenoptionen umbenennen:

  1. TCEFORM.tt_content {
  2.   # Rahmenoptionen im Bereich Typ
  3.   section_frame {
  4.     # neue Labels
  5.     altLabels {
  6.       10=Kasten
  7.       5=Linie davor
  8.       6=Linie danach
  9.       11=BoxBlau
  10.       12=BoxGrau
  11.     }
  12.   # ausblenden
  13.   removeItems=1,20,21
  14.   }
  15. }

Neue Rahmenoptionen hinzufügen

Das ist etwas aufwändiger, da hierzu auch das TypoScript von tt_content verändert werden muss. Erster Schritt im TSconfig der Seite:

  1. # neuer Rahmen dazu
  2. TCEFORM.tt_content.section_frame {
  3.   addItems.100=Mal ganz anders
  4. }

Danach im TypoScript-Template:

  1. tt_content.stdWrap.innerWrap.cObject= CASE
  2. tt_content.stdWrap.innerWrap.cObject {
  3.   100=TEXT
  4.   100.value= <div class="mal-ganz-anders">|</div>
  5. }

Danach ganz normal in der CSS-Datei formatieren.

ACHTUNG: Das funktioniert seit TYPO3 4.3 nicht mehr; hier wurde css_styled_content etwas verändert. Man kann zwar die alte Fassung als static_content in das Template laden, aber besser ist es, es auf die neue Art zu machen:

  1. tt_content.stdWrap.innerWrap.cObject {
  2.     # Definitionen zuweisen
  3.     100=<tt_content.stdWrap.innerWrap.cObject.default
  4.     # Klasse zuweisen
  5.     100.15.value=mal-ganz-anders
  6. }

Das hat auch den Vorteile, dass die Abstände oben und unten funktionieren.

Weiterführende Links:

Besuchen Sie mich auf Google+