Hi,
I would like to add social media icons to a social media like platform, so that each user can add links that will be hyperlinked to the social media icons, and that seems doable for me, but it would be great if e.g. there are 5-6 social media icons (input’s) [Google+, email, Facebook, LinkedIn, Instagram, and Twitter], and when the user add only 3 inputs (social media links)-other ones are not displayed on the users profile.
What is good approach to make this happen?
Thanks!
The simplest way to achieve this is to use a repeating group to display the user’s social links, one in each cell. That way if the user only has 3 social links then you’ll only show 3, and you won’t have empty space where the empty ones would be.
What type of content for repeating group goes?
Here’s the best way to do it…
As well as the display, have an additional attribute called ‘Icon’ which is an image type, and upload an icon for each specific social media site (you can get them from sites like this Social media icons - Iconfinder)
Depending on how your app works you may have a flow where the current user can edit and update their profile to include their social links, in which case you’d need to create a new user_social_link (assuming it didn’t already exist), assign it to the current user, set it with the type and link the user input, then edit the current user to add the new user_social_link to the user’s list of user_social_links.
Then set the type of content to 'User_Social_Link) and set the data-source to be the current user’s social-links (or whichever user you want to reference).
Add an image, or group into the repeating group cell, set to display the current cell’s user_social_link’s Type Icon, and use it to trigger a workflow to open an external link, which will be the current cell’s user-social-link’s link.
The repeating group will only display the links that the particular user has, meaning it will be dynamic for each user (if a user only has 1 it will only show 1, if they have 5 it will show all 5 etc. with no empty gaps.).
Thank you for such detailed answer!
I think I am missing one bit:
On one hand there is repeating group connected well with data (Custom data type [User Social links] and Option set [Social Option] with icons, and there is a new custom data type-field for User [Social links - List of user social links], and all of that as shown above connected well.
Then on the other hand, as the application has a workflow for the user to edit profile, which is a pop-up window where I’ve additionally added input for each social media link (content format: text), and have created each social link input new field at the data types for user that is updated when user changes input at the “profile edit”.
I thin we are speaking here about the 4th step mentioned above, could you please clarify this part?
Thank you once again!
Sure, as I mentioned above, the exact steps you use for this will depend on how your app functions and your existing processes, and there are multiple ways to achieve the same results…
But basically, once you have a user created and signed up, you’ll need to create social links for them.
One way (perhaps the easiest way) would be to automatically create all the user_social_links for a new user when they first sign up (one for each social platform you want to include), and add them to that user’s list of user_social_links. That way you only ever need to make changes to them when the user edits them (you could use autobinding for this to keep things simple).
Then just filter the repeating group to only show links for that user, where the link is not empty.
Thinking about it, that’s probably the easiest way - the only downside is you’ll end up with a lot of ‘empty’ user_social_links in your database.
The other (slightly more complex way) is to only create a new user_social_link whenever a user ads one.
So when they first enter details for a social link, you’d need to create a new user_social_link, then make changes to the user to add it to their list of user_social_links.
It get’s slightly more complex, because you’d only want to do that if the link didn’t already exist, so you’d have to have some conditions set up in your workflows that would check to see if it exists or not, then either create a new one or edit the existing one.
You could probably use a custom state on the edit popup, or on the input to determine whether or not to create a new one or modify an existing one.
That way you’d keep your database less cluttered as you’d only have user_social_links that actually have data in them.
As with most things in Bubble, there are always multiple ways to arrive at the same goal.
But the quickest and easiest way to set this up would be the first option i mentioned.
So create all the user_social_links for the user as part of the user-sign up process. Then you can display them in a repeating group for the user to view and edit in their profile, and use autobinding to make changes on them.
Then, wherever you want to display that user’s social links (only the ones they have), use a repeating group as outlined in the previous post, and filter it to only show that user’s social links where the link is not empty.
If you want to me outline the whole process, let me know and I’ll create a quick workflow and post some screenshots.
Ok, great, thanks! Really helpful!
I’ve been working on this, and learning in meantime, and everything seems great, and what i am seeing is the now connection between user profile and social media links that are in the repeating group and the user lists of social medias that is connected to user social media links that is connected to the social media option.
So there are those two sides, user profile is updating with new social media user input, but not showcasing on the profile, in the repeating group.
Hope this helps and if you can see where is missing a catch, and share with me and us, that would be great! Thanks!
How is the data source set up for your repeating group?
Nice suggestion in this post. Thanks for your valuable.
Ok, that seems right, but without more details, I can’t really say what the issue could be.
If you want to post a link in here to your preview and editor (read-only) I’ll take a proper look when I get a minute.
Social media icons impact your users. It is a very necessary to increase your site visibility.
Created a rest review app. I want to use social media. Created a footer with floating group. Thought I would put icons in footer and attach the social links like I have done with WIX in the past. It was super easy. I found this article but it seems like this is not the right approach. I am not really interested in the amount of accounts of the person logged in or whether they are even signed up for any social accounts. I just want to maybe tweet about a new restaurant opening, or Facebook a picture of a special cocktail at a bar. Need som help please.
I’m not entirety sure what you’re asking (or what your question has to do with this thread)?..
Probably best to start a brand-new thread, as your question is seemingly unrelated to this one, and might confuse other people reading it in the future…
Bubble support pointed me to this forum. Trying to install social icons like the person who you responded to with an insanely amazingly detailed approach. I thought with your knowledge, you would know what to do. Maybe it’s a new thread, maybe it’s not. I don’t even know what a thread is, but with your eye of the needle, I have a better chance of moving forward cause there is nothing else on forum about how to add social icons. Wish I knew bubble as well as you.
Are you for hire
If that’s what you’re trying to do, what’s wrong with the answer I already gave? Is there something specific you didn’t understand?
Although from your previous post, it doesn’t sound like that’s what you’re trying to do at all… it sounds more like you just want some social share buttons… is that right?
When I go visit any company they have a bar with social icons. You can click on the icon and it takes you to the appropriate page. I have a website and adding the social media buttons and attaching their links took all of 5 minutes. Bubble will now host my WIX site and so on Bubble I need to add social media icons and links. That’s what I am trying to do World and if anyone has any ideas, let me know. You have a good day Adam. Thanks for helping Bubblers.
That’s simple (although, like with most things in Bubble, there are probably multiple different approaches to take for this)…
But by far the simplest is this:
Add a link element to your page and check the ‘Show Icon Instead of Text Box’ (if you have a style applied on the element you may not see that option, so either remove the style or apply that setting to the style itself).
Select the icon and style it however you like
Add the link to the social media page
That’s it… it should take about 15 seconds, max… so much faster than the 5 minutes it took you on Wix!..
is there an icon liubrary for social networks inside bubble? or do we have to download the svg and then import it? e.g. for insta, linked,etc
