Changing social sharing image
AnsweredHi everyone
I could only see older threads relating to this issue, but couldn't figure out a suitable fix...
When we share our help centre via social media, the image that pops up is a zoomed in version of our logo. I need to know how to change this image (the document header). It doesn't need to be dynamic, I just need a chosen image to be shown when our links are shared via social media and/or by email. On Shopify this is known as the Social Media Share Image.
Any help or advice would be highly appreciated.
-
Hi Sam,
There are 2 factors that we can look into here.
1.) By default, our Help Center uses the logo image when sharing links on social media platforms. This is the logo that can be found under Brand by going to the Customize design icon in the sidebar > and by clicking Customize in your Theme.
2.) If your plan allows, you can also edit the document_head.hbs in your Theme and specify another og:image in the Document head template.
For example:
<meta property="og:image" content="<image link>">
<meta property="og:image:width" content="600">
<meta property="og:image:height" content="315">
For more information, I recommend checking Branding your Help Center
Thank you!
-
This method does not work for all social sites.
For instance this method in the Copenhagen template adds the OG down the page (order) past the Zendesk inserted OG, which cannot be changed.
While this for Facebook, LinkedIn priortizes the higher order one, so shows the site logo as the og:image
-
You can also go to the `scripts.js` file and add the following line:
```
document.querySelectorAll('meta[property=og\\:image]')[0].setAttribute('content', 'https://link-to-your-image.com/image.jpg')
```
This will find the first meta tag with the property `og-image` and replaced it with your desired one.
It's ridiculous that Zendesk doesn't offer a less hacky way of doing that same thing.
Please sign in to leave a comment.
3 Comments