How To Display Custom Social Media Icons On Member Profiles
Every BD website comes with a default contact details form and in this form, members can add their social media links and display them on their profiles.
This is the display on the profile when these fields are filled:
In this article, we will be going over how to create additional social media options for the members to utilize and how to display them on their profiles.
Adding a New Field On the Form
Identify the contact form to edit:
Navigate to the Toolbox --> Form Manager --> Click "Customize" on the preferred form:
In Edit view, click on "New Field" and fill the necessary information as highlighted down below:
VERY IMPORTANT NOTE: Make sure the new social media field added shares the same Display Options as other default social media fields:
It is also important to know that "Field Label Name" and "Database Variable Name" can be changed. We used "Snapchat" as an example on this instance.
Field Type must be "Website Address" if you want this to function like other social media fields.
This is the full code for the font awesome icon that is being used on this example:
<i class=\"fa fa-snapchat-ghost\"></i>
Here is the full list of font awesome icons that can be used:
For displaying purposes, drag this new field all the way down, under the Instagram option:
Click "Save Changes", if this is a default form that is customized for the first time - a module will appear where you can assign a new name and a new variable name for this custom form.
For this example, I changed both variable name and the nickname (display name):
Now we can pick our custom form on membership level settings:
For more information regarding how to create a new form and assign it to the membership levels, please refer to the article down below:
How To Assign Different Member Forms To Various Membership Levels
Our new field is displaying on the form properly in Member Dashboard:
Displaying This New Field On Member Profiles
In order for our new social media field to display on the member profiles like this:
We will have to call this new variable on its respected widget. The information seen above is hardcoded on its widget.
First, identify which widget is being used:
For more information regarding how to locate the widget on the front end via admin bar, please refer to the article down below:
Locating The Widgets Via Admin Bar
Clicking on its name will redirect you to the Widget Manager, click Customize to see the code:
On the code view, scroll all the way down, between LAST closing anchor (</a>) tag and opening php (<?php) tag:
Place this code and click save:
<?php }
if ($user['snapchat'] != "" && $subscription['social_link'] == 1) { ?>
<a class="network-icon blog weblink" style="background-color:#bcbc0c;"<?php if ($subscription['nofollow_links'] == 1){ ?>rel="nofollow"<?php } ?> href="<?php echo $user['snapchat']?>" target="_blank" title="Snapchat"><i class="fa fa-snapchat-ghost"></i></a>This is how our code looks like now:
This is how the profile looks like after the widget is customized and a new link added on the contact details form:
