Octobercms - og:image

1.1k views Asked by At

I've setup a blog using octobercms and the plugin rainlab blog. The problem now is that I want to use the featured image as the facebook sharing image.

How can this be done? When I go to the Facebook Debugger, I can see the logo and my featured image, but once I share it, the display image is the logo.

Many thanks

2

There are 2 answers

0
Pratyush Pundir On

In the page/layout you are using for your blog post, you will need to add the OpenGraph tags if you haven't already.

<meta property="og:url" content="http://www.yourwebsite.com" />
<meta property="og:type" content="website" />
<meta property="og:image" content="{{ this.getShareImageUrl }}" />
<meta property="og:title" content="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod" />
<meta property="og:description" content="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati modi illo explicabo quidem ipsa, voluptatum quibusdam, nemo veritatis enim eveniet doloribus et eius voluptate nam cum veniam, fugit. Dolorum, adipisci." />

Facebook needs these tags to pull the right data. You might find this useful to read more about these tags.

So all you should need now would be the url for the correct featured_image since you most likely have more than one featured_image. You can choose to write that logic however you want (hence I just used a method call in the code above), but once you have the instance of the featured_image you want, you can use the getPath() method on the instance to get the url (since it is an instance of the File class, you can use those methods on it).

You can read further documentation here - http://octobercms.com/docs/database/model#file-attachments

That's it, go back to FB debugger and press debug. If it doesn't work, try using the other button which says 'Fetch new scrape information' (only appears after you have pressed the debug button once already) and you should be good.

I just went thru these steps for a new website and I had to let facebook re-scrape to get it to work. Let us know if this works for you.

0
Stephen Keable On

This might be late but I had the same issue and used this code to pass the image from your blogpost page to the layout file:-

function onEnd() {
    $_post = $this->components['blogPost'];
    if ($_post->featured_images->first()) {
        $this->page->og_image = $_post->featured_images->first()->path;
    }
}

Which will allow you to use this markup in your layout file (with your <head> in):-

{% if this.page.og_image %}
     <meta property="og:image" content="{{ this.page.og_image }}" />
{% else %}