• Home
  • Categories
  • Recent
  • Popular
  • Top
  • Tags
  • Users
  • Groups
  • Documentation
    • Home
    • Read API
    • Write API
    • Plugin Development
Skins
  • Light
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse
v3.5.2 Latest
Buy Hosting

Converting a topic into twitter timeline

Scheduled Pinned Locked Moved Tutorials
nodebbtwitterwidgets
1 Posts 1 Posters 1.3k Views
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • barisB Offline
    barisB Offline
    <baris> NodeBB
    wrote on last edited by baris
    #1

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

    0_1510068225857_81b76a4a-720a-47d4-b7b0-b9e671e52dd8-image.png

    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

    1 Reply Last reply
    1

Copyright © 2023 NodeBB | Contributors
  • Login

  • Don't have an account? Register

  • Login or register to search.
Powered by NodeBB Contributors
  • First post
    Last post
0
  • Home
  • Categories
  • Recent
  • Popular
  • Top
  • Tags
  • Users
  • Groups
  • Documentation
    • Home
    • Read API
    • Write API
    • Plugin Development