Is there a way to customize image that appears when a Guide ink is shared to social media? | Community
Skip to main content

Is there a way to customize image that appears when a Guide ink is shared to social media?

  • February 5, 2018
  • 25 replies
  • 0 views
A

Hi, 
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 
Ana

    This topic has been closed for replies.

    25 replies

    J
    • Jessie17
    • February 9, 2018

    Hi Ana!

    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!\

    P
    • Piotr21
    • February 10, 2018

    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">

    Nicole17
    • Nicole17
    • February 13, 2018

    Hey Ana - 

    Where are you sharing links to that you're seeing this? 

    A
    • Ana17
    • Author
    • February 14, 2018

     

    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

    J
    • Jessie17
    • February 16, 2018

    Hi Ana!

    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.

    Clayton11
    • Clayton11
    • February 19, 2018

    Hey Jessie,

    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/. 

    J
    • Jessie17
    • February 21, 2018

    Hey Clayton!

    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. 

    C
    • Cale11
    • February 28, 2018

    I'm having the same issue as Clayton. I'd like to be able to use a non-logo image as the image when sharing articles. I'd be grateful for any Javascript/jQuery workaround too.

    J
    • Jessie17
    • March 7, 2018

    Hey Cale! 

    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!

    C
    • Cale11
    • March 9, 2018

    Hi Jessie!

    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):

    Link image:

    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!

    Cheers,
    Cale

    J
    • Jessie17
    • March 13, 2018

    Hey Clayton!

    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!

    K
    • Kevin86
    • March 19, 2018

    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.

    J
    • Jessie17
    • March 23, 2018

    Thanks for sharing, Kevin!

    C
    • Cale11
    • March 28, 2018

    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
    • Ivan42
    • July 26, 2018

    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 

    Nicole17
    • Nicole17
    • July 26, 2018

    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! 

    K
    • Karkka
    • July 27, 2018

    @Ivan,

    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.

    https://developers.facebook.com/tools/debug/sharing/ 

    Let me know if any questions.

    Best,

    Coco

    I
    • Ivan42
    • July 30, 2018

    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?

    Thanks again,
    Ivan

    K
    • Karkka
    • August 2, 2018

    Hi Ivan,

    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.

    Best,

    Coco

    N
    • Nikita15
    • September 10, 2018

    @Coco,

    Hi! I tried your code at my theme but zendesk still using brand logo as og:image. Maybe I'm doing smthg wrong?

    S
    • Shirin12
    • October 31, 2018

    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?

    I
    • Ivan42
    • April 19, 2019

    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.

    C
    • Cale11
    • April 19, 2019

    +1.

    I cringe when someone shares one of our articles on Facebook.

    D
    • Dan89
    • April 25, 2019

    +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.

    Brett13
    • Brett13
    • Community Manager
    • April 25, 2019

    Hi everyone!

    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 :) 

    Terms & ConditionsCookie settingsAccessibility statement