Skip to content

Display tweets in widget [NodeBB]

Solved Customisation
29 2 12.6k 1
  • @jac I haven’t done anything with this since we last briefly discussed it. When you say “tweets” are you referring to content directly from Twitter ?

    wrote on last edited by
    #16

    @phenomlab I am indeed mate, so for example the ‘Stockport County’ category content would display a widget that shows the club’s official tweets or Twitter profile. May not be possible but would definitely be good if it could be pulled off. It’s just whether this sort of thing would impact load times etc.

  • JAC JAC

    @phenomlab I am indeed mate, so for example the ‘Stockport County’ category content would display a widget that shows the club’s official tweets or Twitter profile. May not be possible but would definitely be good if it could be pulled off. It’s just whether this sort of thing would impact load times etc.

    wrote on last edited by phenomlab
    #17

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

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

    wrote on last edited by
    #18

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

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

    wrote on last edited by
    #19

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

    wrote on last edited by
    #20

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

  • JAC JAC

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

    wrote on last edited by
    #21

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

  • JAC JAC

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

    wrote on last edited by
    #22

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

    wrote on last edited by
    #23

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

  • wrote on last edited by phenomlab
    #24

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

    @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>
    
    wrote on last edited by phenomlab
    #25

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

    @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>
    
    wrote on last edited by phenomlab
    #26

    @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

    wrote on last edited by
    #27

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

  • JAC JAC

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

    wrote on last edited by
    #28

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

    wrote on last edited by
    #29

    @phenomlab brilliant, many thanks Mark 😁

  • phenomlab 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
  • who is read NodeBB

    Customisation read post nodebb
    6
    0 Votes
    6 Posts
    3k Views
    phenomlab
    @cagatay You should ask in the NodeBB forums. Perhaps reference this post https://discuss.flarum.org/d/23066-who-read
  • [NODEBB] Stats

    Unsolved Customisation plugin stats script
    20
    1
    2 Votes
    20 Posts
    6k Views
    JAC
    @phenomlab said in [NODEBB] Stats: @jac or I land up fixing it I wouldn’t put it past you
  • [NODEBB] Welcome Message

    Solved Customisation css html nodebb
    20
    2
    13 Votes
    20 Posts
    9k Views
    phenomlab
    @DownPW the ‘js’ code for the banner takes the time from the client, so what it displays really depends on the regional settings for the operating system. I’ve not seen this issue myself but would like to see some examples of screenshots if possible.
  • NodeBB Footer

    Solved Customisation footer nodebb
    10
    1 Votes
    10 Posts
    4k Views
    JAC
    @phenomlab said in NodeBB Footer: @jac and you. Hope all is well and you recover quickly Thanks pal
  • [NodeBB] username cards

    Solved Customisation nodebb
    8
    5 Votes
    8 Posts
    3k Views
    Sampo2910
    @phenomlab Aha…nice to know. As always thank you for the reply and information.
  • Social icon (Nodebb)

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

    Locked Customisation nodebb
    3
    0 Votes
    3 Posts
    3k Views
    phenomlab
    Closing this thread as a duplicate of https://sudonix.com/topic/12/nodebb-customisation
  • NodeBB customisation

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