If you're looking to add comments to your social network on Wix, you've come to the right video today in our building a social network in Wix The Non-Coding Founder's Guide. I'm going to show you the initial framework for adding comments to your social network.
So before we dive in, I'd like to first welcome you to this channel. If you haven't been here before, thank you for joining us, make sure you hit that subscribe button so you never miss any content on this channel, because our waste content is coming in boatload as we continue to advance with Wix. If you're joining us back, make sure you hit that like button and comment down below what else you'd like to see in this series and what you've enjoyed most also hit that subscribe button if you have it. Guys, head over to wixtrainingacademy.com and that is where you can access. “Yes, I want free Wix content” to join the free Wix Training Academy with Wix courses webinars and more.
So before we jump into things, if we remember where we left off, we added a liking system and we added a custom search system. Now we're going to build the framework for a commenting system. It's going to get more in depth and there's going to be more code involved, but in today's episode, there's zero coding involved and it can get you started with comments.
Adding Comments To Your Wix Website
So what we're going to do is we're going to go down to our dynamic page, our UserStatuses page, and we're going to add our comment additions down below. So I'm going to go ahead, I'm going to go in here. I'm going to add a box and we're going to call it, well, I'll show you here in a second.
Adding Comment Box
I'm going to add a box down here and I'm going to make it about that big right there. And then I'm going to change the design real quick, real briefly. And we're going to change the fill to this red color. Then I'm going to X that out. I'm going to come in here to Add, I'm going to go to Text and I'm going to grab text.
Now, I'm just showing you this text part stuff pretty quick guys, because it's pretty quick and easy. And if you've been following along where all of the basic elements like text boxes and all of that are we're just going to name it “Comments”. We're going to drop that size a little bit. Perfect! So now that we've got our comment box down below, what we have to do is we have to go get a repeater.
But before we get a repeater, we have to build out a database. So in order to build out a database, we have to go up to Code, make sure our code tools are turned on or developer tools. You can see they are because it says turn off developer tools, which means they're on.
And if we go down here to our little tree, we'll click it open. And then we're going to see Database while we're now going click add (+) next to database, New Collection. And we're going to name this “Comments”. We need a database to house our comments and who's this database collection for? We're going to choose Custom Use.
And then we're going to set up the permissions. So now who can read content from this collection? Well, this is very dependent upon the type of social network you have. If anyone can come onto your social network and just view everything, then you would still set this to anyone, but likely anyone that's on your social network had to sign up to be on your social network. So we're going to choose Site member. A site member can read content from the collection, which means a site member could read content, our comments, but we're going to choose a Site member can also create content for this collection.
So a site, member someone that's registered can comment and we're going to choose Site member author. So the person that wrote that original comment can update the comment and who can delete content or comments that same site member author, so we'll have it. So that way, that same person that edited or wrote that comment can also delete it. And then we're going to press Set & Create Collection.
So once we do that, our database is going to open. For this video, I'm going to go ahead and just add a few different fields. So I'm going to name a Full Name that will be in the field type is going to be Text. That's going to be the commenters name. I'm going to add a Comment. So this will actually be the comment. This field type will also be Text.
I'm going to add a Profile Picture and this field type will be Image, and this will show the picture of the commenter. And then I'm going to click Add. So we're going to keep it nice and simple with that full name, comment, and profile picture. And now that we've got our database built out, literally that was it. We set up our database. If you want to add any more fields to whatever the commenter is going to add, then you can right here in the database, but this is what we're going to work with.
We're going to go back to that UserStatuses page. And we're going to go ahead to Add and we're going to go down to Lists & Grids and get a Repeater. So I'm going to use this repeater right here. Anyone that was following my eCommerce series on Wix knows this is the same repeater that I used. I'm going to go ahead and drag it out. And then I'm going to drag the actual repeater out on the inside because you can adjust the repeaters here. And you can see, I drag it out a little too far here. So if I come on and pull that back right here to the end of the comment box, we can then drag this back right here. Perfect!
So now what I'm going to do is I'm going to just shrink this picture up a little bit and you can see it reflects on all of the repeaters because it's a repeater. That's what it does. We'll add the name right there. I'm going to get rid of art director and then we'll actually add the comment right here. So we can actually go ahead like that and then bring the name down. Or we could do the name up here just a little bit and do the name just like that. And then we could actually drop the comment in here, like that kind of how the original design was drag it out to the end.
And now you can actually come in here and you could change the font here. So I'm going to change the font up and you'll see it to reflect it across all of the repeaters. And then I'll come in here and I'm also going to change this font up. And again, it's reflected across all the repeaters.
Connecting The Data
So now that we've got that, we need to have a dataset to actually connect the data to the database. So we're going to come in here to Add, and we're going to go down to Database and we're going to click Dataset. Once we click that, we're going to double click on it and we have to choose a collection. We want it to connect to the Comments database. And right now we want this version to be Read-only because this is where people can read the comments, so we want read-only.We're going to choose numbers to display, which is the number of items to display this repeater as 20, for right now. You can adjust this based off of how many comments you want to show per page per element. So then you'll have that right there and you connect it.
Now, what we need to do is we need to connect the data in our repeaters, the elements to the data in our database to do that we're going to click this Connect to Data button. We're going to choose the dataset, which is the Comments dataset. You can see the name right here, Comments dataset. the Image source connects to Profile Picture (Image) in the database.
And then we see name, this is our full name, so connect to data. It connects to the Comments dataset, and the texts connects to Full Name (Text) in the database. And finally we have comment and connect to data, and then we're going to connect to the Comments dataset and connect to Comment (Text) in the database. So it relates to its relative field in the database.
You'll see that your data successfully connected when it turns green and says Connected to Data. So now we have all of our information connected to the database and it will display whatever is displayed in the database.
Creating Upload Comment System
Now what we're going to do is we're going to build a very simple ‘upload a comment’ system. So we're going to come over here to Add, we're going to go up to Button and I'm going to go ahead and grab this button right here and we'll just keep it this color for right now and we'll just say “Post Comment”.
Now what we're going to do is we're going to create a little lightbox. So we're going to go Add, we're going to go to Lightbox. We'll just click this one right here. We'll get rid of all this good stuff. We'll make this a little bit bigger. We're going to change the design on this because, wow! That's pretty crazy. We'll change it to white. I'll bring some text on here. We'll go to Add, we'll go to Text. We'll go back up to heading here. I'll go just like that. And I'll say “Post A Comment”. I will align the text, center. I will go back up here, change the font. And now we've got post comment.
Now what we need to do is add the proper fields to post a comment. So to do that, we know we want their first name. So we need User Input fields. So we're going to go down to user input and we're going to pick one of these top text, field buttons. I'm just going to click this Level of Education one, and then I'm going to drag this out and then I'm going to double click it. And I'm going to click and make sure the type is Text.
Once we've got it on text, I'm going to choose the placeholder text to say Full Name and I'm going to make it Required. So that way the commenter has to put in their full name. And we're good and set on that one.
Next, we want the ability to add a profile image. So we're going to go over here to Upload Button and we're going to choose one of these. I'm going to choose this Add a File button, and we're going to click it right under that full name category. I'm going to double click it and I'm going to change the button text to “Upload Profile Picture”. And then we're going to make this a Required field. Well, you can choose to keep this one required or not required. I'm going to make a required because I want the commenter to have a profile picture it's associated with. And we will use this, especially when we get deeper into this comment infrastructure. So that way when we build out the more advanced functions in our next video this will be applicable. So we'll have that. We'll have upload profile picture.
Adding Text Box
We need one last one, which is a text box. So that way the person can actually write a comment. So we'll go ahead. Upload our text box right here. We'll drag it out. Same distance as full name, and we'll make it a little bit bigger. We'll double click on it. And we'll say, “Write your comment here.” and I will also make this Required.
Once we've got that guys, we need to add a button now. So that way we could submit the data that's added here. So I'm going to go to Button. I'm going to go down here and we're going to write, “Submit comment”. We're going to drag the button out a little bit.
Now what we need to do is we need to add another dataset. So we connect this data to go into the database when it's submitted. So we're going to go back to Add, we're going to go down to Database. We're going to go to Dataset. And then we're just going to bring this dataset up. Wherever datasets are invisible, we're going to choose a collection and we want it to connect to the Comments database, except we want this mode to be Write-only, not read-only because data's being written and submitted rather than spit out and read. So we're going to click that and then same process.
We're just going to come in here Connect to data, and then we're going to value connects to Full Name (Text), the same associated field value connects to Profile Picture (Image), same associated field, and then value connects to, and we're going to choose Comment (Text), same associated field. So now you can see all of our data is properly connected to the database because it's turned green said Connected to Data.
Adding Function Button
The last step here is we need to add a function to the button. So we're going to click on the button and we're also going to press Connect to Data. Except for the button, we're going to say link connects to Submit, so when the data is submitted to the database you can choose to either stay on this page or you can choose to send them to any other page or external link anywhere. It can be another page, another light box, a document, email, phone, number, web address, any of this. So we're just going to have them go back to the HOME page in this case, because why not just for testing sake. So now we've got that. We're going to press Publish.
Then we're going to go to View Site, and we're going to go ahead and give it a test. So I first need to get to the Statuses page and go to the actual full status. So I'm going to click that. And now we're at the user status page. So you can see there's currently no comments here, right? Oh, I accidentally didn't turn the timer off for that. So there's currently no comments. So we're going to go ahead and post a comment. So we're going to press put out, whoops, good point.
We need to link that button to the lightbox. So we're going to go back to our UserStatuses and we're going to link this “Post Comment” button, click Link and then we're going to click lightbox and we're going to add it to, well, this says Welcome (Jazzy), but that's the one we just created press Done. And then we're going to press Publish.
So now that's connected properly. We're going to go back here. We're going to try this one more time, the proper way. So we're going to click Statuses and we're going to click View Full Status. Again, if you follow this series, all of these make sense to you. We're going to go to, we don't want this active right now. We're going to press Post Comment and then it'll pull it up. I'm going to add my name. I'm going to add a profile picture. So we're going to come in here. Let's see what picture can I add? Let's add that one right here. Then I'm going to write my comment, “This is a very cool post! Keep up the good work!” And I'm going to press Submit Comment and it looks like it may have been submitted.
Let's verify that let's verify that I'm signed to. Oh, no. Okay. So here's a very vital thing guys. So if you remember correctly, in order to view comments, in order to post comments, you have to be a registered member. If you could see up here, it does not say I'm logged in. So I have to log in first and you could see this first-hand how this will work.
So I would click Log In and now I will come in here, log in with my normal logging credentials and you'll see how, because I wasn't logged in. It would not let me post that comment because you'll notice it didn't redirect me to the homepage after it would have submitted. So that causes a big problem.
So now if we press refresh, what we'll do is we'll come in here. We'll go to Post Comment and we'll try this one more time and you'll watch how this makes a huge difference because it's going off the database permissions. So we'll come back in here, add the picture and “This is a cool post! Keep up the great work!” and then Submit Comment.
And now you'll notice it has successfully worked. It's submitted, redirected us home, and now let's just go make sure the comment was added correctly. So we'll go back to Statuses click view status, and you'll see the comment was added. My pictures right here. My name is right here. And my comment was right here.
That is the beginning part of building the comment infrastructure for this social network in Wix guys!
If you enjoyed this video, drop the thumbs up down below and comment what you thought down on the YouTube comments. Utilize those and see how we’ll they work, they do. So go ahead and comment and then click that subscribe button. Don't forget to turn those bell notifications on. So you never miss a single upload here on the Wix Training Academy.
I appreciate you guys so much. I have another exciting series coming up as well and no it's not fan mail Friday, it's a different one. Although we will have fan mail Fridays this week. So thank you guys for watching this. And I hope you're glad to see this building a social network in Wix video, back up and running. I know a lot of you were waiting for it and I hope you liked this comment structure that we're building out.
Thank you guys! Again, don't forget to head over to wixtrainingacademy.com link in the description below click “Yes, I want free Wix content” and let's get you up and going on our free Wix Training Academy. You are awesome! Stay rocking! Go out there and kill those social networks and build the best one you can build. Thank you, guys! Catch you on the next one..