Simple Machines Community Forum

Customizing SMF => Modifications and Packages => Mod Requests => Topic started by: Kolya on October 13, 2017, 05:58:36 PM

Title: Link preview mod?
Post by: Kolya 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.
Title: Re: Link preview mod?
Post by: Kindred on October 13, 2017, 07:17:33 PM
in short... no
Title: Re: Link preview mod?
Post by: Kolya 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?
Title: Re: Link preview mod?
Post by: Kolya 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 (https://www.google.nl/search?dcr=0&q=php+proxy+for+cross+domain+ajax) and should be used.
The meta-data to be evaluated is semantic markup in JSON-LD format as defined by schema.org (http://schema.org). Example data:
<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 (http://ogp.me). Example data:
<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:


[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.
Title: Re: Link preview mod?
Post by: digger 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.
Title: Re: Link preview mod?
Post by: Kolya on October 15, 2017, 10:42:45 AM
Relevant github projects:
https://github.com/LeonardoCardoso/Link-Preview
https://github.com/dusterio/link-preview
Title: Re: Link preview mod?
Post by: Kolya on August 13, 2019, 08:59:39 AM
Since no one came up with a solution so far, I wrote it myself. I'm releasing it here as a free recipe. I wrote this for my own website and have no interest in creating and supporting a mod. If anyone else wants to, be my guest.

linkpreview.php - This is a slightly modified version of this one by abazad: https://github.com/abazad/LinkPreview/blob/master/LinkPreview.php
I fixed some encoding issues and added "security" in so far that only logged in users can retrieve preview data.
It retrieves the Title, Description and Main Image from a URL passed to it, providing all necessary data in JSON format to create link previews for most pages.
<?php
require_once($_SERVER['DOCUMENT_ROOT'].'/SSI.php');

if ($context['user']['is_logged']) {
function getTitle($linkSource) {
// The page should only have one title, so lets go ahead and get it!
return addslashes($linkSource->getElementsByTagname('title')->item(0)->nodeValue);
}

function getDescription($linkSource) {
// Description is in the meta tags, so lets iterate through them, until we find it
$metas $linkSource->getElementsByTagname('meta'); 
foreach ($metas as $meta) {
if ($meta->getAttribute("name") == "description") {
return addslashes($meta->getAttribute("content"));

}
}

function getImage($linkSource$linkurl) {
// Some sites hard code image urls for Twitter and Facebook, lets just use those.
$metas $linkSource->getElementsByTagname('meta'); 
foreach ($metas as $meta) {
if($meta->getAttribute("name") == "twitter:image") {
return addslashes($meta->getAttribute("content"));
} else if($meta->getAttribute("property") == "og:image") {
return addslashes($meta->getAttribute("content"));
} else {
// Do Nothing
}
}
// If this site doesn't do that, lets just grab the first image, because I don't know what else to do
$firstImage "";
$imgs       $linkSource->getElementsByTagname('img');
foreach ($imgs as $img) {
$firstImage $img->getAttribute("src");
if (strpos("http://"$firstImage) === false) {
$firstImage $linkurl $firstImage
}
break;
}
return addslashes($firstImage);
}

function loadSource() {
$html filter_var($_GET['link'], FILTER_VALIDATE_URL);
$html file_get_contents($html);
$html mb_convert_encoding($html'HTML-ENTITIES'"UTF-8");
$dom = new DOMDocument();
$dom->loadHTML($html);
$dom->preserveWhiteSpace false
return $dom;
}

error_reporting(0);

$urlSource loadSource();

$arr = array('title' => getTitle($urlSource), 'description' => getDescription($urlSource), 'image' => getImage($urlSource$_GET['link']));
echo stripslashes(json_encode($arrJSON_UNESCAPED_UNICODE JSON_UNESCAPED_SLASHES JSON_HEX_QUOT JSON_HEX_APOS));
}
?>


linkpreview.js - this is the main work I did. It adds a button that will fire the linkpreview function. The function filters URLs from the editor text, sends them to linkpreview.php, retrieves JSON, and finally replaces every URL in the editor with one that is enriched with preview data from the JSON.
var linkPreviewButton = jQuery('<img id="BBCBox_message_button_1_0" src="/Themes/default/images/bbc/linkpreview.gif" alt="Insert Link Previews" title="Insert Link Previews" style="cursor: pointer;background-image: url(&quot;/Themes/default/images/bbc/bbc_bg.gif&quot;);" width="23" height="22" align="bottom">')
.click(linkpreview)
.insertAfter('[id*="BBCBox_message_button"][src*="url"]');

function linkpreview() {
var regex = /((http(s)?:\/\/.)?(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*))/gim;
var message = jQuery.trim($("#message").val());
var richLink;
var matchedUrls = [];
match = regex.exec(message);
while (match != null) {
matchedUrls.push(match[0]);
match = regex.exec(message);
}
matchedUrls.forEach(function(url) {
jQuery.ajax({
url: '/Themes/default/linkpreview/linkpreview.php?link='+url,
dataType: "json",
success: function(data){
console.log(data)
if (data.title || data.description || data.image) {
richLink = url;
if (data.title != '') richLink = richLink + '\n[b]'+ data.title + '[/b]';
if (data.description != '') richLink = richLink + ' - [size=1]' + data.description + '[/size]\n';
else richLink = richLink + '[/size]\n';
if (data.image != '') richLink = richLink + '[img width=600]' + data.image + '[/img]';
richLink = richLink + '\n';
message = message.replace(url, richLink)
jQuery('#message').val(message);
}
}
})

})
}


As you can see it requires jQuery. It could be rewritten to pure JS easily, but I have jQuery loaded anyway, so meh.
I recommend loading linkpreview.js before the closing BODY element. You may have to change some file paths, depending on where you store these files.

You may also note that the preview function does not fire automatically when sending the message as is often the case in other social media. I don't think it's desirable to automatically screw around in forum posts. So it's a button instead, retaining full user control.
Title: Re: Link preview mod?
Post by: Antechinus on August 13, 2019, 04:42:22 PM
Nice work. I like the idea of having it controlled by a button. I tend to loathe automatic pop-ups regardless of what they do.
Title: Re: Link preview mod?
Post by: njtweb on August 14, 2019, 07:31:09 AM
Quote from: Kolya on August 13, 2019, 08:59:39 AM
Since no one came up with a solution so far, I wrote it myself. I'm releasing it here as a free recipe. I wrote this for my own website and have no interest in creating and supporting a mod. If anyone else wants to, be my guest.

linkpreview.php - This is a slightly modified version of this one by abazad: https://github.com/abazad/LinkPreview/blob/master/LinkPreview.php
I fixed some encoding issues and added "security" in so far that only logged in users can retrieve preview data.
It retrieves the Title, Description and Main Image from a URL passed to it, providing all necessary data in JSON format to create link previews for most pages.


As you can see it requires jQuery. It could be rewritten to pure JS easily, but I have jQuery loaded anyway, so meh.
I recommend loading linkpreview.js before the closing BODY element. You may have to change some file paths, depending on where you store these files.

You may also note that the preview function does not fire automatically when sending the message as is often the case in other social media. I don't think it's desirable to automatically screw around in forum posts. So it's a button instead, retaining full user control.

Do you have a working SMF site where we can see this in action? Personally I think I have an idea what you're talking about but want to see it working for clarity.

Thank you
Title: Re: Link preview mod?
Post by: Kolya on August 14, 2019, 07:42:26 AM
If you want to see the result, it looks like this. You enter the URL (in this case a Kotaku article), click the button and the JS function adds the title, description and image directly in the editor. So you can still edit this data. Works for multiple URLs (unlike all other social media I know). Of course you can change formatting relatively easily. The BBC tags and line breaks are in preview.js


https://kotaku.com/hundreds-of-players-trying-to-cheat-at-apex-legends-and-1837206180
Hundreds Of Players Trying To Cheat At Apex Legends And Counter-Strike Get Their Private Data Stolen - Since February, a number of ne'er-do-well Apex Legends and Counter-Strike: Global Offensive players hoping to download cheats have in fact been infecting their computers with credential-stealing malware, security firm Sophos discovered.n
(https://i.kinja-img.com/gawker-media/image/upload/s--3_t0RqbI--/c_fill,fl_progressive,g_center,h_900,q_80,w_1600/w5kvnyyqklzggsgma0xf.png)
Title: Re: Link preview mod?
Post by: njtweb on August 14, 2019, 08:29:30 AM
Thank you, I use descriptive links mod right now which when I paste a link to an external article, after I submit it changes the URL into the name of the article. I would think this code modification would probably conflict with the descriptive links mod.
Title: Re: Link preview mod?
Post by: Kolya on August 14, 2019, 09:31:08 AM
Actually they should be compatible, because this linkpreview happens before submitting and leaves the URL untouched.

However it would be trivial to create a linked title with this linkpreview. You just need to build the richLink in linkpreview.js a bit differently. All the ingredients are already there: the url and data.title
So you just need to create a BBC Link of these: richLink= '[url=' + url +  ']' + data.title + '[/url]';
Something like that.
Title: Re: Link preview mod?
Post by: kellijaebaeli on June 07, 2020, 10:13:59 PM
Quote from: digger 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.
What's the status now?
Title: Re: Link preview mod?
Post by: kellijaebaeli on June 07, 2020, 10:23:55 PM

Okay, here comes the question from the uninitiated (I know nothing about this type of coding and such_)
This is what I've been searching for, but I need to know if it will work on forum posts anywhere, or just with this forum host -(I'll switch if I have to--i'm currently on ProBoards, but I'll switch to SM forum if I have to).
And I also have no idea how to use it. I assume I download it and then place it somewhere in the CSS or HTML source files in the Admin control panel?

Quote from: Kolya on August 13, 2019, 08:59:39 AM
Since no one came up with a solution so far, I wrote it myself. I'm releasing it here as a free recipe. I wrote this for my own website and have no interest in creating and supporting a mod. If anyone else wants to, be my guest.

linkpreview.php - This is a slightly modified version of this one by abazad: https://github.com/abazad/LinkPreview/blob/master/LinkPreview.php
I fixed some encoding issues and added "security" in so far that only logged in users can retrieve preview data.
It retrieves the Title, Description and Main Image from a URL passed to it, providing all necessary data in JSON format to create link previews for most pages.
<?php
require_once($_SERVER['DOCUMENT_ROOT'].'/SSI.php');

if ($context['user']['is_logged']) {
function getTitle($linkSource) {
// The page should only have one title, so lets go ahead and get it!
return addslashes($linkSource->getElementsByTagname('title')->item(0)->nodeValue);
}

function getDescription($linkSource) {
// Description is in the meta tags, so lets iterate through them, until we find it
$metas $linkSource->getElementsByTagname('meta'); 
foreach ($metas as $meta) {
if ($meta->getAttribute("name") == "description") {
return addslashes($meta->getAttribute("content"));

}
}

function getImage($linkSource$linkurl) {
// Some sites hard code image urls for Twitter and Facebook, lets just use those.
$metas $linkSource->getElementsByTagname('meta'); 
foreach ($metas as $meta) {
if($meta->getAttribute("name") == "twitter:image") {
return addslashes($meta->getAttribute("content"));
} else if($meta->getAttribute("property") == "og:image") {
return addslashes($meta->getAttribute("content"));
} else {
// Do Nothing
}
}
// If this site doesn't do that, lets just grab the first image, because I don't know what else to do
$firstImage "";
$imgs       $linkSource->getElementsByTagname('img');
foreach ($imgs as $img) {
$firstImage $img->getAttribute("src");
if (strpos("http://"$firstImage) === false) {
$firstImage $linkurl $firstImage
}
break;
}
return addslashes($firstImage);
}

function loadSource() {
$html filter_var($_GET['link'], FILTER_VALIDATE_URL);
$html file_get_contents($html);
$html mb_convert_encoding($html'HTML-ENTITIES'"UTF-8");
$dom = new DOMDocument();
$dom->loadHTML($html);
$dom->preserveWhiteSpace false
return $dom;
}

error_reporting(0);

$urlSource loadSource();

$arr = array('title' => getTitle($urlSource), 'description' => getDescription($urlSource), 'image' => getImage($urlSource$_GET['link']));
echo stripslashes(json_encode($arrJSON_UNESCAPED_UNICODE JSON_UNESCAPED_SLASHES JSON_HEX_QUOT JSON_HEX_APOS));
}
?>


linkpreview.js - this is the main work I did. It adds a button that will fire the linkpreview function. The function filters URLs from the editor text, sends them to linkpreview.php, retrieves JSON, and finally replaces every URL in the editor with one that is enriched with preview data from the JSON.
var linkPreviewButton = jQuery('<img id="BBCBox_message_button_1_0" src="/Themes/default/images/bbc/linkpreview.gif" alt="Insert Link Previews" title="Insert Link Previews" style="cursor: pointer;background-image: url(&quot;/Themes/default/images/bbc/bbc_bg.gif&quot;);" width="23" height="22" align="bottom">')
.click(linkpreview)
.insertAfter('[id*="BBCBox_message_button"][src*="url"]');

function linkpreview() {
var regex = /((http(s)?:\/\/.)?(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*))/gim;
var message = jQuery.trim($("#message").val());
var richLink;
var matchedUrls = [];
match = regex.exec(message);
while (match != null) {
matchedUrls.push(match[0]);
match = regex.exec(message);
}
matchedUrls.forEach(function(url) {
jQuery.ajax({
url: '/Themes/default/linkpreview/linkpreview.php?link='+url,
dataType: "json",
success: function(data){
console.log(data)
if (data.title || data.description || data.image) {
richLink = url;
if (data.title != '') richLink = richLink + '\n[b]'+ data.title + '[/b]';
if (data.description != '') richLink = richLink + ' - [size=1]' + data.description + '[/size]\n';
else richLink = richLink + '[/size]\n';
if (data.image != '') richLink = richLink + '[img width=600]' + data.image + '[/img]';
richLink = richLink + '\n';
message = message.replace(url, richLink)
jQuery('#message').val(message);
}
}
})

})
}


As you can see it requires jQuery. It could be rewritten to pure JS easily, but I have jQuery loaded anyway, so meh.
I recommend loading linkpreview.js before the closing BODY element. You may have to change some file paths, depending on where you store these files.

You may also note that the preview function does not fire automatically when sending the message as is often the case in other social media. I don't think it's desirable to automatically screw around in forum posts. So it's a button instead, retaining full user control.
Title: Re: Link preview mod?
Post by: Kindred on June 08, 2020, 06:24:13 PM
this is only designed to work with SMF systems
Title: Re: Link preview mod?
Post by: kellijaebaeli on June 08, 2020, 07:22:28 PM
Again, coding is not my area of expertise.....can someone please tell me how to implement this as an admin of a forum? I have no idea where to start. Are there instructions for installing this? is it a plugin? where do i find it:? DO i copy and paste the text posted? and if so, where?


Quote from: kellijaebaeli on June 07, 2020, 10:23:55 PM

Okay, here comes the question from the uninitiated (I know nothing about this type of coding and such_)
This is what I've been searching for, but I need to know if it will work on forum posts anywhere, or just with this forum host -(I'll switch if I have to--i'm currently on ProBoards, but I'll switch to SM forum if I have to).
And I also have no idea how to use it. I assume I download it and then place it somewhere in the CSS or HTML source files in the Admin control panel?

Quote from: Kolya on August 13, 2019, 08:59:39 AM
Since no one came up with a solution so far, I wrote it myself. I'm releasing it here as a free recipe. I wrote this for my own website and have no interest in creating and supporting a mod. If anyone else wants to, be my guest.

linkpreview.php - This is a slightly modified version of this one by abazad: https://github.com/abazad/LinkPreview/blob/master/LinkPreview.php
I fixed some encoding issues and added "security" in so far that only logged in users can retrieve preview data.
It retrieves the Title, Description and Main Image from a URL passed to it, providing all necessary data in JSON format to create link previews for most pages.
<?php
require_once($_SERVER['DOCUMENT_ROOT'].'/SSI.php');

if ($context['user']['is_logged']) {
function getTitle($linkSource) {
// The page should only have one title, so lets go ahead and get it!
return addslashes($linkSource->getElementsByTagname('title')->item(0)->nodeValue);
}

function getDescription($linkSource) {
// Description is in the meta tags, so lets iterate through them, until we find it
$metas $linkSource->getElementsByTagname('meta'); 
foreach ($metas as $meta) {
if ($meta->getAttribute("name") == "description") {
return addslashes($meta->getAttribute("content"));

}
}

function getImage($linkSource$linkurl) {
// Some sites hard code image urls for Twitter and Facebook, lets just use those.
$metas $linkSource->getElementsByTagname('meta'); 
foreach ($metas as $meta) {
if($meta->getAttribute("name") == "twitter:image") {
return addslashes($meta->getAttribute("content"));
} else if($meta->getAttribute("property") == "og:image") {
return addslashes($meta->getAttribute("content"));
} else {
// Do Nothing
}
}
// If this site doesn't do that, lets just grab the first image, because I don't know what else to do
$firstImage "";
$imgs       $linkSource->getElementsByTagname('img');
foreach ($imgs as $img) {
$firstImage $img->getAttribute("src");
if (strpos("http://"$firstImage) === false) {
$firstImage $linkurl $firstImage
}
break;
}
return addslashes($firstImage);
}

function loadSource() {
$html filter_var($_GET['link'], FILTER_VALIDATE_URL);
$html file_get_contents($html);
$html mb_convert_encoding($html'HTML-ENTITIES'"UTF-8");
$dom = new DOMDocument();
$dom->loadHTML($html);
$dom->preserveWhiteSpace false
return $dom;
}

error_reporting(0);

$urlSource loadSource();

$arr = array('title' => getTitle($urlSource), 'description' => getDescription($urlSource), 'image' => getImage($urlSource$_GET['link']));
echo stripslashes(json_encode($arrJSON_UNESCAPED_UNICODE JSON_UNESCAPED_SLASHES JSON_HEX_QUOT JSON_HEX_APOS));
}
?>


linkpreview.js - this is the main work I did. It adds a button that will fire the linkpreview function. The function filters URLs from the editor text, sends them to linkpreview.php, retrieves JSON, and finally replaces every URL in the editor with one that is enriched with preview data from the JSON.
var linkPreviewButton = jQuery('<img id="BBCBox_message_button_1_0" src="/Themes/default/images/bbc/linkpreview.gif" alt="Insert Link Previews" title="Insert Link Previews" style="cursor: pointer;background-image: url(&quot;/Themes/default/images/bbc/bbc_bg.gif&quot;);" width="23" height="22" align="bottom">')
.click(linkpreview)
.insertAfter('[id*="BBCBox_message_button"][src*="url"]');

function linkpreview() {
var regex = /((http(s)?:\/\/.)?(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*))/gim;
var message = jQuery.trim($("#message").val());
var richLink;
var matchedUrls = [];
match = regex.exec(message);
while (match != null) {
matchedUrls.push(match[0]);
match = regex.exec(message);
}
matchedUrls.forEach(function(url) {
jQuery.ajax({
url: '/Themes/default/linkpreview/linkpreview.php?link='+url,
dataType: "json",
success: function(data){
console.log(data)
if (data.title || data.description || data.image) {
richLink = url;
if (data.title != '') richLink = richLink + '\n[b]'+ data.title + '[/b]';
if (data.description != '') richLink = richLink + ' - [size=1]' + data.description + '[/size]\n';
else richLink = richLink + '[/size]\n';
if (data.image != '') richLink = richLink + '[img width=600]' + data.image + '[/img]';
richLink = richLink + '\n';
message = message.replace(url, richLink)
jQuery('#message').val(message);
}
}
})

})
}


As you can see it requires jQuery. It could be rewritten to pure JS easily, but I have jQuery loaded anyway, so meh.
I recommend loading linkpreview.js before the closing BODY element. You may have to change some file paths, depending on where you store these files.

You may also note that the preview function does not fire automatically when sending the message as is often the case in other social media. I don't think it's desirable to automatically screw around in forum posts. So it's a button instead, retaining full user control.
Title: Re: Link preview mod?
Post by: Arantor on June 08, 2020, 07:27:46 PM
It won't work on ProBoards, you don't have access to the server yourself to implement it.

It will work on SMF - but you will have to get a hosting company (which means paying), installing the software, then manually adding this code.
Title: Re: Link preview mod?
Post by: kellijaebaeli on June 08, 2020, 07:33:01 PM
Thanks, Arantor, for the clarity.
:-\
Not to put too fine a point on it....but to put too fine a point on it, I just don't understand why this sort of thing is so hard. First, just like with the sciences, those who practice the profession/craft are usually poor at explaining it to the rest of us, and then we all miss out on important benefits.
I do feel more people would migrate away from Facebook if they had a place to go that felt familiar. This type of feature would certainly help immensely in doing that.
Title: Re: Link preview mod?
Post by: shadav on June 08, 2020, 07:50:15 PM
and the point of the extra large font was????

first download smf
second install smf
third create the two files listed above and download the attached gif
fourth as this is over a year old it probably doesn't even work anymore, and I've never installed so couldn't say for sure, would assume that you put linkpreview.php  into your Sources folder and linkpreview.js into Themes/default/scripts and linkpreview.gif into Themes/YOURTHEMEINUSE/images
fifth
QuoteI recommend loading linkpreview.js before the closing BODY element. You may have to change some file paths, depending on where you store these files.
again i'm just guessing...call linkpreview.js somewhere in your Themese/YOURTHEMEINUSE/Display.template.php


but good luck
QuoteI wrote this for my own website and have no interest in creating and supporting a mod.
they already stated they aren't supporting it
Title: Re: Link preview mod?
Post by: Arantor on June 09, 2020, 03:12:46 AM
Quote from: kellijaebaeli on June 08, 2020, 07:33:01 PM
Thanks, Arantor, for the clarity.
:-\
Not to put too fine a point on it....but to put too fine a point on it, I just don't understand why this sort of thing is so hard. First, just like with the sciences, those who practice the profession/craft are usually poor at explaining it to the rest of us, and then we all miss out on important benefits.
I do feel more people would migrate away from Facebook if they had a place to go that felt familiar. This type of feature would certainly help immensely in doing that.

It's hard because that is actually how the world works and Facebook etc gains massively by hiding the complicated away, but if you want to run your own thing, you have to do some of the complicated. SMF is more powerful than ProBoards can ever be because you get access to the code to change it,you don't just get what Facebook or ProBoards gives you, but the price for that is you have to get involved in the inner workings a lot more.
Title: Re: Link preview mod?
Post by: Kolya on June 09, 2020, 01:26:49 PM
Quote from: shadav on June 08, 2020, 07:50:15 PM
fourth as this is over a year old it probably doesn't even work anymore

It works fine.

@kellijaebaeli It's not hard to me at all. But I guess for you it's like if I had to cook a lasagna, which I've never done before.
Now if I had to do that, I would read the recipe and try. And if I got stuck I'd ask someone. And if I didn't want to bother with, but just have my lasagna served to me on a platter, then I'd pay someone to cook it for me.
The one thing I would never do, is go into an Italian restaurant and whine to the Chef about how hard it is to cook.
Title: Re: Link preview mod?
Post by: shadav on June 09, 2020, 03:20:54 PM
that's good to know :)
wasn't sure with the changes in smf..... I may eventually give this a try then