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

⏩ Timestamps, click to skip ahead!
0:00 Introduction and Example Designs
0:25 New Features
0:45 Downloading and Installing
3:16 Customizing the Popup
7:23 Adding the Popup to stream software

~

-----

TRANSCRIPT EXCERPT

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.

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]

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
> 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.

[joaquimley]

FOR ANYONE HAVING ISSUES:
The fix is quite simple
1. Open the desired HTML file on your browser (you can drag and drop to a tab)
2. Copy the URL (starts with some like file://)
3. Now on OBS instead of using the "Local file" option, paste the URL you got from step 2 (as you would on an external website).
4. You should see the animation popping up on OBS (don't forget to set FPS to 60 for better visual candy).

The reason behind this is due to the spaces and special chars to your file path get url encoded. Without getting to nerdy, '%20' represents a space, and OBS might not get (and others) that with the local file option.
Hope this helps out 💪

[ZOTANx]

In my case, the problem was the ARIAL FONT, I just changed it and everything worked very well.
Thanks a lot @NerdOrDie. well done.

[edfiregaming]

This is a bloody brilliant product. Thank you so much for taking the time to make it. You are wonderful!

[quewilgaming]

Followed the steps! Works great on the MAC OS using SLOBS. Can't wait to stream to show off my new design. Thanks NerdorDie!

[zaraphx]

Once again with the quality videos. I absolutely love your work. Never stop doing this!

[Jason-ukch]

***OKAY I FIGURED IT OUT AFTER A WEEK!***

IN OBS DO NOT CHECK OFF LOCAL FILE
OPEN HTML DOC (LEFT OR RIGHT ALIGNMENT) IN CHROME
COPY AND PASTE URL INTO URL FIELD IN OBS

TA-DA!

UPVOTE IF IT WORKS SO OTHERS CAN SEE :)

[chipcarlton]

You are a gentleman and a scholar! Will be doing this when I get home!

[leeaguiar]

Thank you for helping this MUCH all of us begginers on stream with this awesome work and effort put on it. You sir, are a legend!

[ajhandsome]

You are a legend for releasing this to the public

[moonlightronin]

I really appreciate you making this available. Awesome popup!

[kevinsmak]

Wow this looks awesome! Also has all the icons I need accept the Email one. Thanks!

[zmiguel]

Wow! Everything in this project is perfect! You thought of it all! Thanks for putting in the time to do this guys!

[Super_GT]

Many thanks for this. Very clear guide and it worked perfectly for me.

[PNTTVReacts]

I did all this, came to the last part of the video and realized that this was for streaming popups, *signs*. It's still great because I do live streams on my Patreon but I was looking for a new popup for my YouTube videos...LOL. Thanks anyway! Very awesome animation!

[MyNameIsNotTeacher]

Bro this has been so awesome. You deserve every like!

[funkit]

I found a work around for those who can't see the animation even previewing it on browser, if you see that your "datavalues" file extension is sql, change it to js, and then try adding it to obs again, works for me so i hope it helps you too

[olddeadguy]

just want to throw this out there since so many people have struggled with the website setup and the .js.txt extension. If you don't want to bother using the website to modify and then replace files, actually adding the .txt after the .js allows you to open the files in a word editor and modify the code without having to delete/configure over and over. Keep in mind you'll have save the files and then delete the .txt from the file name - and then restart obs for the changes to take place. It will save you a ton of time. Hope this helps the more tech savvy amongst you.

[sbotsford]

Thank you, @NerdorDie! Works and looks great!

[ArshesL_VOD]

If it doesn't show up : check if the file are correct (for me dataValues.js was remane dataValues.js.txt so it didn't work). Your file in the folder "settings-and-images" should be :
- dataValues.js
- icon-sheet.png
- settings.js