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

    www. Infront stops website access?

    Solved Configure
    10
    1 Votes
    10 Posts
    294 Views
    phenomlabundefined

    @Panda because there is no match for the DNS entry specified. The receiving web server parses the headers looking for a destination hostname to match, and anything the web server is unable to resolve will be sent back to the root.

  • Pandaundefined

    Email validation NodeBB

    Bugs
    21
    3 Votes
    21 Posts
    874 Views
    phenomlabundefined

    @Panda said in Email validation NodeBB:

    Did you configure that as a custom change to the usual quote icon. How do you do that?
    I notice on NodeBB site its a solid blue quotes

    Yes, I changed it. NodeBB by default users the free font awesome library whereas I use the pro (paid) version SDK have access to a wider set of icons, and at different thicknesses etc. The change of colour is just simple CSS.

  • 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); } });
  • crazycellsundefined

    creating topic specific widgets

    Solved Customisation
    16
    10 Votes
    16 Posts
    807 Views
    phenomlabundefined

    @crazycells said in creating topic specific widgets:

    Additionally if hide class exists, why are we re-defining it?

    We’re not 🤭 I misspelled it - it should be hidden

  • RiekMediaundefined

    NodeBB vs Discourse

    Chitchat
    25
    6 Votes
    25 Posts
    2k Views
    RiekMediaundefined

    @phenomlab said in NodeBB vs Discourse:

    Hetzner eh ? I use them also. In fact, Sudonix is hosted in Nuremberg 👍

    yes i’m also at hetzner, i have been a customer there for years with a reseller account for domains. My VPS that I host there are also in Nuremberg 🙂

  • RiekMediaundefined

    nodebb-plugin-customize error

    Solved Customisation
    25
    2 Votes
    25 Posts
    2k Views
    RiekMediaundefined

    @phenomlab it work, thanks 🙂

  • JACundefined

    [NodeBB] Creating new user to auto post content

    Solved Customisation
    3
    0 Votes
    3 Posts
    682 Views
    JACundefined

    @phenomlab many thanks Mark 😁.

  • JACundefined

    WordPress & NodeBB

    Solved WordPress
    6
    0 Votes
    6 Posts
    521 Views
    phenomlabundefined

    @jac That won’t matter. You just redirect at nginx or apache level and it’ll work. The generally accepted standard though is to use a subdomain.