Instagram-Integration für TYPO3

Dieses Plugin ermöglicht es, Instagram-Inhalte von Benutzern anzuzeigen. Ein Instagram-API-Zugang wird nicht benötigt - ABER: Funktionieren tut es nur, wenn Dein Server nicht auf der schwarzen Liste von Instagram steht.

Definition eines Instagram-Templates

Page-TypoScript hinzufügen, um ein zusätzliches Template-Auswahlfeld-Element zu erstellen:

TCEFORM.tt_content.pi_flexform.instagram_instagram.sDEF {
    settings\.template {
        addItems {
            CustomLayout = Custom-Layout Label
        }
    }
}

Duplizieren Sie die Standardteilbilder und ändern Sie sie nach Bedarf:

Partials/Instagram/CustomLayout.html

Instagram-Plugin mit Hilfe von TypoScript verwenden

Erstelle einen Marker mit dem Plugin

lib.instagram.owlCarousel = USER
lib.instagram.owlCarousel {
    userFunc = TYPO3\CMS\Extbase\Core\Bootstrap->run
    pluginKey = Instagram
    pluginName = Instagram
    extensionName = Instagram
    vendorName = CodingMs
    controller = Instagram
    action = show
    settings < plugin.tx_instagram.view
    settings.template = OwlCarousel
    view < plugin.tx_instagram.view
}

Verwendung in anderen Fluid-Vorlagen:

<f:cObject typoscriptObjectPath="lib.instagram.owlCarousel" />

FAQ

Verwendung von Instagram-Inhalten mit OwlCarousel2

Die benötigten Bibliotheken werden von einem CDN geladen.

Gibt es Caches für die Feeddaten?

Ja, die Feeddaten werden automatisch für 1h zwischengespeichert.

Verwendung unterschiedlicher Bildgrößen

Die Instagram-API stellt drei verschiedene Bildgrößen zur Verfügung:

item
    images
        thumbnail => array(3 items)
            width => 150 (integer)
            height => 150 (integer)
            url => 'https://scontent.cdninstagram.com/vp/8cc17dabca3dfb79ff3db80d74e489e4/5C9E89 A1/t51.2885-15/e35/s150x150/25024956_173810950019058_5907317161587638272_n.j pg?_nc_ht=scontent.cdninstagram.com' (187 chars)
        low_resolution => array(3 items)
            width => 320 (integer)
            height => 320 (integer)
            url => 'https://scontent.cdninstagram.com/vp/68120d2512e1fa46233a1e6ee56fd82e/5CD9D2 51/t51.2885-15/e35/s320x320/25024956_173810950019058_5907317161587638272_n.j pg?_nc_ht=scontent.cdninstagram.com' (187 chars)
        standard_resolution => array(3 items)
            width => 640 (integer)
            height => 640 (integer)
            url => 'https://scontent.cdninstagram.com/vp/2d7a4cac6cdca62c9b9cad5742026e44/5C99A6 06/t51.2885-15/sh0.08/e35/s640x640/25024956_173810950019058_5907317161587638 272_n.jpg?_nc_ht=scontent.cdninstagram.com' (194 chars)

Verwendung in Fluid:

<img src="{item.images.thumbnail.url}" alt="{item.caption.text}" title="{item.caption.text}">
<img src="{item.images.low_resolution.url}" alt="{item.caption.text}" title="{item.caption.text}">
<img src="{item.images.standard_resolution.url}" alt="{item.caption.text}" title="{item.caption.text}">

Support

Für kostenpflichtigen Support sende eine E-Mail an typo3(at)coding(dot)ms