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.
For more infomation >> Black Boy Melhor com você - Duration: 3:25. 
For more infomation >> Mercedes-Benz 200-280 (W123) 240 D - Duration: 1:02. 
For more infomation >> NOBODY remembers me! - Y7W (66) English subtitles - Duration: 4:11. 
For more infomation >> Message pour votre nuit. 11 Mai - Duration: 0:44. 
No comments:
Post a Comment