How to Add Additional Social Media Links to Your Member Profile

Introduction

In this tutorial, you will learn how to add any kind of icon to the basic information form and display it on the member profile page.

Here are some examples of social media icons that are not included by default in Brilliant Directories:

• Telegram
• Skype
• Twitch
• Dribbble
• Reddit

As you can see, the possibilities are endless. So, let's dive in and get started!

Prerequisites

To proceed with this tutorial, you will need to have the icon images ready. We recommend obtaining the icons from the Flaticon as they offer a wide range of free and high-quality icons.

For this example, we will download the Skype icon.

Step 1 - Uploading the Icon Image to the media manager

The first step is to add the icon image to our directory.

• Go to your managemydirectory, and on the left sidebar, click on 'My Content,' and then select the "Media Manager" option.

• Click on the blue button "upload Image or PDF", either drop the icon image or click to select it from you files .

• After uploading, click on "Back to All Media" then right-click on the icon image and select "Copy URL". Please save that URL as we will need it later.

Step 2 - Adding the Social Link Option to the Member Form

• On the left sidebar go to Toolbox and then click on Form Manager option.

• By default, the form is Listing - Contact Details - Member, search for that form put the mouse over Actions then click on Customize.

• Inside the form we will need to add a new field. Scroll down to where the social links are displayed and click on the Add Field + button.

• When you click on that button a new field will show up.

• Now, let's set up the new social link ⬇️

1. Select the "Website URL" option.

2. Replace "Skype" and "/images/skype_icon.png" with the appropriate name and URL path saved in step 1.

Skype <img className="img-dashboard-label" src="/images/skype_icon.png" />

3. Here we add the variable name, in my case "skype" (lowercase).

4. Click on the icon to expand the remaining options.

5. Add any desired help text for users to see.

6. On this option, please disable all toggles except the "input view".

7. Finally, save the form.

Step 3 - Edit the member profile widget to display the new link

To display the new icon in the member profile, follow these steps:

• Please, go to the left sidebar on your dashboard, click on "Toolbox" then select "Widget Manger".

• Search for the widget "Bootstrap Theme - Member Profile - Display Website Links".

• Click on "Actions" and then select "Customize", in case your widget is custom, click on the "edit" button.

• Inside the widget, we need to add the HTML & PHP code to enable the functionality. The code required to make it work is below:

Note: replace "skype" for the your variable name and the "src" of the image with the path we saved on the first step.

<?php
if ($user['skype'] != "" && $subscription['social_link'] == 1) { ?>
	<a class="network-icon image-icon weblink nopad"<?php if ($subscription['nofollow_links'] == 1){ ?>rel="nofollow"<?php } ?> href="<?php echo $user['skype']; ?>" target="_blank" title="skype"><img loading="lazy" class="talign img-circle" width="75" height="75" alt="skype<?php echo $user['full_name']; ?>" src="/images/skype_icon.png"></a>
<?php } ?>

• Just copy and paste the code below line 102:

• Now, we just need to save the widget.

Step 4 - QA

The most simple and exciting step 🚀

• Login with any member account.

• Go to "Basic Information".

• Scroll down and cross your fingers. if everything went well, the social link option should be visible.

• Please, fill in the input.

• Then go to the member's profile and the social icon will be there.

Conclusion

Congratulations, your members have a new social link on their profile page.

By following the steps above you can add any social icon you need, I know that can be hard depending on your experience with the platform and web development. However, we encourage you to give it a try.