preview in link

[goldenstudios]

noticed that on my site when I take a link of a post the preview is not seen, while if I try to take a link in this forum and put it on telegram it shows a small previews of the post
example show the different:


in the first link you see a small preview (image) in the second link no how can I get the preview?

[drewactual]

what you see when you post into pages like facebook, twitter, instagram, and telegram are representations of what you told those services to share....

generally, it's handled by Open Graph (OG) or Twitter Cards... as you'd guess, Twitter Cards are for Twitter and though Open Graph was made/implemented by and for FaceBook, it is leveraged by many sites now... and even twitter will fall back to OG if there is no Twitter Cards provided...

I'm guessing you're next going to want to know how to do it?

here ya go:

in your index.template file:

find:

Code Select Expand

</head>

add before:

Code Select Expand


<!-- FACEBOOK OPEN GRAPH CARD -->
    <meta property="og:url" content="' . $context['canonical_url'] . '" />
    <meta property="og:type" content="website" />
    <meta property="og:title" content="', $context['page_title_html_safe'],'" />
    <meta property="og:description" content="ENTER YOUR PAGE DESCRIPTION HERE" />
    <meta property="og:image" itemprop="image" content="ADD A LINK TO AN IMAGE HERE- MAKE SURE IT MEETS THE OG STANDARD- GOOGLE IT IF YOU HAVE TO" />
<!-- END FACEBOOK OPEN GRAPH CARD -->

<!-- TWITTER CARD -->   
    <meta name="twitter:card" content="summary" />
    <meta name="twitter:site" content="YOUR TWITTER HANDLE" />
    <meta name="twitter:title" content="', $context['page_title_html_safe'],'" />
    <meta name="twitter:description" content="A BRIEF DESCRIPTION YOU WANT DISPLAYED" />
    <meta name="twitter:image" content="THE IMAGE YOU WANT ON TWITTER- LIKE THE IMAGE FROM THE OG CARD? USE A URL HERE" />
<!-- END TWITTER CARD -->

<!-- ITEMPROP- USEFUL FOR NETWORKS LIKE VERIZON WHEN YOUR LINK IS SHARED VIA SMS MESSAGE -->
    <link itemprop="thumbnailUrl" href="URL TO IMAGE FOR IMAGEPROP, LIKELY SAME AS FOR FB AND TWITTER">   
<!-- END ITEMPROP -->


That^ is the basis of it... that is somewhat plain jane, and the only trick in that code is using the canonical URL of the page being shared AND the title of that page... you'll need to add your own information, which is the area's i used all caps for within the code and explained what you'll need.... don't add that to index.template with the CAPS notes, but with your own code (mostly image url's and descriptions)...

Now, it can get a lot more complicated if you want- which i do :-) ...  you can have the OG/Twitter cards specific to a board which can show an image specific for that board, or have it collect the title tags from the posts and have it share that, or anything in between or adjacent----- but that is over complicating for the time being...

do a search of Open Graph and make sure the card/code i've provided is still valid, and then implement it.... then, go to a OG validator and run the link through, which will not only show you any errors but also a representation of what your link will look like to other users. 

[goldenstudios]

thank you very much, but I just want it to show the first image in the post?

[drewactual]

remember that part when i said it get's complicated?

that's complicated. 

it's also the Holy Grail of building an automated OG/Twitter card that isn't broken or easily broken, and with a fallback image.  can it be done? sure- i've even done it.. but... it's a lot more tricky than you likely realize- for instance, what if the first image is discovered and is a single pixel in size?  what if it's tiny, otherwise? what if it's an avatar? what if it is massive and outside of the OG specifications?

now.. here is a hint to make it work, but I can't share how we do it, not easily, anyway:

use the built in bbc IMG button, and edit it with either a title or leverage the built in 'alt'... it would look like this in 'code' view:

Code Select Expand


[img alt="" width=50 height=50 title="image title"] url to image [/img]


in that^ example, the BBC (you'll find the code for that in sources/subs.php) is already set up to add the 'alt', which allows you to manually type an alt description in.. example would be you manually insert the following into your post before you post it:

Code Select Expand


[img alt="your alt text, such as 'post image'" height=50 width=50] url to image [/img]


if you used a script (jQuery has one you can leverage to do this and if your page references/links any jQuery you likely already have the capability present) to find the first image, AND if you think enough of a post to want to share it on social media or through a link? you can use the 'alt' information to flag that image in particular... call it something the script is looking for such as:

Code Select Expand


blah blah blah ...... alt="image-in-link" .... blah blah blah


if you're really ambitious, you can add another parameter to the 'img' bbc code in sources/subs.php and call it 'title'... a lot of folks do this, and so you get that nice little hover-over-image box with the title in it.... it can also be 'titled' and harvested by the script to be used in your social/link share.  you just tell the script to select the first specific alt or titled image to be used in the OG/Twitter card.

that^ requires someone to specifically add that information to that tag (alt or title)... which, again, if you're thinking enough of a specific post to share it, you may want to edit it and it's image with that specific picture.

you can also write the code to scour for these tags and specific text within it, and if it doesn't find it? use a fallback...

you see how complicated how fast this gets?  :-) 

[goldenstudios]

wow, excellent description ... sicyramente you who know capable is easier than I do not understand it will take me a lifetime to understand it .. but I want to try ahaha, unless I attach it to my image and tell the system to print me the attached image .. isn't it simpler?

[drewactual]

you may find support and help in the mod request board... this is something i think a lot of us are doing, but are using various ways to do it... it is something that is hard coded into our pages as we customize SMF....

however..... and i really think this is something that would be popular in the era of social media and everyone carrying a computing device around in their pockets- sharing links with others:

a simple BBC button that does a social/link share of a specific post.

it would be added to Sources/subs.php as an additional BBC function/button... the information in the post would be used to construct an OG card- complete with page title (post title), snippet of text from the post, and an image specified by the user (using the scour for tag method i suggested above)...

if you want to make a post in the 'mod request' board using that information and linking back to this thread, this is something a good coder familiar with SMF could do with fair ease.... and would likely find a lot of folks using their mod... shoot, I would!  a 'social/link' share of a specific post or even thread (a button added to the threads main control- adjacent 'reply' ect?) would be fantastic.

[goldenstudios]

thank you so much for your support and payment