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

    Custom html in nodebb to prevent cache

    Unsolved Configure
    18
    2 Votes
    18 Posts
    462 Views
    phenomlabundefined

    @Panda You’ll need to do that with js. With some quick CSS changes, it looks like this

    d619844f-fbfe-4cf1-a283-6b7364f6bf18-image.png

    The colour choice is still really hard on the eye, but at least you can now read the text

  • Pandaundefined

    Difficult to move posts now, on mobile.

    Bugs
    16
    5 Votes
    16 Posts
    419 Views
    phenomlabundefined

    @DownPW Yes, it is. It’s set far too low meaning other elements with a higher preference will sit over the top of it.

  • Pandaundefined

    adding some console.log to Nodebb

    Solved Customisation
    4
    1 Votes
    4 Posts
    477 Views
    phenomlabundefined

    @eeeee if you’re using the console, you could try

    node app.js > app.log 2>&1

    This would redirect stdout to a file named app.log and redirect stderr to stdout.

    I’m not sure about standard logging under NodeBB, but there is an error log located at logs/error.log.

    Failing that, you could always stop the NodeBB service then use ./nodebb dev from the console which would then provide debug output.

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

  • crazycellsundefined

    ineffecient use of space on mobile

    Solved Customisation
    10
    7 Votes
    10 Posts
    543 Views
    crazycellsundefined

    @phenomlab Thanks 🙏

  • DownPWundefined

    [NodeBB] Welcome Message with logo footer change

    Solved Customisation
    9
    5 Votes
    9 Posts
    2k Views
    DownPWundefined

    @phenomlab

    Very very great Mark 😉
    Thanks again, It’s perfect now !

    –> I share my code that I modified.

    I’ve added French and English comments.
    If you see things to change Mark, don’t hesitate.

    As usual, all the access paths (FA icons, logo) will have to be modified according to your architecture.

    You can also very well add/remove time slots and change welcome messages to suit your needs.

    Widgets ACP/HTML Widget Footer Logo <center> <br><br> <img id="thislogo" src="path/to/my/image"> </center> Widget Welcome Message <!-- IF loggedIn --> <div class="getUsername">, <a href="/me"><span class="username"></span></a></div> <!-- ENDIF loggedIn --> CSS

    – I added the size font-weight: 900; in the CSS because otherwise some FA icon wasn’t displayed correctly and reduce margin :

    i#thisicon { font-family: "Font Awesome 5 Free"; font-style: normal; margin-right: 8px; font-weight: 900; } .getUsername { padding-top: 20px; text-align: right; } /*Smartphone*/ /*On désactive le message de bienvenue"*/ /*We disable the welcome message"*/ @media all and (max-width: 1024px) { .getUsername { display: none; } } JAVASCRIPT // ------------------------------------------ // Welcome Message avec icône et Footer logo // Welcome Message with icon and Footer logo // ------------------------------------------ $(window).on('action:ajaxify.end', function (data) { //On récupère le username dans le DOM et on l'affiche //We retrieve the username from the DOM and display it function updateUsername() { $('.getUsername .username').text(app.user.username); } if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', updateUsername); } else { updateUsername(); } //On déclare les variables principales (themessage & thehours) ainsi que les variables secondaires correspondants aux plages horaires //We declare the main variables (themessage & thehours) as well as the secondary variables corresponding to the time slots var thehours = new Date().getHours(); var themessage; var wakeup = ('Good day'); var morning = ('Good morning'); var lunch = ('Bon appétit'); var afternoon = ('Good afternoon'); var drink = ('Cheers'); var evening = ('Good evening'); var night = ('Good night'); var welcome = ('Welcome'); var matched = false; //On peux ici tester le résultat du code en spécifiant une heure (!!!IMPORTANT: Commenter une fois le script testé!!!) //Here we can test the result of the code by specifying a time (!!!IMPORTANT: Comment once the script has been tested!!!) //thehours = 20 //On déclare les plages horaires avec les icones FA et les logos //We declare the time slots with FA icons and logos path if (thehours >= 0 && thehours < 6) { themessage = night; theicon = "fa-solid fa-moon"; thelogo = "/assets/customlogo/XXX.png"; } else if (thehours >= 6 && thehours < 8) { themessage = wakeup; theicon = "fa-solid fa-mug-hot"; thelogo = "/assets/customlogo/XXX.png"; } else if (thehours >= 8 && thehours < 12) { themessage = morning; theicon = "fa-solid fa-sun"; thelogo = "/assets/customlogo/XXX.png"; } else if (thehours >= 12 && thehours < 13) { themessage = lunch; theicon = "fas fa-hamburger"; thelogo = "/assets/customlogo/XXX.png"; } else if (thehours >= 13 && thehours < 16) { themessage = afternoon; theicon = "fa-solid fa-sun"; thelogo = "/assets/customlogo/XXX.png"; } else if (thehours >= 16 && thehours < 18) { themessage = welcome; theicon = "fa-solid fa-rocket"; thelogo = "/assets/customlogo/XXX.png"; } else if (thehours >= 18 && thehours < 19) { themessage = drink; theicon = "fa-solid fa-wine-glass"; thelogo = "/assets/customlogo/XXX.png"; } else if (thehours >= 19 && thehours < 20) { themessage = lunch; theicon = "fas fa-pizza-slice"; thelogo = "/assets/customlogo/XXX.png"; } else if (thehours >= 20 && thehours < 24) { themessage = evening; theicon = "fa-solid fa-tv"; thelogo = "/assets/customlogo/XXX.png"; } // Si la page active est un topic, on désactive/cache le message de bienvenue // If the active page is a topic, we deactivate/hide the welcome message if (window.location.href.indexOf("topic") > -1) { console.log("This is a topic, so hide the user welcome message"); $('#thisuser').hide(); } // Sinon, on affiche le message en fonction, l'icone FA et son emplacement (prepend) // Otherwise, we display the message in function, the FA icon and its location (prepend) else { $('.getUsername').prepend("<i id='thisicon' class='" + theicon + "'></i>" + themessage); $("#thislogo").attr("src", thelogo); //$('.getUsername').prepend("<img id='thisicon' src='" + thelogo + "'></>" + themessage); } });
  • DownPWundefined

    [NODEBB] Help for my custom CSS

    Solved Customisation
    193
    38 Votes
    193 Posts
    30k Views
    DownPWundefined

    OMG make sense

    Thanks dude 🙂

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