Project

General

Profile

Actions

Feature #407

closed

Display profile social media links as icons

Added by Boone Gorges over 13 years ago. Updated over 12 years ago.

Status:
Resolved
Priority name:
Normal
Assignee:
Category name:
BuddyPress (misc)
Target version:
Start date:
2010-11-22
Due date:
% Done:

0%

Estimated time:
Deployment actions:

Description

Should be pretty easy to tap into the profile loop for this.

If anyone (Chris?) would be willing to provide a mockup for how this might be laid out, it'd give me a nice head start in my implementation.


Files

Profile_SocialMedia_Icons.png (117 KB) Profile_SocialMedia_Icons.png Chris Stein, 2011-08-18 11:46 AM
SocialMediaIconsProfile.zip (426 KB) SocialMediaIconsProfile.zip Chris Stein, 2011-09-14 12:19 PM
SocialMediaIcons.png (125 KB) SocialMediaIcons.png Chris Stein, 2011-11-18 03:57 PM
Screen_Shot_2011-12-09_at_10.38.25_AM.png (15.5 KB) Screen_Shot_2011-12-09_at_10.38.25_AM.png Matt Gold, 2011-12-09 10:39 AM

Related issues

Related to CUNY Academic Commons - Support #1174: Notify members of invalid twitter entryRejectedBoone Gorges2011-09-15

Actions
Actions #1

Updated by Boone Gorges over 13 years ago

For reference, from Scott's original ticket: " Change the existing social media hyperlinks to icons with changeable title - maybe the default title could be "Find Me Online:""

Actions #2

Updated by Boone Gorges about 13 years ago

  • Target version changed from 1.2 to 1.3

Bumping this to the next feature release.

Actions #3

Updated by Boone Gorges almost 13 years ago

Are we still interested in doing this? It would be really helpful if someone could give me a quick mockup. I'm imagining something like

Find Me Online ==========
[Twitter-icon] [Facebook-icon] [Youtube-icon] etc

where you can click the icons and be taken to the user's profile on the sites in question. The corresponding items would then be removed from the standard profile display. Ie, you would no longer see

Twitter | http://twitter.com/boone
Youtube | http://youtube.com/boonebgorges
etc

Actions #4

Updated by Chris Stein almost 13 years ago

I'm headed into the fathers day weekend but I will take a look at this and the archive group thing next week.

Actions #5

Updated by Matt Gold almost 13 years ago

The subscription options plugin on our blogs does something like this; it may be useful as a model. See the box in the upper right corner of the news blog for an example.

Actions #6

Updated by Chris Stein over 12 years ago

Sorry, this has been on my back burner for a while. See the attached image with two options. One up by the large picture and the other in line with the other information.

The icons you see are part of a free set that we could use.

Actions #7

Updated by Chris Stein over 12 years ago

A couple of other thoughts. If you're interested Boone I did it with HTML/CSS instead of photoshop so I can show the relatively simple CSS I used and get the icon images.

And do we have or need to add another ticket related to
1. The number of social media sites listed as options in the profile
2. Depending on the number we want to add, modifying the form so it doesn't get too long (like using some javascript to allow adding them more dynamically).

Actions #8

Updated by Matt Gold over 12 years ago

Thanks for your work on this, Chris! I don't have a strong preference either way, though I have a slight inclination towards having them at the bottom rather next to the picture.

I agree that we should think about how many we want as well as an interface for adding services that's not too overwhelming. Perhaps we can use ajax dropdowns to hide the social media options and thus keep the profile form, at first blush, relatively clutter free.

The only other note I have is that the icons should be group roughly by type, so that video accounts, like YouTube and Vimeo, appear together, as do social networks, like facebook and g+.

Actions #9

Updated by Boone Gorges over 12 years ago

Looks nice, Chris!

I think it's a nice idea to think about how users will fill in the relevant information, but it really deserves a separate ticket. I don't want this change - which can be applied immediately - to be bogged down in a redesign of the whole profile edit/registration process.

IMO we should also separate out the question of whether the Follow Me links should be shown in the member header in addition to in the profile itself. I can see arguments in both directions, but in any case I think it's a separate question from making the suggested change to the profile field itself.

icons should be group roughly by type

+1

Chris, can you provide the markup and styling that you used for this? If you can do that, I'll do the conversion to dynamic PHP that is filled in by BP profile info.

Actions #10

Updated by Boone Gorges over 12 years ago

Chris, you said that you had some markup and/or image files to accompany the work you've done here. Can I have it?

Actions #11

Updated by Chris Stein over 12 years ago

Boone, sorry. Should have gotten this to you earlier, a lot has happened.

I'm attaching a zip file with all of the stuff I used so a bit of explanation is required. In the HTML file do a search for socialmedia
That is the class name I applied to a div for the top set and a td element for the other set. For the bottom set I actually added two td's, one for the Follow Me text and the other for the icons. The icons are just img files in a p element in both places. The CSS is in css/custom.css file under a comment heading of "Social Media Icons" Just a few lines there pretty simple stuff.

the icon files themselves are located in the images folder. There are actually some other styles in there right now. I need to track down the site where I got the icons and then I'll post just those files again and we can decide if those icons look the part and have a license we can live with.

Actions #12

Updated by Boone Gorges over 12 years ago

I've almost finished a first round of implementation. I decided to build it into a fairly flexible plugin: https://github.com/boonebgorges/bp-social-media-profiles I can't easily show you a working copy on the Commons theme until our servers have been upgraded, but in the meantime a few questions/thoughts.

1) Because I'm distributing it, I need to have icons that are verified as having the correct license. I need either: an open source license compatible with the GPL (GPL, MIT, Apache), or CC-0.
2) If we're going to have a "Follow me" section in the profile itself, where should it be? At the top? In the middle?

Actions #13

Updated by Chris Stein over 12 years ago

Hi Boone
Here is a link to a GPL set of icons
[[http://designersdigest.co/archive/free-elegant-social-media-icons-set/]]

I'll have to think about the positioning but my first thought is either at the top or bottom. I think it could be better thought out when we redesign the profile page in general anyway so I'm not too concerned about it now.

Actions #14

Updated by Boone Gorges over 12 years ago

  • Status changed from Assigned to Reporter Feedback

A rough version of this is now appearing on cdev: http://cdev.gc.cuny.edu/members/boonebgorges/profile/public/

The icons I'm using here are not particularly great, but I was building the plugin for distribution, so I needed to have something I was positive would be compatible with a GPLv2 license. For use on our site, we can swap these out with whatever icons you'd prefer.

Play around with your own profile a bit. Most of the fields have some generous logic built in, so that, eg, you can enter 'boone' or '@boone' or 'http://twitter.com/boone' and it should work.

Actions #15

Updated by Chris Stein over 12 years ago

Looks good Boone. We can talk about the actual icons later. Maybe I can get together some sets to share somehow and we can all vote on them. Feel free to nudge me on that if it's not done and we get closer to the 1.3 release date.

I'm attaching an image with a couple of comments. They are on the design (spacing) and a piece of missing info I saw. Those are just based on looking at your page. Will add some to mine later and look at that piece.

Actions #16

Updated by Matt Gold over 12 years ago

So, it looks like this is about to go live in 1.3. Boone, is there anything you can do, using Chris's suggestions above, to improve the look of the icons? Certainly, a bit more spacing between icons would be a good start. I'd also love to see a more attractive (and square, not circular) set of icons, if possible. Maybe we should discuss this tomorrow?

Actions #17

Updated by Chris Stein over 12 years ago

A GPL'd set that is square.

Actions #18

Updated by Matt Gold over 12 years ago

Chris, did you mean to attached a file or include a link?

Actions #19

Updated by Boone Gorges over 12 years ago

I made some changes. New icons, spacing. Won't show up on your cdev profile until saved. Here's mine: http://cdev.gc.cuny.edu/members/boonebgorges/profile/

Actions #20

Updated by Matt Gold over 12 years ago

Thanks, Boone. The icons look much better. The spacing issue remains, though. Please see the attached screenshot. Is there any way to add more space between icons?

Actions #21

Updated by Boone Gorges over 12 years ago

Is there any way to add more space between icons?

I already did. I can't reproduce your screenshot on any browser. Could you try a hard refresh?

Actions #22

Updated by Chris Stein over 12 years ago

This link was supposed to be in that post, sorry.
http://19eighty7.com/icons

Actions #23

Updated by Boone Gorges over 12 years ago

  • Status changed from Reporter Feedback to Resolved

Marking complete. Open a new ticket for improvements please.

Actions

Also available in: Atom PDF