Resource icon

xF1 Add-on Facebook’s Open Graph Image or og:image For Forums and Threads 1.0.0

No permission to download
  • Author Author Josh
  • Creation date Creation date
Compatible XF Versions
  1. 1.5
XenForo’s open graph image is sitewide and you can’t specify different images to different forums and threads. It becomes boring on social media where images are a major part of making content go viral.

Thanks to @vlom31 of HackerDeCroissance for sharing the idea, paying me to develop it and then allowing it to share it.

With this plugin, you have different open graph images for forums and threads. The forum open-graph images are to be uploaded via FTP. For threads, admins and moderators can upload images to be used as open-graph images or specify external url.

How To Install The Plugin?

Unzip the file. It contains an upload folder, an XML File named addon-OG.xml and a Readme.html file.

Inside upload folder there is a library folder and data folder.

Upload files and directories inside library to XenForo’s library directory, thereby creating a directory named OG inside the library folder on your server.

Very detail instruction with screenshots to install any addon is here.

Inside the data folder, there is a nodesog folder. Put all the Open Graph Images for each forum in the format FORUMID.jpg

The forum id is the one that you see in the url window when editing the node in the admin area.

i2.wp.com_xfpoint.com_wp_content_uploads_2017_04_nodes_id_2.png


So 6 is the node id in the screenshot above. So the ogimage for this forum will be 6.jpg inside the nodesog folder. (Keep the extension in lower case as Unix and Linux servers are case sensitive and 6.JPG is not same as 6.jpg)

Now import the .xml file using XenForo add-on importer.

Screenshots
i2.wp.com_xfpoint.com_wp_content_uploads_2017_04_1_Facebook_Scrape_1.png


Facebook Scrap Information.

i0.wp.com_xfpoint.com_wp_content_uploads_2017_04_1_Edit_Thread_1.png


Edit a thread and upload the ogimage url. You can even specify an external url for ogimage.

The Open graph title is just in case you do not wish to use the thread title on social media and want to be using a custom title for threads.

Precedence for OG Images

The default og:image inside the style properties won’t be used for any thread or forums and it will be only for the homepage and other than forums and thread pages.

For forums, images in the nodesog folder will be served for open graph images.

For threads, the order of precedence for open graph images is as follows:

  1. First choice is url of the image specified.
  2. Second choice is the uploaded image for the thread.
  3. Last it will revert to the image for the forum.
The plugin doesn’t honor attachment view permissions which mean even if the attachments are set to be visible only to members, the images uploaded via this plugin will be visible to everyone.

What is the preferred dimension for images?

Facebook recommends the width to height ratio to be 1.91. I prefer to keep it at 800px wide and 418 px height but you are free to use any preferred dimension of your choice.

Error attachment too big?

If you find an issue of the file too large when trying to upload a file.

i0.wp.com_xfpoint.com_wp_content_uploads_2017_04_FileTooBigError.png


Make sure your attachment settings allow upload of bigger files.

i2.wp.com_xfpoint.com_wp_content_uploads_2017_04_FileTooBigErr780642b8539eb3d3fcd11a2ec525adb7.png


The settings are same for all the attachment and are under Admin > Options > Attachments.

What if FB still can’t pull the og image?

This can happen at times when FB does not pull things from the server and uses its own cache.

View the source code of the thread page to see if it contains og:image tag?

If the answer is yes, FB is pulling the data from cache. Use Facebook’s sharing debugger tool to rescrape the content from the server again.

If you don’t see the og:image tag, you may be using a custom theme and my template modifications aren’t working as expected. Share them in comments here or on my blog and I will be more than happy to help you.
Author
Josh
Size
17.6 KB
Extension
zip
Downloads
9
Views
3,286
First release
Last update

Similar resources

8thos Bar (Facebook-Like Floating Menu with Avatar and Search Box)
Floating User Bar With Avatar, Style Selector, Back to Top and Search Bar
Use the first image found in a [img] or [attach] tag to populate the og:image field
Open PDF AnimeHaxor
This will make PDF attachments open in the browser.
Back