Skip to content
Sudonix

Social icon (Nodebb)

Solved Customisation
  • JACundefined

    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

    0
  • phenomlabundefined

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

    Author of OGProxy, Swatch, Threaded, Card, and most of Sudonix's bugs…

    0
  • JACundefined

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

    0
  • JACundefined JAC referenced this topic on
  • phenomlabundefined

    @jac In addition, see this

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

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

    Author of OGProxy, Swatch, Threaded, Card, and most of Sudonix's bugs…

    0
  • JACundefined

    @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 😁😁

    0
  • phenomlabundefined

    @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

    Author of OGProxy, Swatch, Threaded, Card, and most of Sudonix's bugs…

    0
  • JACundefined

    @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 🙂

    0
  • phenomlabundefined phenomlab has marked this topic as solved on

Did this solution help you?
Did you find the suggested solution useful? Why not buy me a coffee? It's a nice gesture, and a great way to show your appreciation 💗

  • Pandaundefined

    Nodebb icon on google page

    Solved Customisation
    9
    4 Votes
    9 Posts
    599 Views
    phenomlabundefined

    @Panda It’s been raised multiple times, but only for the open source version, and not hosted.

  • Pandaundefined

    What is this bar called?

    Solved Customisation
    92
    36 Votes
    92 Posts
    7k Views
    DownPWundefined

    This is good 👍

  • Pandaundefined

    build nodebb Warning in entrypoint size limit

    Solved Performance
    2
    0 Votes
    2 Posts
    156 Views
    phenomlabundefined

    @eeeee they are nothing to worry about, and can be ignored.

  • DownPWundefined

    NODEBB: Nginx error performance & High CPU

    Solved Performance
    69
    14 Votes
    69 Posts
    5k Views
    DownPWundefined

    @phenomlab

    Seems to be better with some scaling fix for redis on redis.conf. I haven’t seen the message yet since the changes I made

    # I increase it to the value of /proc/sys/net/core/somaxconn tcp-backlog 4096 # I'm uncommenting because it can slow down Redis. Uncommented by default !!!!!!!!!!!!!!!!!!! #save 900 1 #save 300 10 #save 60 10000

    If you have other Redis optimizations. I take all your advice

    https://severalnines.com/blog/performance-tuning-redis/

  • Pandaundefined

    Title on homepage of nodebb forum

    Solved Customisation
    2
    1 Votes
    2 Posts
    612 Views
    phenomlabundefined

    @eveh Welcome board 🙂

    The code you are referring to is custom written as no such functionality exists under NodeBB. However, adding the functionality is relatively trivial. Below are the required steps

    Navigate to /admin/appearance/customise#custom-header Add the below code to your header, and save once completed <ol id="mainbanner" class="breadcrumb"><li id="addtext">Your Title Goes Here</li></ol> Navigate to /admin/appearance/customise#custom-js and add the below code, then save $(document).ready(function() { $(window).on('action:ajaxify.end', function(data) { // Initialise mainbanner ID, but hide it from view $('#mainbanner').hide(); var pathname = window.location.pathname; if (pathname === "/") { $("#addtext").text("Your Title"); $('#mainbanner').show(); } else {} // If we want to add a title to a sub page, uncomment the below and adjust accordingly //if (pathname === "/yourpath") { //$("#addtext").text("Your Title"); //$('#mainbanner').show(); //} }); }); Navigate to /admin/appearance/customise#custom-css and add the below CSS block .breadcrumb { right: 0; margin-right: auto; text-align: center; background: #0086c4; color: #ffffff; width: 100vw; position: relative; margin-left: -50vw; left: 50%; top: 50px; position: fixed; z-index: 1020; }

    Note, that you will need to adjust your CSS code to suit your own site / requirements.

  • marusakyundefined

    NodeBB changing color of the text

    Solved Customisation
    7
    2 Votes
    7 Posts
    762 Views
    marusakyundefined

    @phenomlab said in NodeBB changing color of the text:

    @marusaky This ought to to it

    a.permalink, a.permalink:active, a.permalink:focus, a.permalink:hover { color: #ffffff; }

    works great, thanks a lot

  • DownPWundefined

    [NODEBB] Reply Button/arrow answer

    Solved Customisation
    25
    4 Votes
    25 Posts
    2k Views
    DownPWundefined

    Topic open
    https://sudonix.com/topic/207/nodebb-help-for-my-custom-css

  • RiekMediaundefined

    NodeBB Design help

    Solved Customisation
    8
    2 Votes
    8 Posts
    830 Views
    phenomlabundefined

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