Text only | Text with Images

ElkArte Community

Elk Development => Bug Reports => Topic started by: Jorin on May 19, 2017, 02:20:02 am

Title: attachimg and facebook links
Post by: Jorin on May 19, 2017, 02:20:02 am
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:-)
Title: Re: attachimg and facebook links
Post by: emanuele on May 19, 2017, 03:29:58 am
A link to the facebook post (if accessible) would help as well. :)
Title: Re: attachimg and facebook links
Post by: Atlas on May 19, 2017, 03:56:53 am
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.
Title: Re: attachimg and facebook links
Post by: Jorin on May 19, 2017, 03:58:39 am
Quote from: emanuele – A link to the facebook post (if accessible) would help as well. :)

Sorry, it's not. None of my facebook posts is.
Title: Re: attachimg and facebook links
Post by: Jorin on May 19, 2017, 03:59:18 am
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?
Title: Re: attachimg and facebook links
Post by: Atlas on May 19, 2017, 04:08:38 am
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.
Title: Re: attachimg and facebook links
Post by: Jorin on May 19, 2017, 04:12:17 am
I am using the default template, so...  ;)
Title: Re: attachimg and facebook links
Post by: Atlas on May 19, 2017, 05:23:57 am
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).
Title: Re: attachimg and facebook links
Post by: Jorin on May 19, 2017, 05:34:07 am
Thank you, @Atlas . @emanuele: Should this edit be part of the default ElkArte installation?
Title: Re: attachimg and facebook links
Post by: Atlas on May 19, 2017, 06:05:15 am
This is a sample from the open graph protocol (http://ogp.me/)'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 (https://search.google.com/structured-data/testing-tool/u/0/#new-test-code-tab).  Hit submit, and nothing.

Now try this in Google's Structured Data Testing Tool (https://search.google.com/structured-data/testing-tool/u/0/#new-test-code-tab):
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 (http://xmlns.com/foaf/spec/#term_Document)
Title: Re: attachimg and facebook links
Post by: Atlas on May 19, 2017, 08:26:32 am
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/
Title: Re: attachimg and facebook links
Post by: Spuds on May 19, 2017, 02:19:26 pm
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
Title: Re: attachimg and facebook links
Post by: live627 on May 19, 2017, 05:47:52 pm
Not going to sign up just to view that fb link
Title: Re: attachimg and facebook links
Post by: Spuds on May 19, 2017, 05:51:14 pm
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.
Title: Re: attachimg and facebook links
Post by: Jorin on May 23, 2017, 01:06:27 am
Quote from: live627 – Not going to sign up just to view that fb link

No need to, you can read the thread withtout registering. For facebook just look at the screenshot.  ;)
Title: Re: attachimg and facebook links
Post by: live627 on May 23, 2017, 09:53:23 pm
the fb link  posted in reply #9 requires a login.
Title: Re: attachimg and facebook links
Post by: Jorin on May 24, 2017, 01:02:03 am
I don't see any fb link in post #9. Do you mean #10 maybe?
Title: Re: attachimg and facebook links
Post by: Atlas on May 24, 2017, 01:10:52 am
Quote from: Jorin – I don't see any fb link in post #9. Do you mean #10 maybe?
Yeah, I think that's what he meant. I just checked, fb requires a login to access any of their dev tools.
Text only | Text with Images