Advertisement:

Author Topic: Link preview mod?  (Read 1306 times)

Offline Kolya

  • Full Member
  • ***
  • Posts: 409
  • systemshock.org
Link preview mod?
« on: October 13, 2017, 05:58:36 PM »
Is there a mod that will create a preview for a link as they are common on social media nowadays, ie include a thumbnail of the linked pages main image, the main headline, a teaser-text, the domain name, etc.
This information can usually be gathered from meta tags of the linked page.

Offline Kindred

  • The Mean One
  • Support Specialist
  • SMF Legend
  • *
  • Posts: 55,119
  • Gender: Male
    • Kindred-999 on GitHub
Re: Link preview mod?
« Reply #1 on: October 13, 2017, 07:17:33 PM »
in short... no
Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

Offline Kolya

  • Full Member
  • ***
  • Posts: 409
  • systemshock.org
Re: Link preview mod?
« Reply #2 on: October 14, 2017, 10:03:17 AM »
Haha, so is anyone interested in getting paid for making one
and open sourcing it?

And on that note, who else would be willing to shell out some money, so we can give the developer a decent payment?

Offline Kolya

  • Full Member
  • ***
  • Posts: 409
  • systemshock.org
Re: Link preview mod?
« Reply #3 on: October 15, 2017, 05:26:32 AM »
Version
2.0.14

Description
When writing a link into the post editor an Ajax request is fired and gets the linked page to evaluate its meta-data. Due to cross domain policy this needs to go through a simple PHP-proxy (https://stackoverflow.com/a/2559062/1225787). This proxy needs to be secured at least to only allow requests from localhost. Multiple secure PHP proxy examples for this use case exist and should be used.
The meta-data to be evaluated is semantic markup in JSON-LD format as defined by schema.org. Example data:
Code: [Select]
<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "Article",
    "publisher": {
        "@type": "Organization",
        "name": "Troy Hunt",
        "logo": {
            "@type": "ImageObject",
            "url": "https://www.troyhunt.com/content/images/2016/04/Troy-Hunt-Profile-Photo.jpg",
            "width": 60,
            "height": 60
        }
    },
    "author": {
        "@type": "Person",
        "name": "Troy Hunt",
        "url": "https://www.troyhunt.com/author/troyhunt/",
        "sameAs": []
    },
    "headline": "What Would It Look Like If We Put Warnings on IoT Devices Like We Do Cigarette Packets?",
    "url": "https://www.troyhunt.com/what-would-it-look-like-if-we-put-warnings-on-iot-devices-like-we-do-cigarette-packets/",
    "datePublished": "2017-10-13T08:16:58.000Z",
    "dateModified": "2017-10-14T09:23:46.000Z",
    "image": {
        "@type": "ImageObject",
        "url": "https://www.troyhunt.com/content/images/2017/10/WeVibe-1.jpg",
        "width": 800,
        "height": 801
    },
    "keywords": "Security, IoT",
    "description": "A couple of years ago, I was heavily involved in analysing and reporting on the massive VTech hack, the one where millions of records were exposed including kids&#x27; names, genders, ages, photos and the relationship to parents&#x27; records which included their home address. Part of this data was collected via",
    "mainEntityOfPage": {
        "@type": "WebPage",
        "@id": "https://www.troyhunt.com/"
    }
}
    </script>
   
If semantic markup does not exist on the page, fall back to meta-tags in Facebook's Open Graph model. Example data:
Code: [Select]
<meta property="og:site_name" content="Troy Hunt" />
<meta property="og:type" content="article" />
<meta property="og:title" content="What Would It Look Like If We Put Warnings on IoT Devices Like We Do Cigarette Packets?" />
<meta property="og:description" content="A couple of years ago, I was heavily involved in analysing and reporting on the massive VTech hack, the one where millions of records were exposed including kids&#x27; names, genders, ages, photos and the relationship to parents&#x27; records which included their home address. Part of this data was collected via" />
<meta property="og:url" content="https://www.troyhunt.com/what-would-it-look-like-if-we-put-warnings-on-iot-devices-like-we-do-cigarette-packets/" />
<meta property="og:image" content="https://www.troyhunt.com/content/images/2017/10/WeVibe-1.jpg" />
The gathered meta-data shall be used to create a "link-preview" in BBCode that shall get inserted into the post-editor after the URL (avoid screwing up fast typers through an Ajax loading blocker). Examples of how this looks on other services are attached as images. However this mod shall not be concerned with styling the link-preview, but merely provide the BBCode to do so. Example of the expected result to get inserted:

Code: [Select]
[quote=Troy Hunt on 13.10.2017, 08:16 UTC (modified 14.10.2017, 09:23 UTC)]
[url=https://www.troyhunt.com/what-would-it-look-like-if-we-put-warnings-on-iot-devices-like-we-do-cigarette-packets/]
https://www.troyhunt.com/what-would-it-look-like-if-we-put-warnings-on-iot-devices-like-we-do-cigarette-packets/

[b]What Would It Look Like If We Put Warnings on IoT Devices Like We Do Cigarette Packets?[/b]

A couple of years ago, I was heavily involved in analysing and reporting on the massive VTech hack, the one where millions of records were exposed including kids&#x27; names, genders, ages, photos and the relationship to parents&#x27; records which included their home address. Part of this data was collected via ...

[img]https://www.troyhunt.com/content/images/2017/10/WeVibe-1.jpg[/img]
[/url][/quote]

Permissions
The mod should have a global setting to enable/disable it. Optional: Integration with the permission system to allow/disallow for user-groups.

Payment
EUR 100, payable through Paypal.
As this will likely not cover development costs, I hope others will hop on board to raise payment for this feature. Come on, you want sweet automatic link previews too, don't you?

License
The complete code for this mod (excluding any third party code like libraries, etc) shall be released under an open source license that allows anyone to use/copy/modify (with attribution)/distribute this mod. As for the particular license model I don't really care as long as these conditions are met.

Online digger

  • Full Member
  • ***
  • Posts: 676
  • Gender: Male
    • realdigger on GitHub
    • SMF Russian Community
Re: Link preview mod?
« Reply #4 on: October 15, 2017, 08:39:21 AM »
I'm working on a similar mod for autoembed opengraph data but it's not finished yet.

Offline Kolya

  • Full Member
  • ***
  • Posts: 409
  • systemshock.org
Re: Link preview mod?
« Reply #5 on: October 15, 2017, 10:42:45 AM »