Pinterest: Versteckte Bilder pinnen lassen

  • So, mal was allgemeines, auch ein blindes Huhn findet mal ein Korn. Dauerte hier nur gefühlt 3 Jahre. Hatte hier vor Jahren ja mal einen Thread zu Pinterest und wie man da Bilder rein bekommt, die nicht auf der Webseite angezeigt werden oder Bilder aus Lightboxen, denn das PinIt-Tool gibt nur die Bilder vor, die ersichtlich sind, direkt und nicht erst bei einem Klick in der Galerie. Und der andere Punkt eben, wie man versteckte Bilder pinnen kann bzw. Vorgaben machen kann, was z.B. ein Default-Bild sein soll, also Bilder, die gar nicht auf der Webseite sind und es auch nicht sollen.

    Im Grunde also so was wie bei Schema-Angaben "Image" oder "Logo" für Facebook etc. Das kennt Pinterest aber nicht.

    Drei Jahre später, ich habe es gefunden. Es geht doch und das sogar recht leicht: Mit "data-pin-media"! Ich entsinne mich, ich hatte das schon mal, aber nach einem Schnelltest verworfen weil es hieß, man müsste dafür ein externes Javascript von Pinterest laden, eine pinit.js.

    Also eine Angabe, die beim Bild mit dabei sein muss. Explizit z. B. dafür gedacht, höher aufgelöste Bilder pinnen zu lassen, als auf der Webseite direkt sind oder eben Lightboxen. Damit geht es auch wunderbar, dass man ein verstecktes Bild (1x1px groß, weiß) auf der Webseite hat und eben per "data-pin-media" ein völlig anderes angibt. In meinem Fall eine Collage, die ich schon immer wollte, aber eben nicht auf der Webseite sehen will.

    Habe viele Dinge nun gelesen und letztenlich brachte mich das dann auf den richtigen Weg. Leider sind fast alle Dokumentationen dazu aber leider falsch.

    Die pinit.js ist nicht erforderlich, es reicht das Browser-Addon, das Nutzer möglicherweise haben. Die pinit.js würde nur von der Seite aus direkt selbst den Pin-Button einblenden. Macht aber keinen Sinn, denn wenn der User gar nicht bei Pinterest ist, dann braucht er auch keinen Button.

    Die Angabe der URL beim "data-pin-media" MUSS mit Domain-Name erfolgen. Gibt man nur ein "/bilder/bild1.jpg" an, dann erkennt das zwar das PinIt-Tool, aber gepinnt wird nur ein hellgrauer Kasten.

    Auch, und darauf weißt auch keine Webseite hin, muss man, wenn man mit "data-pin-media" arbeitet, das für alle Bilder auf der Webseite machen! Sobald man "data-pin-media" auch nur einmal einsetzt, dann nimmt das PinIt-Tool nur noch das Bild und schaltet seine automatische Erkennung der Bilder komplett ab.

    In meinem Fall also, einmal verwendet für das "versteckte Bild", zack, alle anderen können nicht mehr gepinnt werden. Also die Angabe für alle anderen Bilder auch hinzufügen. Das bläht den Quellcode auf, aber muss sein.

    Wenn ein Mensch nicht um dich kämpft, hat er nur gewartet, dass du gehst. ;(

  • Schaut bei mir an der einen Testseite dann so aus.

    Das erste Bild gibt es dort gar nicht, würde auch nicht zum Layout passen und viel zu groß wäre es auch. Den genau das ist ja das Problem bei Pinterest gewesen, dass man zwar irgendwie gerne große Bilder zum Pinnen anbieten möchte, aber man die ja nicht alle als Originalversion auf die Webseite packen kann. Datenvolumen ohne Ende.

    Eingebunden ist das aber nun quasi als "nicht vorhandenes Bild" mit

    Code
    <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" width="1" height="1" data-pin-media="https://www.geranien-pflanzen.de/bilder/webseite/geranien-ueberwintern.png">

    Ist also noch nicht mal "hidden" oder sonst was. Das eigentliche Bild, das Google so auch lädt ist der Platzhalter vom LazyLoad, wobei der hier in dem Fall nicht ausgeführt wird.

    Wenn ein Mensch nicht um dich kämpft, hat er nur gewartet, dass du gehst. ;(

  • Und das ganze kann man so auch noch automatisieren :) Pinterest liebt ja Bilder im Format 2:3, nur leider passen die so gut wie auf keine normale Webseite, vom Layout her. Auch nicht von der Bildgröße, denn die Mindestanforderung für "gute" Bilder ist ca. 500px breit, also eben auch 1000px hoch. Man stellt sich nun mal vor, alle Bilder eine Seite wären min. 500x1000px.... Google würde sich bedanken, der Nutzer auch.

    So kann man das aber automatisieren und das Bild quasi dynamisch erzeugen lassen, also 2:3-Version mit Textbereich oder als Collage mit "eigentlichen Bild" und 2-4 weiteren aus der Serie.

    Wenn ein Mensch nicht um dich kämpft, hat er nur gewartet, dass du gehst. ;(