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 💗

  • DownPWundefined

    NodeBB socket with CloudFlare

    Unsolved Performance
    23
    1 Votes
    23 Posts
    1k Views
    phenomlabundefined

    @DownPW it’s your only realistic option at this stage.

  • phenomlabundefined

    Unable to change icon in NodeBB navigation

    Tips
    1
    1 Votes
    1 Posts
    107 Views
    No one has replied
  • Pandaundefined

    Difficult to move posts now, on mobile.

    Bugs
    16
    5 Votes
    16 Posts
    403 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.

  • cagatayundefined

    Gettin Erors NodeBB

    Solved Configure
    7
    0 Votes
    7 Posts
    325 Views
    cagatayundefined

    @phenomlab no forum is working goods.
    there is no eror message since yestarday.

  • cagatayundefined

    Podcast Share NodeBB

    Solved Configure
    15
    4 Votes
    15 Posts
    481 Views
    phenomlabundefined

    @cagatay You could experiment with nodebb-plugin-ns-embed but I expect the x-origin tag on the remote site to prevent playback.

  • cagatayundefined

    How to downgrade plugin version on NodeBB

    Solved Customisation
    11
    3 Votes
    11 Posts
    703 Views
    phenomlabundefined

    @cagatay no problems

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

    RSS parser script [NodeBB]

    Customisation
    47
    9 Votes
    47 Posts
    4k Views
    JACundefined

    @phenomlab said in RSS parser script [NodeBB]:

    @jac Not yet. Sorry. Have some other work commitments I need to prioritise. Hoping to get to this over the weekend.

    No worries at all mate, thanks 👍🏻