An update version of our popular Social Media Popup is now available, with our new social media animation! This time we’ve included new features that didn’t make the first version – and that make it easier to customize and use in your stream. This include the ability to add your own custom icons, change the color of the popup, assign different pause times, as well as choose different Google Webfonts.

Get the Popup Here!

Downloading and Installing the Social Media Animation

Head over to the Nerd or Die shop to grab this item, and go through the checkout process for this item. This is a pay what you want item, so simply enter in 0 to get it for free, or if you’d like to support our site directly, you can do so by entering whatever you feel this product is worth to you.

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.

Extract the social media animation onto your computer

Inside of this folder you’ll find some files, let’s start with the Read Me file. Clicking this will launch the “Add Your Networks” page . This page allows us to add which social networks networks to add to our social media popup animation, as well as what text to put by those networks. You can follow the instructions listed on the page, but we’ll also go through them here.

Adding Networks to the Social Media Animation

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, this is in case you’d like to remove any icons.

Adding networks to the social media popup animation

Once you’re done adding any preset icons, you can upload your own icons by click the “Upload Images” button. You can also 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 social media animation popup… more on that later. 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 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.

Downloading the Add Your Network Files

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 warning messages. First, will be that you’re attempting to download multiple files. Click okay, or allow, 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.

Placing the files into the proper folder

Customizing the Appearance and Timings of the Social Media Animation

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. This page allows us to change a few things – you’ll notice a preview of the social media animation popup on the right as well, that will help you choose your colors in a bit.

Appearance and Timings Preview

 

The options here are as follows:

  • Pause Time – The amount of time, in seconds, to pause between each network
  • In between Pause Time – The amount of time, in seconds, to restart the animations
  • Icon Box Color -The color of the box that holds your network icons
  • Text Box Color – The color of the box that holds the text
  • Icon Color – The color of your icons. Please note that you can drop the opacity all the way down to show the full color of your icons. Otherwise, your icons will be filled in with the color you choose here
  • Font Color – The color of text
  • Primary Font – The primary font to be used. You must select a font here. The default shown in example is Montserrat
  • Font Weight – The weight (thickness) of your font. Not all fonts have variations for this. It is recommended to choose your font before you choose thickness. Default is 400
  • Font Size – The font size
  • Text Y Offset – Offset the Y-position of the text

Changing the Fill Color of Your Icons

An important note about this app, involves the color options. First, you should know that each color option includes an opacity slider. Allowing you to make your boxes, icons, or even font see-thru.  This also plays a big role on the icons. With the slider all the way up, your icons will be filled in with a solid color. This is why I mentioned it’s important to use .PNGs with transparency. Otherwise, you will just have a box that’s filled in for your icon.  However, if you’d like to show your icons in full, simply bring the opacity slider all the way down. With the slider all the way down, the icons will show up exactly as they were in the “Add Your Networks” section. So, the Twitch icon would be purple, the Reddit icon would show the full alien face, and your custom icons will display exactly as you had them.

A Quick Note About Fonts

Once you’re done tweaking your colors, the final section is fonts. Here, you can use this search button to find any font that Google Fonts has. One of my favorite ones is simply called “Play”. So,let’s use that as  an example. Search for the “Play” font and pick it form the list. The next option is Font Weight, which is the thickness or boldness of your font. You should know that not all fonts include multiple weights. So, when in doubt, leave this on the default of 400. For the font “Play”, it has a bold version at 600 weight, which we can use the slider to choose.

Downloading the Add Your Network Files

Click download, and again, if you have a warning here you will want to click allow to download this JavaScript file. Let’s place our newly downloaded “settings.js” file in the “settings-and-images” folder.

Adding the Apperance and Timings Settings

With that, we’re done with setting this social media animation popup up! I want to quickly note that it’s important to have these 3 files in your “settings-and-images” folder. Also, make sure that they are named properly.

Sometimes if you download multiple files from the site, you’ll have a number added at the end of your file such as 1 or 2 in parenthesis. This is to prevent duplicate files. To prevent this issue, make sure that you delete any of your previous files in your download folder, before download these files. Double check that your files are named properly, before moving on to this last part.

Adding the Social Media Animation Into OBS Studio

Let’s go ahead and add the social media animation popup into OBS Studio. I’ll create a new browser source, and choose local file. Next, I’ll find the folder I downloaded from the Nerd or Die shop, and in that I’ll see some files I can pick. The “_right-social-media-popup-v2” file is what I’m going to choose for this example. The difference between the left and right version of these files, is that one is left aligned, and the other is right aligned. So, choose what you’d like for your stream.

I’ll enter 1000 for the width and 300 for the height. If your network names are really long, you may need to increase the width.

Adding the Social Media Animation into OBS Studio

After I hit okay, I should be able to watch my new social media animation popup in action! We’ll see it cycle through all my networks, before pausing for the time I set it to, and then restarting. I really hope you all enjoy this free resource, it’s one I wanted to make for a long time.