Social Stream Ninja: Bring livestream comments into OBS Studio

How do I show LinkedIn Live comments in OBS Studio?
Home » Learn Livestreaming with John Lacey » Social Stream Ninja: Bring livestream comments into OBS Studio

To bring livestream comments into OBS Studio you will need to use the Social Stream Ninja browser extension. If you are hoping to bring in comments from LinkedIn Live specifically you will also need to incorporate the use of Restream.

Download the Social Stream Ninja extension

  1. Go to Social Stream documentation and click on the Social Stream – Overlay link to go to the Github repository.
  2. Click on Jump to Download and Install Instructions.
  3. Download the main.zip file to your computer.
  4. Open the zip file and copy the folder to your computer. Ideally it should be on the same drive as OBS Studio and somewhere you will not accidentally delete it.

Add the Social Stream Ninja extension to Google Chrome

It is possible to use the Social Stream Ninja extension in other browsers but for the purposes of this demonstration I will be using Chrome.

  1. Click on the ellipsis (three dots) menu and go to More Tools and select Extensions.
  2. Make sure the Developer mode is toggled on.
  3. Click the Load unpacked button and find and select the Social Stream folder on your computer, click OK.
  4. Click on the Extensions icon on the toolbar and beside Social Stream Ninja click the pin icon to pin it to your toolbar.

Add Social Stream Ninja to OBS Studio

Add the Social Stream Ninja Streaming Chat dock to OBS Studio

When click on the Social Stream extension icon in your browser you will see a menu of options. The first part relates to dockable Streaming chat and includes a unique URL that you will use to choose comments to feature and/or display the entire chat on screen in OBS.

The URL will look a little bit like this:

https://socialstream.ninja/dock.html?session=
Adding the Social Ninja Chat as a Custom Browser Dock in OBS Studio.

To add this Dock to OBS Studio:

  1. Right-click on the Streaming chat link (in the menu options) and select “Copy link address.”
  2. Go to the Docks menu and select Custom Browser.
  3. Give the dock a name and paste the URL you copied earlier.
  4. Click Apply. The dock will appear. Click ‘Close’ in the Custom Browser docks dialog.
  5. You can now drag this dock into any available space within OBS or let it float where it is.

Add the Featured Chat overlay to OBS Studio

If you scroll down underneath the Streaming chat dockable options, you will see the Featured chat overlay options.

The featured chat overlay URL will look a bit like this:

https://socialstream.ninja/index.html?session=

You can bring this into OBS Studio as a browser source. To do this:

  1. Right-click on the Featured chat overlay link in the extension and select “Copy link address.”
  2. Go to your OBS Studio scene. In the sources dock click the plus (+) sign and select Browser.
  3. Give your chat a meaningful name and click OK.
  4. Paste the copied URL into the URL textbox and click OK.
  5. You can now reposition and resize your chat overlay within your scene.

Test the feature chat overlay with a fake comment

  1. Return to your browser. Make sure the Extension is active (if the top bar is red, it indicates it is not active, slide the toggle to turn it on.)
  2. Scroll down to the Global settings and tools options. Open the Commands accordion.
  3. Click on the Trigger Now option under ‘Fake a comment for testing.’
  4. In OBS Studio, you should see this fake comment in your Ninja Chat dock. Click on it to show it as the feature comment.
OBS Studio with the Social Stream Ninja Dock on the left hand side of the screen. The featured chat browser source is on the screen and a dummy comment for testing purposes is displayed in front of John.

This is a good opportunity to think about where the featured comment sits within your scene. If it’s too low, move it up. If you need some separation between you and the chat you can move the camera or other scene elements and sources.

Add the whole chat to OBS Studio

The same URL as you used to create the dock within OBS Studio can also be brought in as a browser source to show the whole chat.

  1. Right-click on the Streaming chat link (in the menu options) and select “Copy link address.”
  2. In the sources dock in OBS Studio, click the plus (+) sign and select Browser.
  3. Give your chat overlay a meaningful name and click OK.
  4. Paste the copied URL into the URL textbox and click OK.

Keep in mind that if someone writes something offensive in the chat, it will be broadcast to anyone watching, so be selective about how you use this particular option.

Combining LinkedIn Live, Restream and Social Stream Ninja

You can use Social Stream Ninja directly with a number of services, but it doesn’t work with LinkedIn Live.

If you want to bring LinkedIn Live comments into OBS Studio, you’ll need to schedule your event via Restream.

Restream has some free options which might be okay if you’re only streaming to 1 or 2 destinations, though you could pay for different plan level.

  1. Set up a live event in Restream Studio.
  2. When you’re ready to go live, open Restream Chat (chat.restream.io) in your browser.
  3. Make sure the Social Stream Ninja plugin is enabled in your browser.
  4. Under Global settings and tools, go to the Commands accordion and click Trigger Now for a fake comment for testing.
  5. If the comment does not work, check your dock and/or browser settings, close OBS Studio and your browser, open them up again and try again.

The overlay has a number of other options and features that are worth exploring, but this should get you started!

Software: OBS Studio