Changing .og:image thumbnail

[Luke B]

Good afternoon all,

I would like my og thumbnail to show images from the site instead of the default thumbnail (how it would show on facebook for example). The catch is, I have some specific specifications for certain pages on the forum and I'm not sure how to go about it.

Home page: Any of the photos in the "Latest Photos" block.

User profile: Show the users profile image.

Album Photo: Show the album photo in the thumbnail. Example: this image would show as a linked thumbnail in facebook, http://slruser.com/useralbums/leo-jpg.14/view-image
I understand this is the "User Albums" app.

I'm assuming bellow is the code that needs to be altered. What would I change the "content =" to and how would I alter it on the pages specified above?

All other pages (thread list, thread...) would use the default thumbnail.

<meta property="og:image" content="http://slruser.com/styles/default/xenforo/logo.og.png" />

Thank you

 

[Jake Bunce]

Edit the content templates for those pages:

Admin CP -> Appearance -> Templates
> forum_list
> member_view
> xfr_useralbums_image_view

You will see the open_graph_meta template included in these templates. For example, in forum_list you will see this code:

<xen:container var="$head.openGraph">
	<xen:include template="open_graph_meta">
		<xen:set var="$url">{xen:link 'canonical:index'}</xen:set>
		<xen:set var="$title">{$xenOptions.boardTitle}</xen:set>
	</xen:include></xen:container>

You need to pass in an image. You can use $avatar which is already used by the open_graph_meta template for og:image:

<xen:container var="$head.openGraph">
	<xen:include template="open_graph_meta">
		<xen:set var="$url">{xen:link 'canonical:index'}</xen:set>
		<xen:set var="$title">{$xenOptions.boardTitle}</xen:set>
		<xen:set var="$avatar">http://slruser.com/yourimage.png</xen:set>
	</xen:include></xen:container>

 

[Luke B]

Thank you Jake

If I'm understanding this correctly, I'm still setting a specific image for each template using this method. That is one step closer but ultimatly what I would like to achieve is to allow the image/images that are on the current page to be represented in the linked avatar. So If a visitor is viewing an album image for example, that very album image will show up as the thumbnail on facebook. Or if someone is linking to a user profile page on my forum, that users profile image will show up as the thumbnail on facebook.

Basically what it comes down to is on every page besides those that have no images (thread list, thread...) an image that is currently on that specific page is then represented as a thumbnail.

Thank you

 

[Jake Bunce]

You don't have to hard-code a specific image. For example, member_view uses this to call on the user's avatar:

<xen:container var="$head.openGraph"><xen:include template="open_graph_meta">
	<xen:set var="$url">{xen:link 'canonical:members', $user}</xen:set>
	<xen:set var="$title">{$user.username}</xen:set>
	<xen:set var="$avatar">{xen:helper avatar, $user, 'm', '', 'true'}</xen:set>
</xen:include></xen:container>

This passes the avatar URL of the user whose profile page is being viewed, as opposed to hard-coding a specific image for all profile pages.

I don't use your album addon, but presumably there is an image record available to xfr_useralbums_image_view which you can pass into $avatar. I can probably come up with specific code for your album pages if you give me a URL and admin login to your forum. Or link me to that specific addon so I can install it and test it on my own forum.

 

[Luke B]

Thank you Jake

As soon as I get back home in a few hours I might have to take you up on that offer!

Thank you again.

 

[Luke B]

Jake,

Here is the link to the addon. 1.0.0 b2

Thank you very much for the help on this one. If you prefer not to install it, just let me know.

Luke

 

[Jake Bunce]

Use this code in your xfr_useralbums_image_view template:

<xen:container var="$head.openGraph"><xen:include template="open_graph_meta">
	<xen:set var="$url">{xen:link 'canonical:useralbums/view-image', $image}</xen:set>
	<xen:set var="$title">{$album.title}</xen:set>
	<xen:set var="$avatar">{xen:helper fullurl, $image.thumbnailUrl, 1}</xen:set>
</xen:include></xen:container>

That will add appropriate tags to this page (including the thumbnail image):

http://slruser.com/useralbums/leo-jpg.14/view-image

 

[Luke B]

Thank you so much for this Jake

Where about do I place this code in the xfr_useralbums_image_view template?

 

[Jake Bunce]

I put it near the top, like so:

<xen:require css="xfr_useralbums_images_list.css" />
<xen:title>{$album.title}</xen:title>
<xen:h1>{$album.title}</xen:h1>

<xen:description>
	{xen:phrase xfr_useralbums_album_created_by_x_date_y,
		'name={xen:helper username, $album}',
		'date=<a href="{xen:link useralbums/view, $album}">{xen:datetime $album.createdate, html}</a>'}
</xen:description>

<xen:container var="$head.openGraph"><xen:include template="open_graph_meta">
	<xen:set var="$url">{xen:link 'canonical:useralbums/view-image', $image}</xen:set>
	<xen:set var="$title">{$album.title}</xen:set>
	<xen:set var="$avatar">{xen:helper fullurl, $image.thumbnailUrl, 1}</xen:set>
</xen:include></xen:container>

<xen:navigation>
	<xen:breadcrumb source="$breadCrumbs" />
</xen:navigation>

 

[Luke B]

I went ahead and pasted the code where you have it and refreshed the page but I'm still not seeing any thumbnail in facebook for the album images. Could this be a Facebook cache issue?

 

[Jake Bunce]

I went ahead and pasted the code where you have it and refreshed the page but I'm still not seeing any thumbnail in facebook for the album images. Could this be a Facebook cache issue?

The meta data is showing in the page source now:

http://slruser.com/useralbums/leo-jpg.14/view-image

It could very well be a cache issue with respect to facebook. I have never used facebook so I'm not familiar. Try posting a new picture.

 

[Paul B]

Try the URL Linter http://developers.facebook.com/tools/lint/?url=http://slruser.com/useralbums/leo-jpg.14/

 

[Jake Bunce]

Neat linter.

It says the various og properties are missing, but I can see them in the page source:

http://developers.facebook.com/tools/lint/?url=http://slruser.com/useralbums/leo-jpg.14/view-image

 

[Luke B]

Thank you Brogan, that is very handy.

Jake, I also see it in the page source as well. Not sure what to make of this :/

 

[Luke B]

Interesting, it seems as though the Facebook URL Linter just took a nose dive for some reason. The link Brogan supplied works fine, but when you try another URL you get a big fat "Sorry, something went wrong. We're working on getting this fixed as soon as we can"

 

[Luke B]

It works! It must have been a cache issue with respect to facebook. Jake and Brogan, thank you for your help on this.