Feature #1996
closedSocial Network Profiles in BP Groups
Added by Michael Smith almost 12 years ago. Updated almost 9 years ago.
0%
Description
Add the option to include social network profiles to groups. Individuals can add any of the following to their personal profiles:
Twitter
IM
LinkedIn Profile Link
Flickr ID
YouTube ID
Facebook Profile Link
Delicious ID
Skype ID
FriendFeed ID
For groups the following might be practical:
Twitter
Flickr ID
Youtube ID
Google + ID
Facebook Group Link
Delicious ID
In additional to listing social network profiles, it would be interesting if WP plugins could be adapted to Groups allowing various types of activity to be posted directly to a social network.
Files
| Screen Shot 2015-04-30 at 3.11.27 PM.png (15.8 KB) Screen Shot 2015-04-30 at 3.11.27 PM.png | Samantha Raddatz, 2015-04-30 05:14 PM | ||
| cuny_icons.png (137 KB) cuny_icons.png | Samantha Raddatz, 2015-05-19 01:24 PM |
Updated by Matt Gold almost 12 years ago
- Category name set to BuddyPress (misc)
- Status changed from New to Assigned
- Target version set to 1.3.17
This sounds like a fantastic idea to me. I wonder whether we might release it as a plugin -- something like "Enhanced Group Profiles"
Updated by Boone Gorges almost 12 years ago
- Target version changed from 1.3.17 to 1.5
- Estimated time set to 10.00 h
This is a large undertaking, as it will involve a ton of UI work, and syncing between user profiles and groups. 1.5 is the earliest possible milestone.
Updated by Boone Gorges over 11 years ago
- Assignee changed from Boone Gorges to Chris Stein
- Severity set to Normal
Michael, Chris, can you give details on how you imagine this working?
- Who can add social network profiles to groups? Any member of the group, or just admins? What does the UI look like for adding the items?
- Where do we show the links? Are they displayed as icons?
- Are we doing anything else with the data, like pulling tweets etc into the activity stream?
Assigning to Chris for the time being to get some UX feedback.
Updated by Boone Gorges almost 11 years ago
- Target version changed from 1.5 to 1.6
Updated by Boone Gorges about 10 years ago
- Category name changed from BuddyPress (misc) to Groups (misc)
Updated by Chris Stein about 10 years ago
- Target version changed from 1.6 to 1.7
Pushing this to the next release to give more time to contemplate. Some initial thoughts on Boone's questions
- Who can add social network profiles to groups? Any member of the group, or just admins?
First thought is that in the general spirit of the Commons we allow any member to make the change.
What does the UI look like for adding the items?
We have two UI's for individuals. You can just add a username in top area that then shows an icon and you can add Twitter and RSS feeds in the bottom area. If we just link to the sites then probably something similar to the top part of profiles.
- Are we doing anything else with the data, like pulling tweets etc into the activity stream?
The possibility of showing actual information from the sites is interesting but will require some thought on UI and functionality that I can't do for 1.6. We might want to put that in a separate ticket since it also may involve taking another look at how we do it for individuals and deciding if it makes sense to have a similar interface or not.
- Where do we show the links? Are they displayed as icons?
Yes, and on the home page, somewhere around the group title and image
Updated by Boone Gorges over 9 years ago
- Assignee changed from Chris Stein to Daniel Jones
Dan - Moving this over to you. Can you read over this thread and see if you have enough information to start thinking about a prototype?
Updated by Daniel Jones over 9 years ago
Sorry to be a little slow on this - I can start working on a prototype.
I think what I'll do is add a page to the options for the group that'd work a lot like the fields that individuals use to add social media accounts, then display the icons under the group image.
What do you think are the best files to look at so I can get a sense of how to store the information about social media accounts?
Does that sound like a good way to start?
Updated by Boone Gorges over 9 years ago
I think what I'll do is add a page to the options for the group that'd work a lot like the fields that individuals use to add social media accounts, then display the icons under the group image.
Excellent - sounds perfect.
What do you think are the best files to look at so I can get a sense of how to store the information about social media accounts?
I guess I don't have any concrete examples, but I'll give you a general tip to check out the BP_Group_Extension API, detailed here: http://codex.buddypress.org/developer/group-extension-api/ In this case, you'll probably be disabling access to the main display screen of your BP_Group_Extension, but using its logic for settings screens. Use groups_update_groupmeta() and groups_get_groupmeta() for storing and fetching the social network profile data on a group-specific basis.
We have similar functionality for user profiles, powered by the plugin bp-social-media-profiles. It's probably way too complex for what we need here. But you may want to check out bp-social-media-profiles/includes/site-data.php to borrow some sanitization logic and get a list of networks to include. (In fact, if possible, you may want to use that list of networks and sanitization callbacks directly, so that we don't have two versions of Twitter username sanitization floating around our codebase.)
Updated by Boone Gorges over 9 years ago
- Target version changed from 1.7 to 1.8
Updated by Daniel Jones over 9 years ago
I think I have a workable prototype up and runnning here - runs well on my machine at least. Created a new branch, changeset at https://github.com/cuny-academic-commons/cac/commit/9adf930abb2ad5b2348f16e5dfcdd5d82f8baf76
Right now you can enter an ID for all 6 of the accounts listed above, but it's only displaying icons for facebook, twitter, and google plus since those are the only ones that have dashicons: I think we'll have to use a different icon font if we want Flickr, Youtube, and Delicious. The icons are also pretty small, but I wanted to hold off on styling until others had a chance to look at this so far.
Updated by Daniel Jones over 9 years ago
Also realizing it'd be good if it only displayed icons for accounts that were entered - can add that in for next time. Sorry!
Updated by Boone Gorges over 9 years ago
Dan - Thanks a lot for working on this. Initial thoughts:
- As you note, let's please only display icons for those fields that are actually filled in.
- I like that you're using Dashicons, but I think this is a case where we want consistency. bp-social-media profiles has a full set of icons. Could you switch to those instead?
- You're not doing any of the sanitization logic (like removing @ from Twitter handles). That's probably OK for a first pass - if users enter their data incorrectly, hopefully they'll notice that the URL generated is incorrect and fix it themselves - but it's something we might think about for the future.
- We should be displaying the admin tab during 'create' as well as during 'edit'.
Updated by Daniel Jones over 9 years ago
- Estimated time deleted (
10.00 h)
Great, thanks Boone!
So I changed over to the bp-social-media profiles icons. It seemed like the easiest thing was to just copy over the icon files that we needed, instead of trying to call functions in the bp-social-media-profiles plugin, which I ran into trouble with.
I made it so the icons only show up when something's been entered for them. I also added calls to esc_attr() on save, which I had overlooked before.
Also - on my machine the tab is showing up on create as well as edit already - is it not showing up for you?
Lastly - should I try to add in some sanitation logic now or should we hold off on that for a little while?
Thanks again!
Updated by Boone Gorges over 9 years ago
- Status changed from Assigned to Testing Required
- Assignee changed from Daniel Jones to Samantha Raddatz
Thanks, Dan! This is in good enough shape for Sam and Chris to start taking a look at it.
Sam and Chris - I've activated the plugin on cdev. Here's an example of a group that has some data entered (never mind that it's wrong) http://cdev.gc.cuny.edu/groups/cac-community-team-project-planning/. You can see the admin interface by going to a group where you're an admin, then going to Manage > Social Media Accounts. UX and design feedback welcome. Sam, the ticket is now assigned to you for preliminary thoughts.
Dan, I think we can hold off on the field validation for now. Let's come back to it if we get reports that people are getting confused by it.
Updated by Samantha Raddatz about 9 years ago
Here's an example of a group that has some data entered (never mind that it's wrong) http://cdev.gc.cuny.edu/groups/cac-community-team-project-planning/. You can see the admin interface by going to a group where you're an admin, then going to Manage > Social Media Accounts. UX and design feedback welcome. Sam, the ticket is now assigned to you for preliminary thoughts.
From what I can tell, it's no longer viewable on cdev (which is understandable). If you can add it back in I'll take a look asap!
I'm really sorry it took me an overly long time to take a look at this one.
Updated by Boone Gorges about 9 years ago
Hi Samantha - I've switched out cdev to show the correct branch. Please have a look.
Updated by Samantha Raddatz about 9 years ago
Looks good! Good work, Daniel.
Do we want the social media links to open in new tabs so that users aren't taken away from the Commons?
You're not doing any of the sanitization logic (like removing @ from Twitter handles). That's probably OK for a first pass - if users enter their data incorrectly, hopefully they'll notice that the URL generated is incorrect and fix it themselves - but it's something we might think about for the future.
I think this, or the field validation, would be worth implementing before release, if it's not too much trouble. I wouldn't trust users to check their resulting URLs/links. Totally up to you guys, of course.
Updated by Daniel Jones about 9 years ago
So sorry this slipped by me! Good ideas, Sam. I've added some basic sanitization to saving the account IDs - trimming whitespace on either side and @-symbols from Twitter and 's from Google accounts, and made it so that the links open in a new tab.
I've been working on this in its own branch - Boone can you merge it into 1.8.x as you see fit?
Updated by Daniel Jones about 9 years ago
Sorry there was a small error in the first code I uploaded, but I just fixed it: https://github.com/cuny-academic-commons/cac/commit/d40e80f06a20bd8c9903cef3e57ebe212eda346b
Updated by Samantha Raddatz almost 9 years ago
Boone - If you can push this into cdev I'll take a look asap. Thanks!
Updated by Samantha Raddatz almost 9 years ago
Thanks for making those changes, Daniel!
With the sanitization in place I think you can shorten the instructions at the top of the page to just:
"Use these fields to enter your handles and IDs for the group's social media accounts."
All the links work for me except YouTube, which is currently set to "https://www.youtube.com/user/samantharaddatz". My channel can be reached through "https://www.youtube.com/samantharaddatz" instead.
If we find that there's any confusion over what to enter in these fields that can't be fixed by sanitization, we could add text at the start of each box (in addition to validation), similar to the screenshot I'm attaching here.
The icons are all broken for me on cdev, so I'm not sure if they're awesome or not, but I imagine they are.
Updated by Boone Gorges almost 9 years ago
I've fixed the icon paths in https://github.com/cuny-academic-commons/cac/commit/e44fba60a3703ee63c43d0c75caec8956474c0e4, and they're now working on cdev.
Sam, I like your suggestions for changing the input field, but I think it's late to make this change for 1.8. Can you please open up a separate ticket? Or perhaps we could piggy-back on the improvements being discussed for user profiles in #2613.
I'm leaving this ticket open in case Sam or anyone else has any last styling suggestions.
Updated by Samantha Raddatz almost 9 years ago
The Google+ icon is still broken for me, but they're great otherwise!
All the links work for me except YouTube, which is currently set to "https://www.youtube.com/user/samantharaddatz". My channel can be reached through "https://www.youtube.com/samantharaddatz" instead.
This still seems to be directing to the wrong base-URL.
I'll tack the input field suggestion onto #2613 so we're reminded to make any style-decision changes in both locations for consistency. Thank, Boone!
Updated by Daniel Jones almost 9 years ago
Okay Youtube links should be working now! https://github.com/cuny-academic-commons/cac/commit/717ea546e37576962457e7feb93cc3d006384859
Updated by Boone Gorges almost 9 years ago
Dan, can you also take a look at the Google+ icon issue? If you need to throw something into bp-social-media-profiles, please do so.
Updated by Daniel Jones almost 9 years ago
Sure thing - just had to rename a file. Should work now. https://github.com/cuny-academic-commons/cac/commit/4d0940e90aed554ffd9b3e05f5261a861d56aa8f
Updated by Samantha Raddatz almost 9 years ago
Thanks, Daniel! Changes look good. All clear from my POV.
Updated by Boone Gorges almost 9 years ago
- Status changed from Testing Required to Resolved
Thanks, everyone!
Updated by Samantha Raddatz almost 9 years ago
- File cuny_icons.png cuny_icons.png added
- Status changed from Resolved to Assigned
- Assignee changed from Samantha Raddatz to Daniel Jones
Reopening this based on feedback from Steve that it's unclear that these icons are links to the group's social media account pages rather than 'share' buttons.
Attached is a mock-up of my recommendation, which is to put the social media icons above the personal email settings and add the text 'Follow this group on:' above it.
Updated by Daniel Jones almost 9 years ago
Implemented! Also added in your earlier suggestion about changing the description on the admin page for the social media accounts: https://github.com/cuny-academic-commons/cac/commit/61f959145d369248fde0dbecf5f22c304311b668
Updated by Boone Gorges almost 9 years ago
Thanks, Dan - this looks good. Sam, can you please verify on cdev before we close this ticket?
Updated by Boone Gorges almost 9 years ago
- Status changed from Assigned to Resolved