Where to set the image/icon/graphic which is used as a preview on Social Media

neurosphere · June 26, 2019, 12:44:09 PM

Hi all, currently, when a post is shared on facebook, this weird graphic is used in the preview (attached).

Where does that come from, and how can it be changed? I've tried searching these forums and googling, but anytime I search for image/icon and facebook together I only get hits for sharing buttons.

Thanks!

Aleksi "Lex" Kilpinen · June 26, 2019, 12:59:45 PM

Sadly as far as I know, for forums, there isn't a perfect solution really- unless you want to specify a single generic image that will be used on all shared URLs.
For a longer answer, FB either uses the first suitable image it can load at the URL given - Or you can try to specify an image through the metadata.

https://developers.facebook.com/docs/sharing/webmasters/images/
https://developers.facebook.com/docs/sharing/best-practices/

neurosphere · June 26, 2019, 01:21:06 PM

Quote from: Aleksi "Lex" Kilpinen on June 26, 2019, 12:59:45 PM
Sadly as far as I know, for forums, there isn't a perfect solution really- unless you want to specify a single generic image that will be used on all shared URLs.
For a longer answer, FB either uses the first suitable image it can load at the URL given - Or you can try to specify an image through the metadata.

https://developers.facebook.com/docs/sharing/webmasters/images/ [nofollow]
https://developers.facebook.com/docs/sharing/best-practices/ [nofollow]

Ah, those links are helpful, thanks!!

We're perfectly happy to have the same image for all posts, sort of like a flavicon. Anything is better than the current image.

So it seems I can designate an image to be included in the meta data. I'm new at this. Where would I put the image? Does it need a particular name? Facebook needs an "og:image" tag it seems, for an image. Not sure how to do that. I'll read/search for an answer, but any leads would be appreciated.

[Edited to add, I see where to add new meta data for the index page, but now have to find how to do this for posts]

Kindred · June 26, 2019, 01:49:02 PM

If you add it to index.template.php, it will be used on all pages

neurosphere · June 26, 2019, 03:16:25 PM

Quote from: Kindred on June 26, 2019, 01:49:02 PM
If you add it to index.template.php, it will be used on all pages

Oh, ok, great. Thanks!

Everyone's help is very much appreciated!

Aleksi "Lex" Kilpinen · June 26, 2019, 03:20:47 PM

Filename does not matter, and it would make sense to upload the image to your forum's root.

Examples of OG metadata

Code Select


<meta property="og:url"                content="http://www.nytimes.com/2015/02/19/arts/international/when-great-minds-dont-think-alike.html" />
<meta property="og:type"               content="article" />
<meta property="og:title"              content="When Great Minds Don't Think Alike" />
<meta property="og:description"        content="How much does culture influence creative thinking?" />
<meta property="og:image"              content="http://static01.nyt.com/images/2015/02/19/arts/international/19iht-btnumbers19A/19iht-btnumbers19A-facebookJumbo-v2.jpg" />

https://developers.facebook.com/docs/sharing/webmasters/

neurosphere · June 27, 2019, 07:29:54 AM

I found the index.template.php file in the Themes directory.

I created a meta tag that looks like this:
<meta property="og:image" content="[my actual image ulr]" />

I thought I could just put it anywhere between <head>'; and <head/>? But obviously not as this gives me parsing errors when loading page.

Edited to add: nevermind. I looked at the HTML code for the site and saw what some of the other headers were, and found where those were defined in the code. So I pasted my tag in the same area and the page loaded fine. Now I have to see if the image I used actually shows up when sharing the links!

neurosphere · June 27, 2019, 07:45:55 AM

Now, the image it used to randomly use as the icon (was some button on the page) is no longer being displayed when sharing a link, but it's not finding my image and instead displaying a generic placeholder.

The facebook scraper gave me the following message:
Provided og:image, https://box710.bluehost.com:2083/cpsess2772837021/frontend/bluehost/filemanager/showfile.html?file=main+icon+300+x+300.png&fileop=&dir=%2Fhome3%2Fstkplann%2Fpublic_html%2Fdoctoredmoneyforum&dirop=&charset=&file_charset=utf-8&baseurl=&basedir= [nofollow] could not be downloaded. This can happen due to several different reasons such as your server using unsupported content-encoding. The crawler accepts deflate and gzip content encodings.

When I cut/paste that url of the image into a browser, I see the image. But the link or the image is obviously not in the right format

[Edit: I learned how to get a cleaner or direct url rather than that mess up there. But the error message is the same].

Illori · June 27, 2019, 07:49:40 AM

that is the link from your hosting control panel. you need to have a URL that starts with your website URL instead.

you can display it because you are logged into your hosting control panel.

neurosphere · June 27, 2019, 08:22:08 AM

Quote from: Illori on June 27, 2019, 07:49:40 AM
that is the link from your hosting control panel. you need to have a URL that starts with your website URL instead.

you can display it because you are logged into your hosting control panel.

Thanks! I just figured that out too, and now the link is http://[mysite.net]/[filename.jpg] and correctly finds the file if typed in the address bar.

But I'm getting various other errors from the facebook scraper, such as the file could not be downloaded or "Provided og:image URL, ... could not be processed as an image because it has an invalid content type."

So at this point it seems it's a problem with the png and/or jpg files I've attempted to use.

Aleksi "Lex" Kilpinen · June 27, 2019, 09:20:23 AM

Quote from: neurosphere on June 27, 2019, 08:22:08 AM
So at this point it seems it's a problem with the png and/or jpg files I've attempted to use.

Yes, that would be the logical cause. The first link I gave ( https://developers.facebook.com/docs/sharing/webmasters/images/ ) has the requirements, and I would suggest jpg for this.

neurosphere · June 27, 2019, 09:31:04 AM

Quote from: Aleksi "Lex" Kilpinen on June 27, 2019, 09:20:23 AM
Quote from: neurosphere on June 27, 2019, 08:22:08 AM
So at this point it seems it's a problem with the png and/or jpg files I've attempted to use.
Yes, that would be the logical cause. The first link I gave ( https://developers.facebook.com/docs/sharing/webmasters/images/ [nofollow] ) has the requirements, and I would suggest jpg for this.

Still can't get it to work. So I used the identical image file that works correctly for the same purpose on a squarespace site. And now facebook says:
Provided og:image ... could not be downloaded. This can happen due to several different reasons such as your server using unsupported content-encoding. The crawler accepts deflate and gzip content encodings.

So perhaps now I need to specify a "content encoding" such as "deflate" or "gzip"? It seems those are compression parameters? Perhaps the default encoding is invalid. I've got more reading to do!

[Edit. WORKS! That error message was transient. 10 minutes of my life I'll never get back, trying to figure out what an .htaccess file is and how to enable gzip, lol. Might come in handy some day. But as a 50 year old physician, I'm already too much in the weeds on this stuff!

]

Aleksi "Lex" Kilpinen · June 27, 2019, 10:28:29 AM

Congrats! Live and learn

News:

Where to set the image/icon/graphic which is used as a preview on Social Media