Converting a topic into twitter timeline

[baris]

This is a simple widget tutorial to turn a topic into a twitter timeline. The end result will look like this.

First create a topic that will be the home of the twitter widget and record its topic id.

Now go to /admin/extend/widgets and place a html widget on topic.tpl/header. The standard twitter timeline widget code only works on cold loads so we have to modify it for NodeBB. You can generate the twitter widget at https://twitter.com/settings/widgets, after you copy that code you have to replace the <script> block with the one provided below.

<script>
 !function(d,s,id){
    var js,p=/^http:/.test(d.location)?'http':'https';
    var el = d.getElementById(id);
    if (el) {
        el.parentNode.removeChild(el);
    }
	
    if (!d.getElementById(id)) {
         js = d.createElement(s);
         js.id = id;
         js.src = p + "://platform.twitter.com/widgets.js";
         var fjs = d.getElementsByTagName(s)[0];
         fjs.parentNode.insertBefore(js,fjs);
    } 
}(document,"script","twitter-wjs");
</script>

Here is the full widget code for NodeBB's twitter timeline. You can copy paste it into your HTML widget and replace every <topic_id> with your own topic id.

<style>
.page-topic-<topic_id> .topic {
  display: none;
}
.page-topic .twitter-timeline {
   display: none !important;
   width: 100% !important; 
   height: 800px !important;
}
.page-topic-<topic_id> .twitter-timeline {
    display: block !important;
}
</style>
<a class="twitter-timeline"  href="https://twitter.com/NodeBB" data-widget-id="433016924318883841">Tweets by @NodeBB</a>
<script>
 !function(d,s,id){
    var js,p=/^http:/.test(d.location)?'http':'https';
    var el = d.getElementById(id);
    if (el) {
        el.parentNode.removeChild(el);
    }
	
    if (!d.getElementById(id)) {
         js = d.createElement(s);
         js.id = id;
         js.src = p + "://platform.twitter.com/widgets.js";
         var fjs = d.getElementsByTagName(s)[0];
         fjs.parentNode.insertBefore(js,fjs);
    } 
}(document,"script","twitter-wjs");
</script>

Once you have the widget, you can customize it with data attributes, for more info you can read https://dev.twitter.com/web/embedded-timelines