Community

Twitter Embed Solution Possible? - ns-embed & embed plugins

NodeBB Plugins

Suggested Topics

  • daftcyborgD

    How to configure Recent Cards plugin?

    NodeBB Plugins
    0 Votes
    3 Posts
    263 Views

    gotwfG

    @daftcyborg I have my stuff set up as you describe. Had to fiddle w/it a bit to limit as you desire. Posted up a reply to someone inquiring similarly some months back but ... forget now how I did it. Maybe make a search addin my username?

    Ah, here ya' go:

    https://community.nodebb.org/topic/14870/bug-in-recent-cards-plugin?_=1613979515333

    Scroll down to the ACP screenshot I posted.

    That was on 12.x. Unsure about current.

    Have fun. o/

  • barisB

    Converting a topic into twitter timeline

    Tutorials
    1 Votes
    1 Posts
    1146 Views

    barisB

    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

  • Christoffer LernöC

    The proper way to deploy a custom plugin

    NodeBB Plugins
    0 Votes
    5 Posts
    1398 Views

    yariplusY

    Symbolic links are absolutely fine. It's the way I do all my plugins. NPM can even manage links for you using npm link

  • Bruce LeeB

    Creating widget containing React component, possible?

    NodeBB Plugins
    2 Votes
    2 Posts
    1138 Views

    B

    I'm interested too!

  • charlesC

    Google Drive For Image Embed

    General Discussion
    0 Votes
    4 Posts
    2474 Views

    X

    I thought Google Drive was geared towards personal usage and sharing? Can't see this being good for public use.

| | | |
Copyright © 2023 NodeBB | Contributors