What is up, guys? Today is building a social network in Wix The Non-Coding Founder's Guide part 6. Today I'm going to show you how to build out those user status pages.
So last week, I displayed how to actually have a user “Post A Status” to your social network. And I showed you a brief example of how that can be displayed on a page, but then I didn't show you how the status can be continuously displayed, how you actually would like them to look. So that's what we're going to talk about in today's video. As always, my coffee love and this week is the Donut Shop, Nutty Caramel Coffee. That's what it is powered on today, shameless plug. If you want to go check that out, Donut Shop Nutty Caramel Coffee, great stuff!
If you haven't already headed over to wixtrainingacademy.com, link in the description below and on this website, I have created a “Member only” platform. You can come up here and click “ACADEMY”. If you're not already enrolled in, it'll ask you to register. You get access to tons of free webinars, workshops, checklists, all that good stuff, masterminds, a whole bunch of content. That's completely free to you. You just have to sign up and register with your email and a password, that's it!
But let's hop into today's video. Let's get a thumbs-up right away though, because we're having fun today and we're going to learn some exciting stuff!
Creating Social Feed Pages
So if we go in here to the “Editor”, you can see I've already pulled up this “STATUSES PAGE”. So when we left off the last video, I created just a little placeholders statuses page here. And what I did was I created the box and I created text and I connected it to our statuses database, which if we remember is right here under “UserStatuses”, if we go in there, we can see there was “Status” in there on the live site, but I deleted the status already, but the user will post their status right here snd it's a text status.
Image Status Upload
First, I'm going to show you guys how to do an image status upload. So your users can upload user generated images into their statuses as well. I'm going to save that for the next video, because today I wanted to focus on the statuses page itself. So we have our user status database, you can go back to part 5 to reference that video if you want to. But today I'm going to show you how to actually create the page where all the status feeds will be.
So if we go back to the “STATUSES PAGE” here, I'm going to delete this box right now. What we have on here is we have our dataset. If you guys didn't remember how to add a dataset, what we're going to do is we're going to “Add”, we're going to go to “Database” up here at the top. We have to make sure the Wix code tools are on. You can see it says, turn off here, which means they're on. And then you'll go down here to “Dataset” and you'll simply pick what one you want it to connect to.
We already have it. We've got our “UserStatuses” dataset here, which means it connects to that user statuses database. And we want it to be “Read-only” mode for right now. When I get into editing statuses and all of that, I will show you how we're going to adjust that to be a read and write mode. So the user can actually edit their status straight from the status page as well. But today we're going to establish how to get the status page setup.
Repeaters
So once we have that in place and we have our dataset on the page, what we're going to utilize today is something called repeaters. So what repeaters do is it will repeat the same design and look, but change the content. So what happens is you'll have the same design, but dynamic content. So when there's a new post that occurs, that piece of content will be in the design of the repeater, but it'll change for each new post recorded or uploaded.
So let me show you how we're going to do that. So we're going to go in here to “Add”, and then we're going to go to “Lists & Grids” and you can see lists and grids right here. And then you'll see the different repeaters we have available to us. There's a whole bunch of different designs, a whole bunch of different lists and grids and repeaters.
It doesn't really matter which one you choose because you can alter the design of it, but understand that you're going to be using text statuses and you may be using image statuses as well, but I just want something that's going to be pretty simple to alter right off the bat. So if we go through here, I'm just going to pick this one just because it's already kind of in a status type form. It's already listed out in number form, and it's just going to be easier to maneuver in my opinion.
So I'm going to changes up a little bit and we can have our statuses. If you'd like, you can extend it like that. You could have a cool little funky style like this, where you have the numbers go across, however you want to do it, and then it's simple. I mean, you just ended up redesigning it. So we'll go ahead and add our repeater, just like that. Perfect!
So now we've got our repeaters in place. I'm going to take the number out of it and you can see something in there, guys. So I'm going to hit “command Z” and go back. So what happens is the design stays across each new repeater and you can see there's a list of containers here. So if I delete this one up here, it will delete it in each container.
And the reason for that is because the content is dynamic, but the design is the same. So if we delete something in this top one or any of them, it will delete across all of them. That's because it's a uniform design and that's okay. But for this video, we're going to use the text statuses. You can see, as I change this, it becomes dynamic across all of them.
I'm going to shrink the size up here a little bit, and we'll have our content like that. We can come in here, we can change the font of it. If I come in here, we'll go “Montserrat Regular ”. That's what we were using before, we have that.
Here's something else I need you guys to know. So this dataset becomes an important aspect because if we click on it and we have it set up “Read-only”, you can see right here. It says the number of items to display. Well, this means however many items we want to display from this repeater, from the database. So if you want 20 statuses per page, then create 20 statuses. I'm not going to show you pagination in this video, which is doing the next page, previous page type thing. I'm just going to show you how to do this initial user status page.
Pagination will be a whole topic in of itself because I have to show you how to do that for profile pages and all that good stuff as well. So we'll just keep this at “20”, because 20 user statuses is a good number to start with, for a start. But just understand you can change this. You can make it 15 per page. You can make it 30 per page, whatever you want it to be. We'll keep it at 20 for now.
Designing the Background
And then we could come in here and we could actually change the design of our background so we can change the border of it if we wanted. And we could create a nice little border in between each one, if you'd like. And then we can come in here, we could change the design of the corners, the shadow, we could add shadow on it.
Then finally we can change the background color. So I'm going to change the background color to this white. And I'm going to change the text. Now, we're going to change the background color to something different. We're going to change the background color to this pale or blue right here. And we'll have the text become black, just like that. And then what will happen is this is our main repeater, And it will become uniform down the page. So this is where the status will actually go.
We have to remember that we will have a like button and a comment button available. So people can actually click into the status. But again, I didn't show you how to set up the liking system or the commenting system yet. So I'm going to show you how to at least get the statuses page set up. So we have that there, and I will show you how this works.
I just want you to know when creating the status page, it's literally that simple. Like we pretty much just built our status page. We didn't go super in depth because we don't have the liking system or the commenting system built out yet. That will require a lot more attention to the page. But to actually just get a basic status page for user generated content up.
Let me give you an example. Say you have a Facebook type or Twitter type website. So I want to post a status, like I showed you in the last video. By posting a status what will happen is that status will show up on this page. So we have it set up to where the content here, which I'm about to show you how that works will display each unique status. So it's not like one status is going here. And then the rest of these are just going to say, fourth item, fifth item, all that no, these different ones will actually disappear and when a new status is uploaded, it'll appear in this list, same design, same function. So that's kind of cool.
Connecting the Data
I’m going to show you how we connect the data now. So what we'll do is we'll click on this and we'll “Connect to data”. Again, we want it to “UserStatuses dataset” and it's going to connect to “Status (Text)” because that's how the user posts, if you remember from the last video.
So now what happens is when a user posts it'll post right here, I'm going to “Save” this and then I'm going back and I'm going to show you how this works. It's literally that simple, guys. And I'm going to show you right now, how we're going to do that. So if we go to “View Site”, if we click our status button here, let's post our status. “I am feeling funky fresh today!”, “POST STATUS” takes us to our status page.
You can see the different statuses that I've already posted and you can see that other people, you guys watching this video. I didn't even know this because I haven't been monitoring. This site have actually come on here and utilize this status page because if you've noticed guys, this site is technically published. So if you want to come in here and mess around with it, after each video you can. So someone came in here and wrote, “Hey, love your videos”, whoever wrote that.
Thank you very much! Thumbs up for you! Guys let's throw a thumbs up for the people that actually took initiative, came to the site to actually test it out. That's awesome! We can see some people come in here and posted that, but you can see how the status has come up. So I just posted “I am feeling funky fresh!” someone came in and posted “Hello”. Someone wrote, “Hey love your videos”. Someone wrote “Feeling”. And then this is from the original video that I posted, I wrote these two statuses.
If I show you again and we went back to it, let me just add a little back button here on our statuses page for the time being just so we can go back. I'm just going to add a “Button”. If we come in here, add a button right there, change it to “HOME”. I'm adding this button guys. So that way, once we're redirected to that status page, it'll actually take us to the homepage. So that way we have a way to get back to the homepage to post again, which I'm going to show you how to actually organize everything in a future video as well.
But if we go here, I post another status. “I am so happy to see you are utilizing this website! BTW… I love coffee!” by the way, I love coffee, “POST STATUS”. Now watch this, bam! Just like that status posted. That's how it works guys. And what'll happen is once it hits 20 of these, because we set it to 20, it'll stop posting in a column on this page. And that's when we need to create pagination.
So that's when we need to either create load more or next page, something like that. That's why that's needed. So you have to determine how many statuses you want posted here. You can see, we already have one, two, three, four, five, six, seven statuses on this page. And that's what it looks like. Again, you could determine how big your statuses are and how the look and feel are, but this is how the basic status page looks. This is how it's laid out.
Conclusion
If this video helped you guys out, let's throw a thumbs up down below. It's much appreciated subscribe, if you haven't subscribed already to the Wix Training Academy. And don't forget to comment if you have any questions at all, I'm here to help.
Last but not least, head over to wixtrainingacademy.com and once you're there, click on this little “ACADEMY” button here and let's get you signed up for the free. Yes, the free Wix Training Academy guys, totally free to you! No cost at all! Tons of Wix training content on there, I built out for you. And also there will be a checklist from today's video in the Wix Training Academy within the next day or so, that will help you follow along and determine what you need to do. So that way you can check stuff off as you're building a social network.
One last thing I wanted to run by, I had someone comment on the last building a social network in Wix video, if at the end of it, I can put all of the videos I've created in this series together into one big video to show you how to build a social network through and through.
Now, for any of you that have been watching this series, these videos are not short, so that that'll be like several hours of video into one video, is that something you guys would like to see? If so comment down below. Thumbs up, the more thumbs up I get for that, the more I know that that's something you're interested in.
Just a thought so I can combine all of the little videos I've done in this series into one super long video to show the ultimate how to build a social network in Wix long length video. If that's something you're interested in, please let me know. I would love to do that. If you guys are interested in some custom web design work, private consulting, let me know, email down below in the description, feel free to email me. We can get started on that.
It's been a pleasure today. I'm having fun with this, I hope you're having fun! More exciting statuses stuff to come next week. I think next week, we'll focus on user generated image statuses. So having your users post images that can go along right here with your text status, and then we'll get into adding the profile picture on each status here and getting into the more intricate design of this statuses page, liking system, commenting system, stuff like that.
I hope you're excited to go along with the ride here and I've had a blast so far. Thank you guys for tuning into this one! Don't forget to like, comment, subscribe and head over to Wix Training Academy and get enrolled in Wix Training Academy. Thank you guys very much! I will catch you on the next one!