Skip to content

Social icon (Nodebb)

Solved Customisation
7 2 3.0k 1
  • wrote on last edited by
    #1

    Hi Mark,

    This title may not be relevant so feel free to change it.

    I’m looking to add an image so when I post to social profiles etc it displays an image instead of the NodeBB logo.

    How do I achieve this?

    Many thanks

  • JAC JAC

    Hi Mark,

    This title may not be relevant so feel free to change it.

    I’m looking to add an image so when I post to social profiles etc it displays an image instead of the NodeBB logo.

    How do I achieve this?

    Many thanks

    wrote on last edited by phenomlab
    #2

    @jac Good question. I raised something similar on the NodeBB community

    https://community.nodebb.org/topic/15650/default-image-when-sharing-topics-posts

    but, I never got a response 😠 - however, there is an OG image (Open Graph) which you can apply at

    /admin/settings/general

    Which (I think) should give you a default image (which you of course specify by uploading) for sharing on social media.

    EDIT - on checking, this does indeed work. Once the image is applied, the Open Graph tags are present in each post - see below

    <meta property="og:title" content="Social icon (Nodebb)" />
    <meta property="og:description" content="@jac Good question. I raised something similar on the NodeBB community   	  	 		 			  				 					                                                          May 11  /  Technical Support                                                                         ..." />
    <meta property="og:type" content="article" />
    <meta property="article:published_time" content="2021-12-04T16:58:18.479Z" />
    <meta property="article:modified_time" content="2021-12-04T17:28:05.608Z" />
    <meta property="article:section" content="Customisation" />
    <meta property="og:image" content="https://sudonix.com/assets/uploads/profile/1-profileavatar-1629822570834.png" />
    <meta property="og:image:url" content="https://sudonix.com/assets/uploads/profile/1-profileavatar-1629822570834.png" />
    <meta property="og:image" content="https://sudonix.com/assets/uploads/system/og-image.png" />
    <meta property="og:image:url" content="https://sudonix.com/assets/uploads/system/og-image.png" />
    <meta property="og:image:width" content="1900" />
    <meta property="og:image:height" content="950" />
    <meta property="og:url" content="https://sudonix.com/topic/162/social-icon-nodebb/2" />
    
  • @jac Good question. I raised something similar on the NodeBB community

    https://community.nodebb.org/topic/15650/default-image-when-sharing-topics-posts

    but, I never got a response 😠 - however, there is an OG image (Open Graph) which you can apply at

    /admin/settings/general

    Which (I think) should give you a default image (which you of course specify by uploading) for sharing on social media.

    EDIT - on checking, this does indeed work. Once the image is applied, the Open Graph tags are present in each post - see below

    <meta property="og:title" content="Social icon (Nodebb)" />
    <meta property="og:description" content="@jac Good question. I raised something similar on the NodeBB community   	  	 		 			  				 					                                                          May 11  /  Technical Support                                                                         ..." />
    <meta property="og:type" content="article" />
    <meta property="article:published_time" content="2021-12-04T16:58:18.479Z" />
    <meta property="article:modified_time" content="2021-12-04T17:28:05.608Z" />
    <meta property="article:section" content="Customisation" />
    <meta property="og:image" content="https://sudonix.com/assets/uploads/profile/1-profileavatar-1629822570834.png" />
    <meta property="og:image:url" content="https://sudonix.com/assets/uploads/profile/1-profileavatar-1629822570834.png" />
    <meta property="og:image" content="https://sudonix.com/assets/uploads/system/og-image.png" />
    <meta property="og:image:url" content="https://sudonix.com/assets/uploads/system/og-image.png" />
    <meta property="og:image:width" content="1900" />
    <meta property="og:image:height" content="950" />
    <meta property="og:url" content="https://sudonix.com/topic/162/social-icon-nodebb/2" />
    
    wrote on last edited by
    #3

    @phenomlab said in Social icon (Nodebb):

    @jac Good question. I raised something similar on the NodeBB community

    https://community.nodebb.org/topic/15650/default-image-when-sharing-topics-posts

    but, I never got a response 😠 - however, there is an OG image (Open Graph) which you can apply at

    /admin/settings/general

    Which (I think) should give you a default image (which you of course specify by uploading) for sharing on social media.

    EDIT - on checking, this does indeed work. Once the image is applied, the Open Graph tags are present in each post - see below

    <meta property="og:title" content="Social icon (Nodebb)" />
    <meta property="og:description" content="@jac Good question. I raised something similar on the NodeBB community   	  	 		 			  				 					                                                          May 11  /  Technical Support                                                                         ..." />
    <meta property="og:type" content="article" />
    <meta property="article:published_time" content="2021-12-04T16:58:18.479Z" />
    <meta property="article:modified_time" content="2021-12-04T17:28:05.608Z" />
    <meta property="article:section" content="Customisation" />
    <meta property="og:image" content="https://sudonix.com/assets/uploads/profile/1-profileavatar-1629822570834.png" />
    <meta property="og:image:url" content="https://sudonix.com/assets/uploads/profile/1-profileavatar-1629822570834.png" />
    <meta property="og:image" content="https://sudonix.com/assets/uploads/system/og-image.png" />
    <meta property="og:image:url" content="https://sudonix.com/assets/uploads/system/og-image.png" />
    <meta property="og:image:width" content="1900" />
    <meta property="og:image:height" content="950" />
    <meta property="og:url" content="https://sudonix.com/topic/162/social-icon-nodebb/2" />
    

    Thanks very much mate, I’ll try this tomorrow.

  • JAC JAC referenced this topic on
  • JAC JAC

    @phenomlab said in Social icon (Nodebb):

    @jac Good question. I raised something similar on the NodeBB community

    https://community.nodebb.org/topic/15650/default-image-when-sharing-topics-posts

    but, I never got a response 😠 - however, there is an OG image (Open Graph) which you can apply at

    /admin/settings/general

    Which (I think) should give you a default image (which you of course specify by uploading) for sharing on social media.

    EDIT - on checking, this does indeed work. Once the image is applied, the Open Graph tags are present in each post - see below

    <meta property="og:title" content="Social icon (Nodebb)" />
    <meta property="og:description" content="@jac Good question. I raised something similar on the NodeBB community   	  	 		 			  				 					                                                          May 11  /  Technical Support                                                                         ..." />
    <meta property="og:type" content="article" />
    <meta property="article:published_time" content="2021-12-04T16:58:18.479Z" />
    <meta property="article:modified_time" content="2021-12-04T17:28:05.608Z" />
    <meta property="article:section" content="Customisation" />
    <meta property="og:image" content="https://sudonix.com/assets/uploads/profile/1-profileavatar-1629822570834.png" />
    <meta property="og:image:url" content="https://sudonix.com/assets/uploads/profile/1-profileavatar-1629822570834.png" />
    <meta property="og:image" content="https://sudonix.com/assets/uploads/system/og-image.png" />
    <meta property="og:image:url" content="https://sudonix.com/assets/uploads/system/og-image.png" />
    <meta property="og:image:width" content="1900" />
    <meta property="og:image:height" content="950" />
    <meta property="og:url" content="https://sudonix.com/topic/162/social-icon-nodebb/2" />
    

    Thanks very much mate, I’ll try this tomorrow.

    wrote on last edited by phenomlab
    #4
  • wrote on last edited by
    #5

    @phenomlab said in Social icon (Nodebb):

    @jac In addition, see this

    https://community.nodebb.org/post/86245

    73027e22-1ffa-42a9-8271-54a5c50f599a-image.png

    That’s a good shout mate 😁😁

  • JAC JAC

    @phenomlab said in Social icon (Nodebb):

    @jac In addition, see this

    https://community.nodebb.org/post/86245

    73027e22-1ffa-42a9-8271-54a5c50f599a-image.png

    That’s a good shout mate 😁😁

    wrote on last edited by
    #6

    @jac I just tested my theory around using the OG image, and according to the Twitter card validator, it works fine

    73e805e1-997b-41bf-9259-51c5052ca8fc-image.png

  • @jac I just tested my theory around using the OG image, and according to the Twitter card validator, it works fine

    73e805e1-997b-41bf-9259-51c5052ca8fc-image.png

    wrote on last edited by
    #7

    @phenomlab said in Social icon (Nodebb):

    @jac I just tested my theory around using the OG image, and according to the Twitter card validator, it works fine

    73e805e1-997b-41bf-9259-51c5052ca8fc-image.png

    fixed 🙂

  • phenomlab phenomlab has marked this topic as solved on

Did this solution help you?
Did you find the suggested solution useful? Support 💗 Sudonix with a coffee ☕
If your organisation needs deeper expertise around infrastructure, security, or technology leadership, learn more about Phenomlab Ltd. Many of the deeper technical guides behind Sudonix are published there.

Related Topics
  • Custom Page - nodebb

    Solved Customisation custom-pages nodebb
    13
    2
    5 Votes
    13 Posts
    3k Views
    DownPW
    I’m happy to see this
  • Nodebb and emails

    Solved Configure nodebb
    27
    5 Votes
    27 Posts
    11k Views
    phenomlab
    @Panda it will use SMTP. In all cases, I never use any plugin to send email. I’ll always send it raw.
  • CSS code customization for the link preview plugin

    Solved Customisation css nodebb
    6
    2
    3 Votes
    6 Posts
    3k Views
    phenomlab
    @kadir-ay-0 marking as resolved based on https://community.nodebb.org/topic/17109/manual-build-a-night-mode-for-harmony/5 Please do not raise requests in two places - here and the NodeBB forums. All this does is create unnecessary load for both parties.
  • CSS codes to prevent votes to disappear

    Solved Customisation nodebb
    3
    1 Votes
    3 Posts
    1k Views
    crazycells
    @phenomlab yes, it is thanks a lot…
  • Link vs Refresh

    Solved Customisation nodebb blog customization
    20
    2
    8 Votes
    20 Posts
    7k Views
    phenomlab
    @pobojmoks Do you see any errors being reported in the console ? At first guess (without seeing the actual code or the site itself), I’d say that this is AJAX callback related
  • Dark Theme Upper Padding

    Solved Customisation nodebb
    7
    1
    6 Votes
    7 Posts
    2k Views
    crazycells
    @DownPW great! thanks a lot… this code solves my problem.
  • NodeBB Discord Plugins

    Unsolved Customisation nodebb discord plugin
    7
    0 Votes
    7 Posts
    4k Views
    phenomlab
    @RiekMedia hi. Just following up on this thread (I know it’s old) but was curious to understand if it’s still an issue or not ?
  • NodeBB Design help

    Solved Customisation
    8
    3
    2 Votes
    8 Posts
    4k Views
    phenomlab
    @riekmedia I’ve applied some new CSS to your site. Can you reload the page and try again ? For the record, this is what I added #footer { background: #2d343e; border-top: 4px solid #2d343e; font-size: 0.9em; margin-top: 70px; padding: 80px 0 0; position: relative; clear: both; bottom: 0; left: 0; right: 0; z-index: 1000; margin-left: -15px; margin-right: -338px; } The /categories page seems a bit messed up, so looking at that currently EDIT - issued some override CSS in the CATEGORIES widget <!--- CSS fix for overspill on /categories page - DO NOT DELETE --> <style> #footer { margin-right: -45px; } </style> That should resolve the /categories issue.