Building A Social Network in Wix | Part 8 | Adding Statuses to Profile Pages

Hello, YouTube, Michael Patrick Strauch here. And today I'm bringing you part eight of Building A Social Network in Wix the non-coding founder's guide.

Guys, I appreciate you joining me on today's episode, and I'm excited to dive in a little bit more on the profile pages and talk about how we're going to add those user statuses. We just created to the profile pages because obviously a big deal to creating a social network is having individuals with the profile page that shows not only their information, but the stuff they post. We all want to see that when logging onto a social network, I would assume. So that's what we're going to focus on in today's episode.

Before we do that head over to wixtraining academy.com and go ahead and click Academy to register for my free trainings, webinars, all that good stuff. It's all in one dashboard set for you, but I am launching a very new service today and it's on this hire me tab. So a lot of you have asked you want more personalized training help, but you don't want to pay a full web development team to build out your entire website.

Well, I've curated a special service just for that. So if you're in that position, click that hire me tab. If you're tired of watching just training videos, but you want some more personal help click that, hire me tab, just go check out that new service. I think you're going to like it. I talked to many people about getting this done and I'm excited to present it to you.

Now let's hop into today's video.

Adding Statuses to Profile Pages

So guys, we're back to you're at our social network. And today we're going to focus as I told you on the profile page. So if we go back up to pages here, home, we see our user profile data. This is our dynamic profile page. So we'll click that. And this is where we left off last time guys. So you can see it's pretty, pretty plain still.

So there's, there's not much happening. Because we kind of started the design of the profile page and then focused on other aspects that are leading up to finishing out the profile page. But one of those big aspects was designing the user statuses feed. So where people actually post their user statuses.

Well, today, what we're going to do is we're going to bring that feed into the profile page. So in order to do that, we're going to utilize about the same ideals and features that we did to build out the status page itself, but in the profile page.

So first things first, what we're going to do is we're going to go here to add, and then we're going to go down to lists and grids, and we're going to choose a repeater. Now I know I chose a certain repeater for the status page. I'm going to change the design of that. But what you need to do is you need to come in here and you need to pick a repeater. That's going to work best for your guys's user profile page.

So you come in here, you'll add it, just like that. You could extend the length of it, however you'd like, and then let's drag that one out. They'll all drag out with it. So we'll just call it good right there. And then obviously, as I told you guys, whatever you do to this top repeater will affect all the repeaters. So if I click that off, they'll all disappear. You could change the text, just like that. And bam. So there's that right there. So that's our repeater.

Now, if I want to change the design of this, you would just come in and change background. You could change the design, you could change the overall design of it. So the border of the shadows, the corners, all that good stuff, but I'm just going to leave the design as is right now. Because I still have to nail down a design I'm going for on this social network. I'm more showing you guys how the functionality works in the backend of things, the design, the mastermind, the art artistry, the creative that will be on you guys. You are building a social network, you know your market, you know exactly how you're supposed to design for your audience. So I'll leave that to you.

Now that we've got our repeater in here, what we have to do just like the user statuses page is we have to get our data set in here. So we have to pull in the dataset. So that way there's a connection between the user profile status database and the actual profile page. So it pulls the information from that database to correspond. So what we're going to do is we're going to go to add, and then we're going to go down to database right here.

We're going to click dataset, and then you could put the data set wherever you'd like on the page. Once again, the dataset is not actually visible when the site is published, both of these up here are invisible. They're just there in the editor for you to see, so you can make the connections.

So then we're going to click double click on the dataset. We're going to choose to collect user statuses because that's where our statuses lie. And right now we're going to keep it in read-only mode. As we go a little deeper into this series, I'm going to show you guys, once we go into actual editing the statuses on the status page, I'll show you how to edit the status on the profile pages well but for right now, we're going to keep it read-only at one point in the near future. This will be read and write right now, read only. And then you could choose how many items you'd like to display on the user status is pay around the profile page. I'll just say 15 for right now. And then the next step is a vital step.

This is something that even in some of my previous tutorials, a lot of people have not been able to understand. So in order for you to display the user status, that that in particular person that's logged in posted, you have to filter it. So what I mean by that is if you just tap this page as is, you would have every single person's user status filter into this repeater right here, regardless of who was logged in or whose profile was, and you don't want that.

So to avoid that, what you have to do is once you add the dataset, we're going to one, come down here to repeater. We're going to connect the data. So we're going to choose connect it. And we're going to use the user statuses dataset. So we connect the data there. We're going to connect the text to status. And then if you want to make this bigger, you can also have it. So you add the picture as well, as we talked about, you can add pictures as well.

Guys, just let you know, we are at the end of this, going to fine tune it and go over each in particular little detail. Because obviously there's going to be little things that come up here and there, as we're building this out, we either have to go back to, or I promised we'd go back to, and I will show you how to do all that as well. But we have that right there, just like that.

Now we have to connect that piece of data to the user statuses dataset and we have to connect it to image source connects to image from the user stats is dataset. And now you can see there'd be an image in each one. We're going to have to add an if then statement later on in this series, because we don't want it to be an image each time, if it's blank, we want it to be either an image and a status or status, no image or both, or just an image. So that's how we're going to have to fix that.

The final part of this guys, I know this is actually pretty easy is we have to go back to the dataset. We'd go in here. And now we must click filter, add filter. Not that we click add filter. We choose owner. So the owner of whoever posted that status is logged in. So whoever posted that in particular status, the owner must be logged in for that user to see it so that user's information will pop up on this page. But that logged in user must be the creator of that content. And then we click add filter. So now this dynamic page will change according to the logged in user, in the content they have posted. Does that make sense? I hope it does guys.

Conclusion

That's what I'm here to show you in today's video, how to put those user statuses in here, we'll dive a little deeper likely into profile pages and possibly even start the commenting and liking system in our next series video. So I appreciate you spending some time with me today. Drop a like down below if you have found this video helpful. Don't forget to subscribe here at Wix Training Academy and turn that notification bell on to never miss a Wix training video.

And finally guys comment down below and last but not least head over to wixtrainingacademy.com. And if you guys have some questions, feel free to ask in the comment session guys. That's what it's there for. I'm here to help you click the Academy to register for my free content and click this. Hire me tab to check out my very new service I curated just for you. I appreciate the time guys. I look forward to catching on the next one. And if I don't see you before, have a happy Thanksgiving.

Thank you guys very much, Michael Strauch done.