how to make your own comment section, my way!
STEP 1: learn how to steal code.
Websites have this neat thing you can do! When you right click a page, or press CTRL-U, you can view the pages source. You get to see the code of any page you want! And with that information, you can steal the code of any page you want lolllllllllllll
I personally learned a lot about html and css by looking at other people's code! It's a helpful tool that you should be using as a future blogger. But, I would advise against stealing code unless it's for things like this. Also, keep in mind that other people can see your code using CTRL-U as well, so try and keep it looking neat! I can't be talking however, because my code is pretty messy...
Go to my comment section, and view the page's source.
I'm assuming that you're a little bit familar with how code works, but if you're completely unaware of stuff like that, I'll try to explain it to my best ability in my next guide.
STEP 2: steal that shit!!!!
Once you've located the CSS and Javascript for the comment section, or if you decide that you wanted to just dump the whole page's code into your website so that you use it as a skeleton for your page, you should go ahead and add it to your .html file. Pay special attention to these lines of code, as you'll need to edit them so that you can get your own comment data, and not just use mine.
apiKey: "AIzaSyATI_VYlp7YD6z-EH4paIE9VPmimbi10dg",
databaseURL: "https://piccolover-default-rtdb.firebaseio.com/",
projectId: "piccolover",
STEP 3: make a google firebase account and project!
Don't worry, it's free! Using Firebase is going to be really helpful for us, and will serve as the backbone of the whole page. Since WE are broke and can't afford a server, this would serve (heh) as a good alternative. However, there are some limitations, as you'll have to manually renew Firebase every 30 days to keep the comment section rolling!
Once you make your account, create a new project! Choose a name, and that will serve as your projectId, so plug it in there, inbetween the quotation makrs, after you do!
You'll be asked if you'd like AI assistance for your Firebase project, basically enabling Gemini in the project. Say no, cuz FUCK AI!!!!!!!!!!
Disable Google Analytics for your Firebase project if you'd like, as I don't think that'll affect what we are trying to do. I have it off I believe in my own comment project. Hit Create Project!!!!!!!!!!!!!!!!!
Once it's been created, add an app. When prompted to select a program, select web. I wish I could provide photos, as that would really help. I'm working on that but I rather the guide get out as soon as possible. The web icon would look like this: . Once you've pressed on it, register the app and set a nickname. You don't need to click on Firebase Hosting. Register the app, and then click on use a script tag. Once you do, you can find your apiKey and projectID, so save those and plug them into the code.
STEP 4: set up a realtime database.
Once you've returned to the mainpage, in Product Categories, go to Build and find the section named Realtime Database. This is where your comment data will be stored in a server, and where we'll find our databaseURL.
You'll be prompted to set up a database. Select a server closest to you and click next. Now, make ABSOLUTELY SURE that when you get to the security rules section, that you put it so that it starts in TEST mode. Now, proceed to the next screen. At the top of the page, you will see a URL that looks like https://your-project-id.firebaseio.com/. This is your databaseURL, and plug it into your code.
We're done with the server setup! One last measure to ensure that the comment section keeps working even after 30 days, go to the rules section of the Realtime Database, and edit the numbers after .read and .write. I'm not sure what the translation is, but those numbers somehow represent time, so change the second digit from 7 to 8 or something so we get more time. IDK, but it worked for me!
STEP 5: BE CREATIVE.
And now.. the hardest part. I've given you the method... but it's up to you to mold it into whatever you so desire! I liked having a "retro" style and theme to my blog, and that got applied to my comment page! Play around with the CSS in the style section of the code, and try to find your own theme!
Bye now!