Social Media Popup for Twitch, YouTube, and Mixer
Вставка
- Опубліковано 9 чер 2024
- GET THE SOCIAL MEDIA POPUP .....► goo.gl/hd0VYM
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
~
Support me at / nerdordie
Check out NerdOrDie.com
Follow Nerd or Die on Twitter / nerdspwn
Watch the Nerd or Die Live Stream / nerdordie
-----
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.
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. - Навчання та стиль
![FREE Social Media Drop-Ins in Canva! || [Canva for Streamers Tutorial]](http://i.ytimg.com/vi/PovXpKFCyc8/mqdefault.jpg)
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.
this helped me get back.. thanks for the hard work.
will this work on mac?
thanks man it really helped
Custom fonts (at least Arial) do not work. It just shows a blank page. Montserrat works fine.
Hi I just downloaded the Social media Pop Up but it don't work. I'm a programmer and i figured out that some .js files are missing. I found them online and added them. Try to fix it :)
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!
This is a bloody brilliant product. Thank you so much for taking the time to make it. You are wonderful!
I already watch this video like 4 times... I wanted to know if you can Download a video in OBS Or the pop up will works only on live/stream?
Once again with the quality videos. I absolutely love your work. Never stop doing this!
I already watch this video like 4 times... I wanted to know if you can Download a video in OBS Or the pop up will works only on live/stream?
I really appreciate you making this available. Awesome popup!
Wow! Everything in this project is perfect! You thought of it all! Thanks for putting in the time to do this guys!
You are a gentleman and a scholar! Will be doing this when I get home!
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!
Thank you, @NerdorDie! Works and looks great!
Many thanks for this. Very clear guide and it worked perfectly for me.
Love your work, simple, elegant and clean, thank you.
Does it work properly with OBS 19.0.03?
I have preview in Chrome, but not in the OBS, even though done everything step by step
Yes, I'm using it currently in OBS Studio 19.0.03 - any errors when you hit F12 then go to the "console" tab?
I managed to get it to work, using only examples from video, not messing with options. I guess the problem could be around cyrillic fonts, because i didn't change much but it from your example.
Gonna do some more research now, maybe i will get it to work smh. Still tho, thanks for your job!
Followed the steps! Works great on the MAC OS using SLOBS. Can't wait to stream to show off my new design. Thanks NerdorDie!
You are a legend for releasing this to the public
Bro this has been so awesome. You deserve every like!
Thanks for this. Exactly what I was looking for. You guys do great work!
Thank you NerdorDie. Helped me a lot!! Really do appreciate it!
This dude needs more attention!
Thank you so much for taking the time to create such an amazing product for free.
thanks alot. been waiting for this one for ages. great job you guys. keep it up
Thanks man I was trying to find this and I needed a socials overlay
NICE! I'm so glad you're still providing awesome content. Thanks
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 💪
Yup, this does it.
its a black box for me
please help me fix it
I'm only using xSplit so far but I might change in the future and bought it because I thought it was so cool. Keep up the good work.
It's so easy to use and just looks awesome. Also the work you put into it, to just make setting it up sp understandable. I'm amazed.
Thank you so much! Many of your resources have helped me design my stream! Keep up the good work!
I already watch this video like 4 times... I wanted to know if you can Download a video in OBS Or the pop up will works only on live/stream?
Great step by step video. I have these overlays for my streamlabs obs when I stream now. Thank you
This is amazing. Thanks for doing the leg work for us!
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 UA-cam videos...LOL. Thanks anyway! Very awesome animation!
I'm using it. So easy to costumize, really, thanks ♥
Yes thank you so much! This video made it easy to do!
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
Thanks man, helped out a lot :)
In my case, the problem was the ARIAL FONT, I just changed it and everything worked very well.
Thanks a lot @NerdOrDie. well done.
I wish I could give this comment more than one thumbs up because that was the EXACT issue I was experiencing. Once I changed the font, the problem was solved.
Wow this looks awesome! Also has all the icons I need accept the Email one. Thanks!
thanks nerdordie this video helped me alot to make my stream beautiful yet professional . god bless you. thank you.
This is exactly what I wanted!!!! Thank you
Hello, I have OBS Studio 19.0.3. Will this Social Media Popup work on OBS Studio's newer version? I noticed on your video you have an older version. Also, this new version has two screens on start up. Thanks in advance for your response.
thank you. using this in 2018 and it works just fine :)
Hey NerdOrDie! This tutorial was very well put together. Thank you for your efforts! I got everything running in OBS, but I do have a question. Would there be any method to get this icon into an application such as Movie Studio Platinum? I want to have this in a UA-cam video, a .mp4 file, would you have any insight on that?
Just liked it before i even watched it. Already know its going to be good
You saved me a bunch of time, thank you so much!!!
Thankyou helped a lot !
Works for me. Thank you so much!
PERFECTION, AND THE COMMENT ADDRESSING COMMON ISSUES IS FANTASTIC. IM ALL CAPS CAUSE ITS SO GOOOOOOOOOOOOD
This is incredible! Thank you so much
Thanks a lot this is insane!!!
An awesome video and how-to/tutorial! Thanks very much 😁
Cheers! 🍻
Great work, mate. Thank you a lot!
Awesome! Thank you!
Going to try this asap! Thanks!
Thank you so much, this and your scene maker is amazing. Looking forward to streaming, will leave credit in my twitch description.
works perfectly fine thank you so much!!!!!!!!!!
Thanks for this man, works wonderfully 👍
After selecting the social icons and adding in the handles, after I clicked download, I only received the icon-sheet.png (no data values). Can you help?
me too
@@OrangeTank couple months late but for me there was an option to download image and download settings. I downloaded both and it worked
The best tutorial !!!! this is gold for me thanks a lot man
This is one hilariously epic resource :)
What is resolution of icons to fit them in the block with name ? They are just small in the white box for example.
Thank you so much, this is a great help for a lot of poeple, love you
This is awesome, thanks!
Thank you so much!
Thanks so much for tutorials, i tried to new livestreaming!
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.
How do i get this to work with SLOBS? went through the whole process but not connecting with stream labs OBS
Great tutorial man, keep it up!
My pop up works but after it's downloaded how do I add it to Final Cut Pro??? I can't drag it into my videos.
Unfortunately you can't... at least easily. It's a HTML file, so it needs to be ran in the browser source. It's all run on code. However, what you COULD do, is record it in OBS Studio with a green color behind it, and then key out that color. There's not motion blur on this, so it should work nicely.
You might be able to if you open it in chrome then copy the url if there's anywhere you can put it into.
Really helped my stream looks way more profesional
Thanks for this mine work and they look awesome!!!!
awesome, thanks for the help! Is there any way I can import that into adobe premier to pop up during a video?
Thank you for this
Huge thanks bro! U are the best!
I love this dudes voice
Great designs and epic video 👍
On mac the html files don't open eg to premiere pro. Is there a way to open the files or convert them to mpeg?
is there a way I can use this in final cut for my videos?
Thank you so much! Gonna give it at try and most deff will donate real soon.thank you again,subscribed 👍👍
Amazing, thanks bro!
Very Helpful!
You are amazing! Thank you so so much
Thank you so much sir!
when I go into obs, and download it, it doesn't do one social media at a time... It show em all and is all glitchy..
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 ??
NerdOrDie, does this apply to UA-cam videos and not just live streams? I really need to know asap
I apologize for the possibly brainfart question here, but where is the local file thing located for xsplit? I don't use google chrome (yeah prolly the other issue i may have soon lol) and i don't use obs, so I'm kinda lost here ^^; Thank you for your advice :3
very good popups!
COngratulations.
Works great for me! Thanks
Thank you.
How I can restart the animation after tot seconds like your video?
There is a filter to add?
Hi! Can i duplicate the files do create other than social pop ups with the copy? would it affect the content in the original?
Amazing work, Thank you!
Thanks!
thanks brother this is amazing! :)
Thanks so Much !
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?
So everything seems to be working fine, but is there any way to change the size of the icon? or change the X offset? Just seems to have too much space between the icon and text. And would you have a trick to get multiple words to fit? If I type in, "Don't forget to follow!" it will only show "Don't", I've had to use _ in between words to make it work but it looks sloppy as a result! Thank you for the program though!
having a slight issue, where the banner/box that contains the text doesn't scale its width and cuts text off till the next animation.
NerdOrDie thank you so much for this. I had an offer/suggestion because I was thinking of something else to promote for people (like myself). Is there any way you could add Soundcloud for one of the Network Icon options?
it's a nice addon for streaming, by any chance there is a way to make the lenght of the box adaptive to the text lenght?
thanks for this!!!
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!
hey for some reasoon it gives me a HTML file , i'm using a video editor is there anyway to convert the fiile?
Hey, i was thinking about using this, but not with social media, but with things like last follower, top donator etc. and use it with streamlabels. How can i achieve that?
Thank you bro! Subbed ❤️