Social Media Popup for Twitch, YouTube, and Mixer

Social Media Popup for Twitch, YouTube, and Mixer


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 – as well as announce our first ever giveaway to win a GTX1070 – more
information on the giveaway in the description below, as well as at the end of this video. 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 nerdordie.com
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. This page allows us to change a few things
– you’ll notice a preview of the popup on the right as well, that will help you choose
your colors in a bit. Let’s start with the Options. First is the “Pause Time”, this lets you
decide how long, in seconds, you want each network to pause for. So, basically, it will show your network for
6 seconds, and then move on to the next one. I”ll change this to 3 for my example. Next is the “Inbetween Pause Time”. This is the amount of time inbetween the total
animation. Meaning, once the popup has shown all of your
networks, it will pause for this amount of time. So, if you want it to appear every 10 minutes,
set this to 600, for 600 seconds. In my example I’m going to put it at 6,
just so you can see the demo reappear. Next, the color section let’s you assign
various colors to each part of the popup. Just click the “change color” button for
each section, and choose what best fits your channel. You can also enter hex codes or rgba values
into the boxes below, if you have an exact color you’d like to use. On the far right of the color picker is the
opacity slider. Allowing you to make your colors see-thru,
if you’d like. An important color to talk about is the “icon
color”. Right now, the icon color will fill in each
icon with a solid color. This is why it’s important to use a PNG
that includes transparency for your own custom icons. If you use something like a JPG, it will simply
fill in the entire image, and you might not be able to make out your added icon. However, if you want to not include any fill
color to your icons, simply slide 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. 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, I’ll search for that, and pick it form
the list. Next, we have the 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. However, for this Font “Play”, I noticed
it has a nice bold version at 600 weight, which I’ll use here. Finally, pick the font size, and then use
the “Text Y Offset” slider to adjust your text as needed. Some fonts don’t center align perfectly,
so this will help you tweak that value. Now, let’s hit download, and again, if you
have a warning here, just hit allow to download this JavaScript file. Let’s place our newly downloaded settings.js
file in the “settings-and-images” folder. With that, we’re done with setting this
social popup up! I want to quickly note that it’s important
to have these 3 files in your “settings-and-images” folder. And you want to 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. So again, double check that your files are
named properly, before moving on to this last part. Let’s go ahead and add the 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. After I hit okay, I should be able to watch
my new 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. I’d also like to say a HUGE thank you to
PrognostiGator from Patreon, who this resource is dedicated to. Oh, and let’s talk about our first ever
Giveaway! From now until June 6th you can enter to win
an EVGA GTX1070 at NerdOrDie.com/Giveaway – it’s ran through Gleam.io – so you simply
need to Subscribe to this channel, or follow us on various social media to be eligible
to enter. We also partnered up with 2 awesome streamers,
so I highly recommend checking them out as well. If you happen to be watching this video after
June 6th, don’t worry – we’ll be running more giveaways graphics and some other cool
stuff, so check out that link to see what’s going on. Please let me know in the comments below if
you have any questions about this video. If you liked the video, give it a like, and
if you want more great streaming resources, make sure to subscribe. Thanks for watching.

100 thoughts on “Social Media Popup for Twitch, YouTube, and Mixer

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

  2. Got this to work in OBS but I prefer the Elgato software, is there any way to use this popup using only Elgato and not OBS? Cheers

  3. Hi! I have issues on putting a custom css for my facebook live, do u have an idea on how can I put A custom css from code pen to my facebook live alert notifications? Anyway Merry Christmas dude!

  4. THX it works beautiful and i hope we will see more cool stuff like that.
    (Will check you're Videos if there is something new) 😉
    Merry Christmas and a wonderfull new Year 2019.

  5. I figured it out. Delete all of your previous files you have downloaded, then re-download all of the files, and follow the steps. It worked for me.

  6. Ok, there's definitely something funky with the browser used to download it. If you are having any troubles, delete all files, re-download using Chrome, follow the tutorial while STILL using chrome. Once finished, double click the html file you wish to use (left or right aligned), the file will open on your default browser, if you see the animation, you're set! Copy the address and add it in OBS as a browser source (NOTE, do not use local file, instead, paste the URL you copied, it should be something like "file:///C:/Users/…", delete the beginning so that it starts with "///C:/Users/…").
    If you're still having issues, you should contact Nerd Or Die directly on their page via a help ticket.

    Good luck on your streams y'all!

  7. Is there a way to make the box (that contains the logo) any smaller or possibly make the font size smaller? I tried manually making it smaller in OBS, but that only made the text blurry. I just don't like the big square. I'd like to make it smaller w/o changing the text.

  8. I bought this thinking it'll look great. It doeskin Work with streamlabs, the NerdOrDie user who posted this video is only liking comments on it working, He doesn't even reply to solutions or mostly doesn't care enough to help people with streamlabs. No point raising up a issues on the site due to them taking weeks to reply at times.

  9. Works great! The only thing I wish I had is the option to add a delay before the loop begins – that way I could time multiple instances. Unless there's a better way?

  10. Just did this and now my computer says that it has a problem and keeps resetting on its own. When I’m streaming my frames drop 43% and the stream just keeps freezing. It got to the point where I couldn’t use my PC at all bc it just keeps resetting itself saying there’s a problem w my pc. Now I just factory reset my PC so wish me luck

  11. Love the video really helped. BTW I came from the old video saw that there was a more up to date link so that's how I'm here.

  12. Thank you so much! Gonna give it at try and most deff will donate real soon.thank you again,subscribed 👍👍

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

  14. I just brought this and I really like the simple concept only problem I have is that the logos and the names I put for them all get mixed even tho I have put them in the right areas. shame really :/

  15. I already watch this video like 4 times… I wanted to know if you can Download a video in OBS Or it will works only on live/stream?

  16. Works in Streamlabs OBS, the first time i don't see the "disable ad block", but, after that, it works perfect 🙂
    Thanks Guys!

  17. What should I do if I want each media to have a different color? Does anyone know how I can apply a different setting for each png file? (I know nothing about js)

  18. Hey! this is a great product. Thanks a lot! Is there anyway to download the animation as a video and use in a offline video?

  19. i got the problem i did all set in to OBS browsersource filedata and nothing happens when i click on link all works ????

  20. Thank you so much man! Works flawlessly! The design is simple and clean and this tutorial lays everything out there. I had 0 issues! Thank you again!

Leave a Reply

Your email address will not be published. Required fields are marked *