T3tipps

Soll eine Facebook Statusmeldung gepostet werden, die sich auf einen Beitrag von tt_news bezieht, so kann es vorkommen, dass Facebook das Bild nicht anzeigt.

Das passiert in der Regel dann, wenn die TYPO3-Seite viele Bilder enthält und Facebook nicht erkennt, welches das Vorschaubild ist.

Damit Facebook das News-Image aus tt_news erkennt muss man Facebook ein bischen auf die Sprünge helfen. Dafür hat Facebook den OpenGraph entwickelt. Über ein paar Metatags zeigt man Facebook, welches das richtige Vorschaubild oder der Vorschautext ist.

TYPO3 unterstützt diese Metatags für Opengraph nicht automatisch, sondern es ist ein bischen Arbeit im TYPOScript notwendig.

Der folgende Auszug erzeugt zusätzliche Metatags im Namespace og, die den Titel, die URL und den Verweis auf das Vorschau-Bild enthalten. Als Vorschaubild dient das erste Bild im Feld Images des tt_news-Artikels.Der Code wird einfach in das Setup-Feld des TYPO3-Templates kopiert. Am Besten auf der Seite, die die Single-Ansicht der tt_news-Artikel enthält.

Anzupassen sind noch die Werte {PID der Detailansicht} und {PID des NEWS-Ordners}.

page.headerData {
 100 = RECORDS
  100 {
    source = {GP:tx_ttnews|tt_news}
    source.insertData = 1
    tables = tt_news
    conf.tt_news >
    conf.tt_news = TEXT
    conf.tt_news {
      field = title
      wrap = <meta property="og:title" content="|">
      htmlSpecialChars = 1
    }
  }
  110 = HTML
  110.value.char = 10
  120 = TEXT
  120 {
    data = register:newsSubheader
    wrap = <meta property="og:description" content="|">
    htmlSpecialChars = 1
  }
  130 < .110
  140 = RECORDS
  140 {
    source = {GP:tx_ttnews|tt_news}
    source.insertData = 1
    tables = tt_news
    conf.tt_news >
    conf.tt_news = TEXT
    conf.tt_news {
      typolink {
        parameter = {PID der DETAIL-Ansicht}
        additionalParams.cObject = TEXT
        additionalParams.cObject {
          field = uid
          wrap = &tx_ttnews[tt_news]=|
        }
        returnLast = url
      } 
      wrap = <meta property="og:url" content="{TSFE:baseUrl}|">
      insertData = 1
    }
  }
  150 < .110
  160 = CONTENT
  160 {
    stdWrap.if.isTrue.data = GP:tx_ttnews|tt_news
    table = tt_news
    select {
      pidInList = {PID des NEWS-Ordners}
      recursive = {PID des NEWS-Ordners}
      where = CHAR_LENGTH(image) > 0
      andWhere.cObject = TEXT
      andWhere.cObject {
        data = GP:tx_ttnews|tt_news
        intval = 1
        wrap = uid = |
      }
    }
    renderObj = TEXT
    renderObj {
      field = image
      split {
        token = ,
        cObjNum = 1
        1.cObject = IMG_RESOURCE
        1.cObject {
          file {
            import = uploads/pics/
            import.current = 1
           width = 350m
           height = 350m
          }
          stdWrap.wrap = <meta property="og:image" content="{TSFE:baseUrl}|">
          stdWrap.insertData = 1
        }
      }
    }
  }
  170 < .110
}

Tags: Facebook, OpenGraph, Preview, tt_news, typo3