Skip to content

Display tweets in widget [NodeBB]

Solved Customisation
29 2 7.6k 1
  • @phenomlab said in Display tweets in widget [NodeBB]:

    @jac As a quick POC I decided to create a Twitter widget on your Categories page - see below for what it looks like

    6f9f9603-6d23-4a9f-bd8b-36d004dee9de-image.png

    It’s not styled as such yet, but is nothing more than a widget taken from Twitter directly here

    This then gives you the code to place into any widget

    <a class="twitter-timeline" data-height="800" data-dnt="true" data-theme="light" href="https://twitter.com/StockportCounty?ref_src=twsrc%5Etfw">Tweets by StockportCounty</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
    

    The widget code is shown as below

    ad9435df-3b43-4c50-bfee-fba908b8a62d-image.png

    Save the widget, and off you go 🙂

    Clearly, you need to tailor this a little depending on what you actually want to capture, but this is the overall concept.

    Wow, looks phenomenal mate, is there any way to limit the amount of tweets shown at all? And more specifically how can they be displayed on each category?

    @jac said in Display tweets in widget [NodeBB]:

    is there any way to limit the amount of tweets shown at all?

    Yes, but only by adjusting the height of the widget itself (via Twitter) from what I recall seeing.

    And more specifically how can they be displayed on each category?

    That part I’m not so sure of. I’d say I’m 99% certain it’ll be possible, but I haven’t invested any time yet to determine this.

  • @jac said in Display tweets in widget [NodeBB]:

    is there any way to limit the amount of tweets shown at all?

    Yes, but only by adjusting the height of the widget itself (via Twitter) from what I recall seeing.

    And more specifically how can they be displayed on each category?

    That part I’m not so sure of. I’d say I’m 99% certain it’ll be possible, but I haven’t invested any time yet to determine this.

    @phenomlab said in Display tweets in widget [NodeBB]:

    @jac said in Display tweets in widget [NodeBB]:

    is there any way to limit the amount of tweets shown at all?

    Yes, but only by adjusting the height of the widget itself (via Twitter) from what I recall seeing.

    And more specifically how can they be displayed on each category?

    That part I’m not so sure of. I’d say I’m 99% certain it’ll be possible, but I haven’t invested any time yet to determine this.

    Thanks Mark, at least it’s there and can be added on when possible 👍🏻.

  • @phenomlab said in Display tweets in widget [NodeBB]:

    @jac said in Display tweets in widget [NodeBB]:

    is there any way to limit the amount of tweets shown at all?

    Yes, but only by adjusting the height of the widget itself (via Twitter) from what I recall seeing.

    And more specifically how can they be displayed on each category?

    That part I’m not so sure of. I’d say I’m 99% certain it’ll be possible, but I haven’t invested any time yet to determine this.

    Thanks Mark, at least it’s there and can be added on when possible 👍🏻.

    Is this widget something else that can be customised or is it that little more difficult as it’s a twitter feed?

  • Is this widget something else that can be customised or is it that little more difficult as it’s a twitter feed?

    @jac That depends on what you are looking for in terms of customisation. If you are thinking about colours for example, then no.

  • @jac That depends on what you are looking for in terms of customisation. If you are thinking about colours for example, then no.

    @phenomlab thanks for the response mate.

    That was my question yes mate, although I don’t know of any other way it could be customised.

    As I’ve mentioned previously I’m just looking to change little bits here and there mate.

    I was looking for a next / last fixture to add into a widget but the last time I tried it the data massively didn’t fit the widget area.

  • @jac for example league table widget code.

    <div id="fs-standings"></div> 
    <script> (function (w,d,s,o,f,js,fjs) { w['fsStandingsEmbed']=o;w[o] = w[o] || function () { (w[o].q = w[o].q || []).push(arguments) }; js = d.createElement(s), fjs = d.getElementsByTagName(s)[0]; js.id = o; js.src = f; js.async = 1; fjs.parentNode.insertBefore(js, fjs); }(window, document, 'script', 'mw', 'https://cdn.footystats.org/embeds/standings.js')); mw('params', { leagueID: 6088 }); 
    </script>
    
  • @jac for example league table widget code.

    <div id="fs-standings"></div> 
    <script> (function (w,d,s,o,f,js,fjs) { w['fsStandingsEmbed']=o;w[o] = w[o] || function () { (w[o].q = w[o].q || []).push(arguments) }; js = d.createElement(s), fjs = d.getElementsByTagName(s)[0]; js.id = o; js.src = f; js.async = 1; fjs.parentNode.insertBefore(js, fjs); }(window, document, 'script', 'mw', 'https://cdn.footystats.org/embeds/standings.js')); mw('params', { leagueID: 6088 }); 
    </script>
    

    @jac said in Display tweets in widget [NodeBB]:

    @jac for example league table widget code.

    <div id=“fs-standings”></div> <script> (function (w,d,s,o,f,js,fjs) { w[‘fsStandingsEmbed’]=o;w[o] = w[o] || function () { (w[o].q = w[o].q || []).push(arguments) }; js = d.createElement(s), fjs = d.getElementsByTagName(s)[0]; js.id = o; js.src = f; js.async = 1; fjs.parentNode.insertBefore(js, fjs); }(window, document, ‘script’, ‘mw’, ‘https://cdn.footystats.org/embeds/standings.js’)); mw(‘params’, { leagueID: 6088 }); </script>

    Next match…

    <div id="fs-upcoming"></div> 
    <script> (function (w,d,s,o,f,js,fjs) { w['fsUpcomingEmbed']=o;w[o] = w[o] || function () { (w[o].q = w[o].q || []).push(arguments) }; js = d.createElement(s), fjs = d.getElementsByTagName(s)[0]; js.id = o; js.src = f; js.async = 1; fjs.parentNode.insertBefore(js, fjs); }(window, document, 'script', 'fsUpcoming', 'https://cdn.footystats.org/embeds/upcoming.js')); fsUpcoming('params', { teamID: 3143 }); 
    </script>
    
  • @jac said in Display tweets in widget [NodeBB]:

    @jac for example league table widget code.

    <div id=“fs-standings”></div> <script> (function (w,d,s,o,f,js,fjs) { w[‘fsStandingsEmbed’]=o;w[o] = w[o] || function () { (w[o].q = w[o].q || []).push(arguments) }; js = d.createElement(s), fjs = d.getElementsByTagName(s)[0]; js.id = o; js.src = f; js.async = 1; fjs.parentNode.insertBefore(js, fjs); }(window, document, ‘script’, ‘mw’, ‘https://cdn.footystats.org/embeds/standings.js’)); mw(‘params’, { leagueID: 6088 }); </script>

    Next match…

    <div id="fs-upcoming"></div> 
    <script> (function (w,d,s,o,f,js,fjs) { w['fsUpcomingEmbed']=o;w[o] = w[o] || function () { (w[o].q = w[o].q || []).push(arguments) }; js = d.createElement(s), fjs = d.getElementsByTagName(s)[0]; js.id = o; js.src = f; js.async = 1; fjs.parentNode.insertBefore(js, fjs); }(window, document, 'script', 'fsUpcoming', 'https://cdn.footystats.org/embeds/upcoming.js')); fsUpcoming('params', { teamID: 3143 }); 
    </script>
    

    @jac have a look at https://stockportcounty.fans/unread

    I’ve placed these two widgets into the “unread” page

  • @jac have a look at https://stockportcounty.fans/unread

    I’ve placed these two widgets into the “unread” page

    @phenomlab wow! How did you manage that? That’s brilliant!!

  • @phenomlab wow! How did you manage that? That’s brilliant!!

    @jac Very easily done. You just use the HTML widgets and place them where you want 🙂

  • @jac Very easily done. You just use the HTML widgets and place them where you want 🙂

    @phenomlab brilliant, many thanks Mark 😁

  • phenomlabundefined phenomlab has marked this topic as solved on

Did this solution help you?
Did you find the suggested solution useful? Support 💗 Sudonix with a coffee
If your organisation needs deeper expertise around infrastructure, security, or technology leadership, learn more about Phenomlab Ltd. Many of the deeper technical guides behind Sudonix are published there.

Related Topics
  • Whitespace fixes in Nodebb

    Solved Customisation nodebb
    18
    2
    7 Votes
    18 Posts
    3k Views
    @Panda Just circling back here with something of an update (which I think you’ll like). I’ve completely restructured the ranking system. There are now less ranks, with a higher point threshold to reach them. More importantly, if you reload the site, you’ll notice that the ranks are now icons. I also removed the “Author” badge, and made this a single icon, which (to me) looks much better.
  • who is read NodeBB

    Customisation read post nodebb
    6
    0 Votes
    6 Posts
    1k Views
    @cagatay You should ask in the NodeBB forums. Perhaps reference this post https://discuss.flarum.org/d/23066-who-read
  • NodeBB inline videoplayer

    Solved Customisation nodebb
    12
    3 Votes
    12 Posts
    2k Views
    @phenomlab YAY! It works Thanks so much
  • [NodeBB] greeting message

    Solved Customisation css nodebb javascript
    2
    1
    3 Votes
    2 Posts
    1k Views
    @pwsincd welcome to sudonix, and thanks for the comments. What your looking for is here https://sudonix.com/topic/195/nodebb-welcome-message/3?_=1648295651358
  • [NODEBB] Scroll Button

    Solved Customisation css javascript html scroll button
    7
    1
    0 Votes
    7 Posts
    2k Views
    @downpw ooops. Forgot that. Thanks for adding.
  • Social icon (Nodebb)

    Solved Customisation nodebb social
    7
    0 Votes
    7 Posts
    2k Views
    @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 [image: 1638880098289-73e805e1-997b-41bf-9259-51c5052ca8fc-image.png] fixed
  • NodeBB Design help

    Solved Customisation
    8
    3
    2 Votes
    8 Posts
    2k 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.
  • NodeBB customisation

    Locked Customisation
    332
    27 Votes
    332 Posts
    134k Views
    @jac Given your departure away from your previous project, I’m going to close this thread…