Adding Social Icons To User Banner / Member Card

Adding Social Icons To User Banner / Member Card 0.1

No permission to download

Dan Hawkins

Active member
Dan Hawkins submitted a new resource:

Adding Social Icons To User Banner / Member Card - userbanner membercard social icon links

Anyone else who wants to do this:

View attachment 80858

Firstly, create your Custom User Fields:

View attachment 80860

End up with something like this:
View attachment 80859

In the template "message_user_info"

View attachment 80861

Add your custom field names e.g.


<div align="centre" class="socialmemcard1"><br>
<xen:if is="{$user.customFields.facebook}">
<a href="{$user.customFields.memFacebook}" target="_blank" ><img...

Read more about this resource...
 
Looks nice, I will give this a try. Shouldn't you make the download a folder of the required images though? I can understand if this is just html/css edits, but wouldn't people be using the bandwidth from your server if they just implemented the code as is? It's better all around to place the images on your own server anyhow.
 
Hi Dan, thanks for this. I've done it I guess exactly as described, but have this problem:

Now I have both custom fields twice. Once with images as it should be and below that the same custom user field with text. Any idea why? Thanks :)
 
Untick this option, as you are referencing them without it:

upload_2014-9-14_22-47-37.webp

Located under Appearance > Styles > *STYLENAME* > Style Property Groups > Message Element
Or search in the admin cp searchbox:

upload_2014-9-14_22-49-20.webp




FAILING that > Untick the option under the custom field it'self (if you are using the custom fields to appear for other custom fields)

upload_2014-9-14_22-50-30.webp
 
OK, sorted, thanks a lot :)

Last question I guess >


Postbit.webp

Any idea how to move those two user custom fields higher? Too much unused space for my liking there :/
 
What's your URL - I'll take a look at the code

Do you have any un-needed <br>'s in the code? (maybe from the code in my original post)
 
This is really nice. Works well. One issue might be a XF issue. I entered FB and Twitter. I received back nothing. I noticed that the custom fields for FB and Twitter have already been created but it seems that they also are a callback -- so I guess unless there is a verification done, these user fields are not going to work. Not sure how to correlate this with an FB or Twitter login or whether there is an alternative.

Regardless, many thanks for your generosity in sharing how you accomplished this.
 
This is really nice. Works well. One issue might be a XF issue. I entered FB and Twitter. I received back nothing. I noticed that the custom fields for FB and Twitter have already been created but it seems that they also are a callback -- so I guess unless there is a verification done, these user fields are not going to work. Not sure how to correlate this with an FB or Twitter login or whether there is an alternative.

Regardless, many thanks for your generosity in sharing how you accomplished this.
You could just remove the call back queries (get a backup) and use those, I use facebook - still have the call back queries too and it works fine for me :)
 
You could just remove the call back queries (get a backup) and use those, I use facebook - still have the call back queries too and it works fine for me :)
Dan - thanks for the response. I am wondering whether turning off the verification for Facebook and Twitter may affect other things (like login and join with FB and Twitter.) So I turned them off anyway. :)

I solved the issue - bug in the code. There are capitals to begin Facebook and Twitter. Make them lower case and everything works perfectly. ;) I still had to uncheck the verification for FB and use the full URL there with only user name for Twitter. But it works. Grand! :)
 
Top Bottom