Skip to content

Social icon (Nodebb)

Solved Customisation
  • 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 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" />
    
  • @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.

  • JACundefined JAC referenced this topic on
  • @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 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

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

  • 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 💗

  • 5 Votes
    4 Posts
    483 Views

    @DownPW thanks. I forgot about that.

  • Composer options on nodebb

    Solved Configure
    8
    3 Votes
    8 Posts
    289 Views

    @Panda You should be able to expose the CSS for these using F12 to get into console

    3591518c-e3a3-4ada-a43c-6b32a5e0359c-image.png

    a2b8ed46-4157-4ff2-85f0-576543380107-image.png

    That should then expose the element once selected

    89d9c545-a47a-40d1-98f4-80cf3b958e8f-image.png

    Here’s the below CSS you need based on the screenshot provided.

    .composer .formatting-bar .formatting-group li[data-format="picture-o"], .composer .formatting-bar .formatting-group li[data-format="spoiler"] { display: none; }
  • NodeBB v3 Vote Icon

    Solved Customisation
    9
    2 Votes
    9 Posts
    448 Views

    @phenomlab forget it, look likes good with your codes.

  • restarting nodebb on boot

    Unsolved Configure
    3
    1 Votes
    3 Posts
    219 Views

    @eeeee said in restarting nodebb on boot:

    can I just run nodebb under nodemon for auto restarts?

    It’s a better method. Nodemon just looks for file system changes and would effectively die if the server was rebooted meaning you’d have to start it again anyway. Systemd is the defacto standard which is how the operating system interacts in terms of services, scheduled tasks etc.

  • 0 Votes
    4 Posts
    526 Views

    @cagatay You’d target the body tag and use the below line of CSS

    background: url(/assets/customcss/backgrounds/default/default.png) no-repeat center center fixed;

    Obviously, you need to change the path to suit where your image is being stored.

    More info around the background property can be found here

    https://www.w3schools.com/cssref/css3_pr_background.php

  • 1 Votes
    2 Posts
    611 Views

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

  • 0 Votes
    9 Posts
    804 Views

    @downpw I’m inclined to agree with this. There isn’t much else you can do, and provided it works with no odd looking artefacts in other browsers, then ok. The :before and :after are pseudo classes and very well supported across all browsers (except perhaps Internet Exploder, but who uses that these days ?)

  • NodeBB Design help

    Solved Customisation
    8
    2 Votes
    8 Posts
    829 Views

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