Link-Vorschau wie in Discord?

    Mein Team postet in unserem Discord Server immer mal wieder News. Es wird einfach nur der Link kopiert und Discord macht daraus eine kleine Vorschau.


    Das Ganze sieht dann so aus:



    Nun dachten wir uns, dass wir die News auch direkt bei uns im Forum schreiben könnten, weil diese über das Plugin Discord-Synchronisierung dann auch in einen bestimmten Discord Channel synchronisiert werden.


    Im Forum sieht das Ganze dann natürlich etwas spärlich aus, wenn man nur den Link postet...



    Durch zwei andere Plugins habe ich es ja wenigstens schon so weit hinbekommen, dass der Name des Links und das Favicon der Webseite vor dem Link angezeigt werden.


    Gibt es ein weiteres Plugin, über welches ich eine solche kleine Vorschau anzeigen lassen kann? Bisher konnte ich dazu nichts finden.

    Die Idee gab es bereits und Christopher wollte sich dem annehmen, hatte es aufgrund eines anderen Projekts jedoch nicht weiter beachtet. Ich wollte ja auch, allerdings hab ich noch ein paar offene Fragen dazu.

    Oh, gut zu sehen, dass ich nicht allein mit dem Wunsch dastehe... :D


    Vielleicht wäre es sogar möglich, diese Funktion für bestimmte Bereiche (oder Foren) zu deaktivieren. In meiner Shoutbox bräuchte ich eine solche Vorschau z.B. nicht, wenn ich einen Link poste. Da gäbe es sicherlich ein paar nette Optionen, die man einbauen könnte. :)

  • PoooMukkel

    Set the Label from WSF 5.0.x to WSC 3.1.x

    Naja, diese Vorschau soll aber eben nicht nur angezeigt werden, wenn ich mit der Maus über den Link fahre. Die Vorschau soll direkt unter dem eingefügten Link angezeigt werden. :)


    Aber so eine Popup-Lösung wäre optional sicher vorstellbar. ;)

    Quote from Throwholics

    Genau welche Fragen denn? :)

    Quote from jacboy

    Die da wären :D


    Ich kenne es nur so, dass die Vorschau immer nur für den ersten Link des jeweiligen Inhalts erzeugt wird. Ich muss gestehen, dass ich das zumindest im Forum etwas komisch fände. Bei Facebook, Discord, Twitter & co. wiederum passt das irgendwie. Und genau das hat mich bisher immer davon abgehalten, mich damit auseinander zu setzen.


    Die größte Schwierigkeit wiederum dürfte der Anreißtext sein. Um hier ein Beispiel zu nennen: https://www.facebook.com/discordapp/photos/a.1534226309978427.1073741830.858412104226521/1731656473568742/?type=3


    Die Vorschau dazu sieht im Discord so aus:



    Nun stellt sich mir natürlich die Frage, wie das zu Stande kommt. Oder anders: Wie man das generalisieren kann. Denn wenn ich für etwaige Seiten immer erst noch Parser bauen muss, bin ich ewig beschäftigt. Und in diesem Beispiel kann ich auch nicht auf oembed zurückgreifen.


    Bei vielen anderen Seiten geht das noch ganz gut über die jeweilige Description, viele andere Seiten wiederum haben keine Description, sodass der Anreißtext irgendwie über den Body gezogen werden muss.


    Alles in allem steckt da weit mehr Logik hinter, als man es vielleicht vermuten würde. Letztlich wird in vielen Fällen wohl einfach mit Techniken wie etwa PhantomJS gearbeitet, um Seiten vollständig zu rendern und dort dann einen Teil des ersten, sichtbaren Textes zu beziehen.


    Fakt ist, dass sich das für den normalen Seitenbetreiber mit hoher Wahrscheinlichkeit nicht ohne Verwendung eines Drittanbieters lösen lässt und selbst wenn, der Aufwand für eine eigene Umsetzung den Nutzen wohl um Längen übersteigt. Und bei der Verwendung von Drittanbietern gibt es ggf. auch Einschränkungen. Im Falle von Facebook: https://www.facebook.com/apps/site_scraping_tos_terms.php


    Ich würde die Tage mal schauen, ob ich da was zusammen kriege und mich eventuellen Ergebnissen zurückmelden.

    Quote from SoftCreatR

    Nun stellt sich mir natürlich die Frage, wie das zu Stande kommt. Oder anders: Wie man das generalisieren kann. Denn wenn ich für etwaige Seiten immer erst noch Parser bauen muss, bin ich ewig beschäftigt. Und in diesem Beispiel kann ich auch nicht auf oembed zurückgreifen.

    Es scheint in Discord aber mit jedem Link zu funktionieren. Habe einfach mal wahllos ein paar Links eingefügt und das macht Discord daraus:



    Da muss es doch eine Allround-Lösung geben... :/

    Wie gesagt.... Größtenteils werden einfach Titel der Seite + Description (Tag) ausgelesen und zurückgegeben. Bei Möglichkeit dann auch noch Open-Graph-Tags (wie bei deinen Artikeln das og:image). Aber im Falle meines o.g. Facebook-Links ist das halt nicht so einfach, weil es all diese Informationen eben nicht an einer zentralen Stelle gibt.

    Ansonsten evtl. mal mit Darkwood.Design auseinander setzen, sein Plugin macht genau das in seinem Chronik-Plugin:


    WoltLab Cloud
    File
    WoltLab Suite Timeline: Link preview
    Provides a new share type for inserting a modern link preview on the timeline.
    Darkwood.Design
    Quote from SoftCreatR

    Aber im Falle meines o.g. Facebook-Links ist das halt nicht so einfach, weil es all diese Informationen eben nicht an einer zentralen Stelle gibt.

    Danke für die Erklärung.


    Quote from Mirco83

    sein Plugin macht genau das in seinem Chronik-Plugin

    Das sieht gut aus und ich denke, dass das genau so etwas wäre, was ich bräuchte. Aber schade, dass er das Plugin nur für seine Chronik anbietet... :/

    Für mich sieht das eher nach einem IFrame, als nach einer Vorschau aus. Und wenn dem so ist, funktioniert das auch nicht überall (zum Beispiel mit einem Großteil der WSCs).

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!

Register Yourself Login