[JoyFreak] Social Profiles

[JoyFreak]

JoyFreak submitted a new resource:

[JoyFreak] Social Profiles - Get a little more creative with this visual flair.

Live example: Gaming Forum

Description
This guide will run you through on how to get a little more creative and create a visual flair by displaying a Font Awesome icon on your social profiles. This is an improvement that was released in XF 2.2 and here we will walk through the various social media profiles you can use and display in a number of places, without having to install a single add-on.

Guide

1. Create a custom user...

Read more about this resource...

 

[ekempter]

I added LinkedIn as a custom user field per the instructions above. How does my new custom field get included in your add-on / stylesheet?

Facebook also doesn't appear to work when clicked. On inspection, there doesn't appear to be a URL. Twitter works. My new LinkedIn isn't there.

 

[JoyFreak]

I added LinkedIn as a custom user field per the instructions above. How does my new custom field get included in your add-on / stylesheet?

Facebook also doesn't appear to work when clicked. On inspection, there doesn't appear to be a URL. Twitter works. My new LinkedIn isn't there.

You need to follow every step for every social profile you'd like adding. The Value display HTML field is your output for the social profile. So you'll need to update the URL part accordingly, as follows:

For LinkedIn, this is what should be in your Value display HTML:

<a href="https://www.linkedin.com/in/{$value}/" target="_blank" data-xf-init="tooltip" title="{$value}"><i class="fab fa-steam-square fa-2x" style="color:#66c0f4"></i></a>

For Facebook:

<a href="https://www.facebook.com/{$value}/" target="_blank" data-xf-init="tooltip" title="{$value}"><i class="fab fa-steam-square fa-2x" style="color:#66c0f4"></i></a>

If you follow the steps carefully, you shouldn't have any problems and it should work fine. If you are still facing issues, please, either here or via PM, provide me with your forums URL/member profile where the issue persists and I can take a deeper look.

 

[ekempter]

Would you please update the linkedin icon in your example? I tried swapping steam with linkedin but no icon renders.

 

[JoyFreak]

<i class="fab fa-linkedin"></i>
Source: https://fontawesome.com/icons/linkedin?style=brands

 

[ekempter]

I successfully created the linkedin custom user field and it appears in the message info. I also gave permissions to admin to view the gamer selections. Linkedin does not appear within the user profile banner. How is your add-on recognizing the new custom user field? All of the add-on custom user fields appear within style properties and they appear within the profile banner when checked (enabled).

 

[ekempter]

My objective was to add a linkedin link with icon into the member profile banner. I had hoped to do this using the
[AH] Gamer Profiles 3.0.0 add-on but that isn't easily achievable without an add-on modification.

I was able to achieve my objective by modifying the member_view template. Please note that ideally this should be accomplished with an add-on and it is likely my code below can be improved upon. Thanks to JoyFreak for assistance with the LInkedin URL.

After:
                            <xf:if contentcheck="true">
                                <div class="memberHeader-blurb">
                                    <dl class="pairs pairs--inline">
                                        <dt>{{ phrase('last_seen') }}</dt>
                                        <dd dir="auto">
                                            <xf:contentcheck><xf:useractivity user="$user" class="pairs--plainLabel" /></xf:contentcheck>
                                        </dd>
                                    </dl>
                                </div>
                            </xf:if>

Add:
                             <xf:if contentcheck="true">
                                <div class="memberHeader-blurb">
                                    <dl class="pairs pairs--inline">                      
                                        <dd><xf:contentcheck>
                                            <xf:if is="{$user.Profile.custom_fields.ah_linkedin}">
                                                <a href="https://www.linkedin.com/in/{$user.Profile.custom_fields.ah_linkedin} /" target="_blank" data-xf-init="tooltip" title="{$user.Profile.custom_fields.ah_linkedin}"><i class="fab fa-linkedin fa-2x" style="color:#0E76AB"></i></a>
                                            </xf:if>
                                            </xf:contentcheck>
                                        </dd>
                                    </dl>
                                </div>
                            </xf:if>

 

[Pardal]

My objective was to add a linkedin link with icon into the member profile banner. I had hoped to do this using the
[AH] Gamer Profiles 3.0.0 add-on but that isn't easily achievable without an add-on modification.

I was able to achieve my objective by modifying the member_view template. Please note that ideally this should be accomplished with an add-on and it is likely my code below can be improved upon. Thanks to JoyFreak for assistance with the LInkedin URL.

After:
                            <xf:if contentcheck="true">
                                <div class="memberHeader-blurb">
                                    <dl class="pairs pairs--inline">
                                        <dt>{{ phrase('last_seen') }}</dt>
                                        <dd dir="auto">
                                            <xf:contentcheck><xf:useractivity user="$user" class="pairs--plainLabel" /></xf:contentcheck>
                                        </dd>
                                    </dl>
                                </div>
                            </xf:if>

Add:
                             <xf:if contentcheck="true">
                                <div class="memberHeader-blurb">
                                    <dl class="pairs pairs--inline">                     
                                        <dd><xf:contentcheck>
                                            <xf:if is="{$user.Profile.custom_fields.ah_linkedin}">
                                                <a href="https://www.linkedin.com/in/{$user.Profile.custom_fields.ah_linkedin} /" target="_blank" data-xf-init="tooltip" title="{$user.Profile.custom_fields.ah_linkedin}"><i class="fab fa-linkedin fa-2x" style="color:#0E76AB"></i></a>
                                            </xf:if>
                                            </xf:contentcheck>
                                        </dd>
                                    </dl>
                                </div>
                            </xf:if>

Is there any way to display the LinkedIn icon for example in messages with mobile view and in the profile banner using code and without the need for an add-on? Thanks

 

[ekempter]

Is there any way to display the LinkedIn icon for example in messages with mobile view and in the profile banner using code and without the need for an add-on? Thanks

My template modification supports the Linkedin icon in the profile banner in mobile view. It does not require any add-on. Having the icon display in message user info is simply a manner of choosing that option within the Linkedin custom user field.