Skip to main content ↑ ↓
attachimg and facebook links Started by Jorin · · Read 8684 times 0 Members and 1 Guest are viewing this topic. previous topic - next topic

attachimg and facebook links

I posted on facebook a link to a review of a car, posted in my forum.

Thread: http://forum-alternative-antriebe.de/index.php/topic,6804.0.html

As you can see, I used [attachimg=x] a lot in this post. Facebook tries to implement a picture found in the post in his link, but not this time, as you can see in the screenshot. I think the problem are the BBCs.

Any hints? I don't know if this is really a bug or if you have time to look for it.  O:-)

Re: attachimg and facebook links

Reply #1 –

A link to the facebook post (if accessible) would help as well. :)
Bugs creator.
Features destroyer.
Template killer.

Re: attachimg and facebook links

Reply #2 –

fb dev here, if the default pic isn't explicitly defined:
Code: [Select]
<!-- fb uses <meta> in example docs, it's an improper use of a <meta> though -->
<meta property="og:image" content="http://example.com/image.jpg" /> 
or
<link property="og:image" href="http://example.com/image.jpg" /> 
or
<img src="http://example.com/image.jpg" alt="use alt descriptions" />
fb grabs the first pic it finds in your page's HTML.
Last Edit: May 19, 2017, 04:04:02 am by Atlas

Re: attachimg and facebook links

Reply #4 –

Quote from: Atlas – fb dev here, if the default pic isn't explicitly defined:
Code: [Select]
<meta property="og:image" content="http://example.com/image.jpg" />
or
<link property="og:image" href="http://example.com/image.jpg" />
or
<img src="http://example.com/image.jpg" alt="use alt descriptions" />
fb grabs the first pic it finds in your page's HTML.

Okay. So what can I do?

Re: attachimg and facebook links

Reply #5 –

To automate the process you'd need to edit your template. I'm a new user and haven't looked at that part of the code yet, my comment was more an open-letter to whomever is tasked with it. Regardless, i'll take a look and get back with you on it when i have a moment.

Re: attachimg and facebook links

Reply #6 –

I am using the default template, so...  ;)

Re: attachimg and facebook links

Reply #7 –

themes/default/Display.template.php

Find:
Code: [Select]
<a href="', $attachment['href'], ';image"

Replace:
Code: [Select]
<a property="og:image" href="', $attachment['href'], ';image"

btw, this will allow users to pick which of your attachments from that page to share from the share-dialog box (if that feature is still supported, idk, i'm a fb-dev not a fb-user).

Re: attachimg and facebook links

Reply #8 –

Thank you, @Atlas . @emanuele: Should this edit be part of the default ElkArte installation?

Re: attachimg and facebook links

Reply #9 –

This is a sample from the open graph protocol's homepage
Code: [Select]
<html prefix="og: http://ogp.me/ns#">
<head>
<title>The Rock (1996)</title>
<meta property="og:title" content="The Rock" />
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="http://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg" />
</head>
<body></body>
</html>

...copy/paste that in Google's Structured Data Testing Tool.  Hit submit, and nothing.

Now try this in Google's Structured Data Testing Tool:
Code: [Select]
<!DOCTYPE html>
<html xml:lang="en" lang="en">
<head prefix="foaf: http://xmlns.com/foaf/0.1/ og: http://ogp.me/ns#" typeof="foaf:Document">
<meta charset="utf-8" />
<title property="og:title">The Rock (1996)</title>
<meta property="og:type" content="video.movie" />
<link property="og:url" href="http://www.imdb.com/title/tt0117500/" />
<link property="og:image" typeof="foaf:Document" href="http://ia.media-imdb.com/images/rock.jpg" />
<meta property="og:description" name="description" content="A movie..." />
</head>
<body>
<link property="og:image" typeof="foaf:Document" href="http://www.imdb.com/images/SeanConnery.jpg" />
</body>
</html>

See the problem? You don't get the second pic,  "SeanConnery.jpg" because it's out the scope of the namespace, and no, you can't put it on the <html>tag, only the namespace http://www.w3.org/1999/xhtml/  is allowed there.

So, in order to do this properly with your situation (of the images being only in the <body>) you would have to move all the properties to the <body>

Code: [Select]
<!DOCTYPE html>
<html xml:lang="en" lang="en">
<head>
<meta charset="utf-8" />
<title>The Rock (1996)</title>
<meta name="description" content="A movie..." />
</head>
<body prefix="foaf: http://xmlns.com/foaf/0.1/ og: http://ogp.me/ns#" typeof="foaf:Document" resource="http://www.imdb.com/title/tt0117500/">
<meta property="og:type" content="video.movie" />
<link property="og:url" href="http://www.imdb.com/title/tt0117500/" />
<link property="og:image" typeof="foaf:Document" href="http://ia.media-imdb.com/images/rock.jpg" />
<meta property="og:description" content="A movie..." />
<img property="og:image" typeof="foaf:Document" src="http://www.imdb.com/images/SeanConnery.jpg" />
</body>
</html>

BTW, images and movies are sub-classes of foaf:Document
Last Edit: May 19, 2017, 08:34:46 am by Atlas

Re: attachimg and facebook links

Reply #10 –

IMO, Open Protocol sucks, scrap it and use schema.org instead. I mean,
compare this: http://ogp.me/ns/ogp.me.rdf
To this: http://schema.org/docs/full.html

I don't want to give the impression they can't work together, they can, but my opinion of open-graph more accurately is... why bother. Buttt, if you're autistic about using facebook tags still, this will come in handy https://developers.facebook.com/tools/debug/
Last Edit: May 19, 2017, 08:56:21 am by Atlas
 

Re: attachimg and facebook links

Reply #11 –

In my limited playing with structured data I prefer using schema data vs open graph. 

I think we could add a generic open graph image that would simply be the sites logo, something like
Code: [Select]
	<meta property="og:image" content="', $context['header_logo_url_html_safe'], '" />
along with all the other head section meta-palooza

Re: attachimg and facebook links

Reply #12 –

Not going to sign up just to view that fb link
LiveGallery - Simple gallery addon for ElkArte

Re: attachimg and facebook links

Reply #13 –

But others will, or your friends will visit.

I thought the use of open graph in this instance was just so the shared link, in FB, looked all cool vs just another url.