Social Media Popup for Twitch, YouTube, and Mixer


Show off your social networks in style, with our Social Media Popup!

Features included:
Add social icons and names of your social networks
Add your own icons
Custom made animation
Customize your colors
Easily set different pause times between each network animation and entire loop
Choose any Google Font
Left and right aligned graphics

Support me at
Check out
Follow Nerd or Die on Twitter
Watch the Nerd or Die Live Stream



Hey, what’s up everyone, it’s Derek from Nerd or Die, and I’m excited to bring you our next free resource – the Social Media Popup, version 2.

Let’s get right into it.

So, we just put out an update version of our popular Social Media Popup, but this time, I wanted to include new features that were requested. You’ll be able to set this up, customize it to your liking, and put it in your stream in just a few minutes.

The first step is to head on over to the shop and go through the checkout process for this item. It’s a pay what you want item, so simply enter in 0 to get it for free.

Once you’ve downloaded the file, you’ll need to extract the folder from the zip file. You can use a program like 7zip or WinRar to to this. I’ll go ahead and put this on my desktop for now.

Inside of this folder you’ll find some files, let’s start with the Read Me file. Click on that to launch the first page we need to visit. This page allows us to add which social networks networks to add to our popup, as well as what text to put by those networks. You can follow the instructions here, which I’ll go through now.

To add any of the preset network icons, simply click on them. While doing this, you’ll see them added in the “Icon Sheet Preview” section, you’ll also see the names for each that you clicked under “Add Custom Icons” Section. Notice the remove button here, in case you’d like to remove any icons.

Once you’re done adding any preset icons, you can upload your own icons by click the Upload Images button, or you can drag and drop your image into this area. I recommend using PNG images here, especially if you’re going to add a solid icon color to your popup… more on that later.

Anyways, once you’ve added all the networks that you’d like, it’s now time to assign what text you want by each network. To do so, just click in the box that says “Enter Text Here” and type in what you want. So, for my Twitch icon, I’ll type in NerdOrDie, since that’s the name of my channel. I’ll fill in the information for the rest of the icons as well.

When done, I just need to hit the download button. When you hit download here, I want you to know that you’ll probably receive two messages. First, will be that you’re attempting to download multiple files. Click okay, or allow, to do so, as you need both files to make this product work properly.

The second warning you might receive is about a harmful file. This file is a simple JS file that stores the names you just entered above. Hit “Keep” or allow for this file.

Once both files are downloaded, we need to put them into the “settings-and-images” folder, found in the file we recently extracted.

With that done, we can move onto the next part of the setup. Click the “Customize Appearance and Timings” link at the top of the “add your networks” page. Here, we can follow the instructions again.



  • NerdOrDie 1 year ago

    Having trouble setting things up? Here's the most common issues:

    1) Files weren't fully extracted – make sure you extract everything before adding it into OBS Studio or streaming software.
    2) Files are in the wrong place – double check the location of all of your files
    3) Use Chrome – using Google Chrome makes the overall process easier
    4) JavaScript file is a text file – the dataValues file can sometimes (depending on browser and browser version), your file might be a text file and you might not know it. With the folder open in Windows, click View and enable "File name extensions" – from here, make sure the JavaScript files have the extension .js instead of .txt
    5) Local files aren't loaded properly – Open the file in Google Chrome > Copy the local url, it should start with file://// > In OBS Studio's browser source, make sure local file is unchecked
    > Paste in the local URL

    Read all this and still can't get it to work? We answer every single message on our website's support page. Shoot us a message there, and we'll help you out.

  • Steve Botsford 1 year ago

    Thank you, @NerdorDie! Works and looks great!

  • knynx_x 1 year ago

    everything works fine except the files uploaded even though i checked that they are png don't seem to show up on streamlabs, they just show up as a black dot, anyone else have this problem?

  • bembi 27 1 year ago

    I already download 3 items,when i cut it to settings-and-images,there's nothing change with my _right-social-media-popup-v2 pls give me some help

  • Avneesh Raj 1 year ago

    works perfectly fine thank you so much!!!!!!!!!!

  • Charles Coffie 1 year ago

    do you have tutorial for vmix?

  • DooDs Gaming 1 year ago

    having problem with the download of settings

  • HolyWrath 1 year ago

    Thank you for this, your work is awesome and much appreciated.

  • Tugger Jaegger 1 year ago

    the DataValues didn't download, and i didn't get any warnings about it… what can i do?

  • Just Daiyaan 1 year ago

    I followed exactly what you said and when I added the browser source into OBS it didn't show up. You could remove the browser source as the outline for the box was there but the popup didn't show at all. Please help as I'm really confused!

  • Dawson Alexabder 1 year ago

    this aint for like a youtube is it

  • Switch Azlain 1 year ago

    for anyone having issues with it not showing in streamlabs obs! you must extract everything in a new folder! now go to pop up files then settings and pictures paste all 3 files in there! it will work! i was having issue where it was not showing it was blink!

  • Switch Azlain 1 year ago

    i am doing everything you said too do! i have streamlabs obs when i do everything i get a blank sqaure! am i missing something here ??

  • Amber Music Gaming 1 year ago

    I've done this twice and followed the video perfectly both times but still can't get it to work. Mine looks exactly the same as yours when I'm adding files and setting it up. When I open in the browser or in OBS it has my icons and all my social media handles bunched up together but they aren't in a rectangular box and they're all over the place.

  • Im_hoax 1 year ago

    i dont have data values?

  • Martin Hughes 1 year ago

    I know this is old, but just starting. It works great, ty for this, but is there a way to use the actual icons in their natural form instead of colored in?

  • DJ Chris Diesel 1 year ago

    Feels like we're missing a step here. The whole left right thing just tells obs where to position but how do you add the settings that were created to obs? Mine just has a blank red box

  • Sniper L_yf 1 year ago

    is there a way to make the logo actual YT or say FB logo and not just the colour block but the actual logo

  • Respawn Gaming 1 year ago

    its was helpful ,thanks alot

  • Adam Elhussiny 1 year ago

    I get a black circle instead of a pop up

  • PlazaciMB 1 year ago

    Could you explain stuff any more quicker, my ears and eyes couldn’t keep up

  • Sniper L_yf 1 year ago

    is there a way to get the actual logo to show instead of the colour. Like the actual YT logo or Instagram logo

  • Alvin's Fraggin' 1 year ago

    Thank you so much sir!

  • Gaming With Brightblade 1 year ago

    i can't get this to work

  • NattyBizzle 1 year ago

    cant open the file in sony vegas any help?

  • JV 1 year ago

    if only this had a x axis setting, this would be perfect.

  • Coleslawbtw 1 year ago

    I looked at the instructions carefully and I have tried over and over but when I import it there is a half-black circle please help

  • Efley Espinal 1 year ago

    Hey this was almost a slam dunk for me but it the popup only shows the name of my first social media. when it goes to next social it does not show the username i had put for the rest of the socials. Please help me out. I use SLOBS

  • RBCKairo 1 year ago

    mine doesnt work at all like i cant preview in browser or see in obs followed all the steps right and i am very confused

  • Sevy The Savage 1 year ago

    hey for some reasoon it gives me a HTML file , i'm using a video editor is there anyway to convert the fiile?

  • eeskaatt 1 year ago

    Thank you for this

  • Mark Calibo 1 year ago

    its not working!!!!! you dont click what u download lol!

  • RelayGaming 1 year ago

    can u add this to ps4 twitch livestream?

  • oyi36 1 year ago

    How do I do this on slobs?

  • SourDrew 1 year ago

    is there a way to download an mp4 of the animation so that it can be used in video editing

  • SeanYT 1 year ago

    Why does the popup not show when i'm capturing a game? Please help me 🙂

  • Man O' War 1 year ago

    Thanks bro (y)

  • iZor Kapz 1 year ago

    How can I put this into yt vids or on a program called overlay expert in the twitch extensions

  • iZor Kapz 1 year ago

    So is this free?

  • Yash Pahariya 1 year ago

    You saved me a bunch of time, thank you so much!!!

  • Mugginnn 1 year ago

    it doesnt work on streamlabs!!!!!!help

  • ChewyGGs 1 year ago

    I didnt get the datafiles file

  • oNoRich 1 year ago

    Thanks man I was trying to find this and I needed a socials overlay

  • guppyybtw 1 year ago

    when i add it, it just makes a black semi circle, any help

Comments are closed.