Is there a way to customize image that appears when a Guide ink is shared to social media?Answered
we are trying to personalize the image that pops-up when sharing a guide link, but we havnt been able to do so.
We have customized our Zendesk theme, adding the following <meta> to the Header portion of the theme:
<meta property="og:image" content="https://theme.zdassets.com/theme_assets/2131447/d3bf0349a94f4ea9c3e415b6b871845852c97172.png" />
<meta property="og:image:width" content="600" />
<meta property="og:image:height" content="315" />
However, it looks like a <meta> is automatically injected:
<meta property> = "og.image" content="http://p13.zdassets.com/hc/assets/logo.png">
How can we customize the image shown when an article is shared?
We have the same problem as Clayton on this post: https://support.zendesk.com/hc/en-us/articles/203664326-Customizing-your-Help-Center-theme-Guide-Professional-?page=2
Looking forward to your answer
We've got several HC customization wizards amongst our Community Moderators, so I'm checking with them to see if they know whether/how this might be possible. Stand by!\
I'm having the same issue and no one from the support team is able to help me for at least a week already....
what just discovered is that when my HC is deactivated everything is working fine and as soon as I will activate the HC this default image is being used
<meta property> = "og.image" content="http://p13.zdassets.com/hc/assets/logo.png">
Hey Ana -
Where are you sharing links to that you're seeing this?
Hi Nicole, Jessie, I just checked on the platform we had this problem (slack, FB, twitter, etc.) and apparently the problem is solved ..
Now we see our logo and support center next to it. I havent checked the code, but something must have changed.
Did you guys perform any changes?
Thanks a lot
No changes that I'm aware of...what I was able to determine in the course of my research is that the preview image that displays when you share a link is actually the same as your favicon. Did you update that? Otherwise, my educated guess is that it just took some time for the image changes to be indexed so they'd show up properly.
Here's what I've experienced:
We've customized our Zendesk theme, including adding the following <meta> to the Header portion of the theme:
<meta property="og:image" content="//p7.zdassets.com/hc/theme_assets/231027/200067384/brushfire-zendesk-share-image.png" />
However, it looks like when you choose a logo in your Guide settings that Guide creates a <meta> that uses the logo as the og:image:
<meta property="og:image" content="http://p7.zdassets.com/hc/settings_assets/231027/200067384/H1dAOi09S26ihCNkqHv4Rw-Brushfire-logo-white.png">
Is there any way to make Guide NOT do that? We want to specify a custom image to be displayed when any of our Guide links are shared.
Link to our Guide: https://get.brushfire.help/hc/en-us/.
To the best of my knowledge it's not possible to change this, but let me check with our Community Moderators to see if they know of a way to do it.
Let me follow-up with the Mods on this. I know that that the preview image is pulled from the favicon that you've set in your Help Center, but I'm not sure if it's possible to override that. I'll see what I can find out for you!
Thanks for looking into this for me. I think that it's actually pulling the logo image (ours is white text with a transparent background). Our favicon is a black logo with a transparent background. If it was pulling in the favicon then I'd actually be fine with that!
Attached our some images for reference.
Help Center header (w/ logo):
Code in the <head> tag. It adds a new og: image, but because it's lower down than the one that Zendesk automatically adds, the offending white one is usually displayed:
Thanks again for looking into this and I appreciate your help!
You're absolutely right! Apparently I pulled the favicon thing out of my year. I tested it in my own test instance and it pulled the logo.
I've pinged the Moderators again to see if someone who knows more about HC customization than I do can help you with this!
We just had this problem. I haven't tested every social platform, but we solved it on Slack by uploading our existing logo as a separate asset, then swapping out the reference within the header template file. Then I updated a darker version of our logo to the actual logo field in the theme settings. This image in the logo field is what is referenced when sharing articles on Slack, but our template pages are pulling in the same white version of our logo we were using before.
Thanks for sharing, Kevin!
Just bumping this thread, as I'd still love to be able to have a legible sharing image for our help center links. I can't use Kevin's solution as the logo in the help center has to have white text.
The solution I thought of is to have a blue background on the logo (to match the header background of our help center), but that will sometimes render improperly (as the blue in an image, and the blue in our header can render differently as one is a css hex code and one is just a color in a .png).
I have been asking about this feature for years, I needed it at my previous employer and couldn't do it, and I've been asked to do it again in my latest company and still, I can not do it, because Zendesk still doesn't support creating a custom share image for every support article. So instead of sharing links (with automatically generated previews that link to the content), we need to share images (which are not linked) and add links to the image description text... All this because Zendesk forcibly injects the logo as the "social share image"... Jessie, Nicole, could you hint to your developer team that this is a very requested feature for any company that uses social media to interact with their users? Thanks! <3
Hey Ivan -
The product teams are aware of this request, but improvements to the social media integrations are not high on the priority list at the moment. We'll keep bugging them for you though!
Not sure if it fits you, you may try the following method to have a custom image for every support article. For me, it's working fine for Facebook sharing.
Remove the code below in " document_head.hbs"
" <meta property="og:image" content="https://tobylandingpage.s3.amazonaws.com/hellotoby-logo.png">
<meta propert="og:image:width" content="600">
<meta property="og:image:height" content="315">"
Only use the code provided below in " document_head.hbs"
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
See below example:
After you replaced the code, Facebook will automatcilly call the photo on your article. In case, Facebook still use calling the old one, you may Debug it.
Let me know if any questions.
Thank you, Coco, that's helpful. I do have a question, two actually... Can you please tell me which plan I need to be able to edit these files, such as document_head.hbs? Also. is document_head.hbs common to all articles, or are you able to edit it for each support article individually?
I'm using Guide Professional( $19 monthly) with Copenhagen theme. Once you have used those code, it will apply to all the articles. The image will be using the one you have used in the article. Feel free to let me know if any questions.
Hi! I tried your code at my theme but zendesk still using brand logo as og:image. Maybe I'm doing smthg wrong?
Hi @Coco Chan,
We already added all meta that facebook and twitter require in our document_head.hbs.
It works with the main link but when we share a specific article-page, we still get the default image of logo.
Here is one example: https://support.free2move.com/hc/en-us/articles/115005111305-What-is-carsharing-
is there any way to apply it to all the articles?
Responding to @Nicole from 9 months ago: This issue seems to not be on any Zendesk's TODO list at all, let alone on a priority list. Which is a big shame, considering that social media is crucial and extremely intertwined with customer support.
Companies care very much about having a professional look and social media is the first line of communication with the masses. And whenever we try to share a Help Center Article, Zendesk is making our posts look amateurish.
A simple new field in the article editor that would be outputted to the head's og:photo tag would do the trick. If there's a lack of developers on Zendesk, I would gladly help you with this for free, so that besides my previous and current employers also my future employers (and designers - I'm so sorry Valentina) don't get frustrated.
I cringe when someone shares one of our articles on Facebook.
+1 as well, branding is pretty important and zendesk has been great about it in other areas but lacking here. We regularly tweet help articles at people posing questions to us there, and images would be a great boost to those.
Thanks for sharing your feedback with us. While there are no immediate plans to expand on our existing Social Media integrations, this is super useful for our Product Managers to get a better understanding of this need.
To help provide visibility, I would encourage you to copy and paste your feedback into our Support Product Feedback forum since that is the primary channel our Product Managers user to capture this sort of request.
I'll also be sure to pass this feedback along to the appropriate team internally. Feel free to update this post with a link to your Feedback post for other users to upvote and join in on.
Appreciate you taking the time to share this :)
Post is closed for comments.