GetSocial Activity Feed UI

Activity Feed UI Features

Let your users read and interact with GetSocial Activity Feeds in minutes, not days with prebuilt Activity Feed UI.

GetSocial Activity Feed UI features:

  • Read, post, comment, like activities on the feed out of the box.
  • Announcements integrated into the feed. Each time user opens the feed, announcements stays on top.
  • Tags and user mentions boost interactions between users on the feed.
  • Social push notifications re-engage users by giving them one more reason to get back to the application.
  • Friends feed powered by Social Graph allows you to personalize feed content by displaying only posts from friends.
  • Filter feed by post author or tags.
  • Read-only mode for the one-way communication. Create feeds with the most important announcements.
  • Customizable behaviour. Customize what happens on buttons, avatars and user mentions clicks.
  • Content reporting. Let your users report toxic content and moderate it from the Dashboard.
  • Full theming support.

Supported Content Types

Activity Feed UI allows a user to post text with user mentions and tags. Posting images, GIFs and videos are not supported from the UI.

To post images, GIFs and videos use Activity Feed API, Dashboard or ping us in the support channel to request the feature.

Prerequisite

Open UI

To open Activity Feed UI and set custom view title:

1
2
3
4
// Use convenience method GetSocialUi.createGlobalActivityFeedView() to open default gloabal feed
GetSocialUi.createActivityFeedView("my-feed-id")
    .setWindowTitle("My Feed View Title")
    .show();
1
2
3
4
// Use convenience method GetSocialUi.createGlobalActivityFeedView() to open default global feed
GetSocialUi.createActivityFeedView("my-feed-id")
    .setWindowTitle("My Feed View Title")
    .show()
1
2
3
4
// Use convenience method [GetSocialUI createGlobalActivityFeedView] to open default global feed
GetSocialUIActivityFeedView *activityFeedView = [GetSocialUI createActivityFeedView:@"my-feed-id"];
activityFeedView.windowTitle = @"My Feed View Title";
[activityFeedView show];
1
2
3
4
// Use convenience method GetSocialUI.createGlobalActivityFeedView() to open default global feed
let activityFeedView: GetSocialUIActivityFeedView = GetSocialUI.createActivityFeedView("my-feed-id")
activityFeedView.windowTitle = "My Feed View Title"
activityFeedView.show()
1
2
3
4
// Use convenience method GetSocialUi.CreateGlobalActivityFeedView() to open default global feed
GetSocialUi.CreateActivityFeedView("my-feed-id")
    .SetWindowTitle("My Feed View Title")
    .Show();

You will see following view on the screen:

GetSocial Activity Feed UI

To learn more visit GetSocial UI guide.

Open comments view

To open comments list for the activity feed post directly from code. It may be useful when you want to handle click on the notification on your own.

By default, we put feed view to the navigation stack. To omit feed view in navigation stack, use setShowActivityFeedView method:

1
2
3
GetSocialUi.createActivityDetailsView(activityPostId)
    .setShowActivityFeedView(false) // false will omit feed view in the navigation stack
    .show();
1
2
3
GetSocialUi.createActivityDetailsView(activityPostId)
    .setShowActivityFeedView(false) // false will omit feed view in the navigation stack
    .show()
1
2
3
GetSocialUIActivityDetailsView *detailsView = [GetSocialUI createActivityDetailsView:activityPostId];
[detailsView setShowActivityFeedView:NO]; // NO will omit feed view in the navigation stack
[detailsView show];
1
2
3
let detailsView: GetSocialUIActivityDetailsView = GetSocialUI.createActivityDetailsView(activityPostId)
detailsView.setShowActivityFeed(false) // false will omit feed view in the navigation stack
detailsView.show()
1
2
3
GetSocialUi.CreateActivityDetailsView(activityPostId)
    .SetShowActivityFeedView(false) // false will omit feed view in the navigation stack
    .Show();

User feed

You can specify user ID to show activity feed with only user’s posts.
For example, to show activity feed of current user:

1
2
3
4
String userId = GetSocial.User.getId();
GetSocialUi.createActivityFeedView("my-feed-id")
    .setFilterByUser(userId)
    .show();
1
2
3
4
val userId = GetSocial.User.getId()
GetSocialUi.createActivityFeedView("my-feed-id")
    .setFilterByUser(userId)
    .show()
1
2
3
4
GetSocialId userId = [GetSocialUser userId];
GetSocialUIActivityFeedView *view = [GetSocialUI createActivityFeedView:@"my-feed-id"];
[view setFilterByUser:userId];
[view show];
1
2
3
4
let userId: GetSocialId = GetSocialUser.userId()
let view: GetSocialUIActivityFeedView = GetSocialUI.createActivityFeedView("my-feed-id")
view.setFilterByUser(userId)
view.show()
1
2
3
4
string userId = GetSocial.User.Id;
GetSocialUi.CreateActivityFeedView("my-feed-id")
    .SetFilterByUser(userId)
    .Show();

Friends feed

You can show Friends Activity Feed, that contains activities posted by you and your friends:

1
2
3
GetSocialUi.createActivityFeedView("my-feed-id")
    .setShowFriendsFeed(true)
    .show();
1
2
3
GetSocialUi.createActivityFeedView("my-feed-id")
    .setShowFriendsFeed(true)
    .show()
1
2
3
GetSocialUIActivityFeedView *view = [GetSocialUI createActivityFeedView:@"my-feed-id"];
[view setShowFriendsFeed:YES];
[view show];
1
2
3
let view: GetSocialUIActivityFeedView = GetSocialUI.createActivityFeedView("my-feed-id")
view.setShowFriendsFeed(true)
view.show()
1
2
3
GetSocialUi.CreateActivityFeedView("my-feed-id")
    .SetShowFriendsFeed(true)
    .Show();

Read-only mode

If you want to hide controls, that allows a user to post, comment, like or dislike activities, you can set UI to the read-only mode:

1
2
3
GetSocialUi.createActivityFeedView("my-feed-id")
    .setReadOnly(true)
    .show();
1
2
3
GetSocialUi.createActivityFeedView("my-feed-id")
    .setReadOnly(true)
    .show()
1
2
3
GetSocialUIActivityFeedView *view = [GetSocialUI createActivityFeedView:@"my-feed-id"];
[view setReadOnly:YES];
[view show];
1
2
3
let view: GetSocialUIActivityFeedView = GetSocialUI.createActivityFeedView("my-feed-id")
view.setReadOnly(true)
view.show()
1
2
3
GetSocialUi.CreateActivityFeedView("my-feed-id")
    .SetReadlOnly(true)
    .Show();

Also, you can restrict user from doing some actions with UI Action Listener. Check the guide for Android, iOS or Unity.

Filter by tags

To show Activity Feed with activities that contain at least one tag from provided list:

1
2
3
GetSocialUi.createActivityFeedView("my-feed-id")
    .setFilterByTags("cat", "cats", "kitten")
    .show();
1
2
3
GetSocialUi.createActivityFeedView("my-feed-id")
    .setFilterByTags("cat", "cats", "kitten")
    .show()
1
2
3
GetSocialUIActivityFeedView *view = [GetSocialUI createActivityFeedView:@"my-feed-id"];
[view setFilterByTags:@[@"cat", @"cats", @"kitten"]];
[view show];
1
2
3
var view: GetSocialUIActivityFeedView = GetSocialUI.createActivityFeedView("my-feed-id")
view.setFilterByTags(["cat", "cats", "kitten"])
view.show()
1
2
3
GetSocialUi.CreateActivityFeedView("my-feed-id")
    .SetFilterByTags("cat", "cats", "kitten")
    .Show();

Handle interactions

Button clicks

To handle clicks on the action buttons:

1
2
3
4
5
6
GetSocialUi.createActivityFeedView("my-feed-id")
    .setActionListener((Action action) -> {
        // Handle your action on button click.
        return processAction(action);
    })
    .show();
1
2
3
4
5
6
GetSocialUi.createActivityFeedView("my-feed-id")
    .setActionListener { action ->
        // Handle you action on button click.
        return@setActionListener processAction(action)
    }
    .show()
1
2
3
4
5
6
GetSocialUIActivityFeedView *activityFeedView = [GetSocialUI createActivityFeedView:@"my-feed-id"];
[activityFeedView setActionHandler:^BOOL(GetSocialAction *action) {
    // Handle your action on button click.
    return [self handleAction:action];
}];
[activityFeedView show];
1
2
3
4
5
6
var activityFeedView: GetSocialUIActivityFeedView = GetSocialUI.createActivityFeedView("my-feed-id")
activityFeedView.setActionHandler { (action) -> Bool in
    // Handle your action on button click.
    return self.handleAction(action)
}
activityFeedView.show()
1
2
3
4
5
6
GetSocialUi.CreateActivityFeedView("my-feed-id")
    .SetActionListener (action => {
        // Handle your action on button click
        return processAction(action);
    })
    .Show();

Read how to handle actions on Android, iOS and Unity.

Check how to add action buttons to the activity feed post.

Avatar clicks

You can customize avatar click for any desired action, for instance:

  • Open user profile;
  • Suggest adding a user to friends;
  • Show some in-app information for a user;
  • Send a message for a user, etc.

Listener Is Not Invoked On Application Avatar Click

Avatar click listener is invoked only by click on the user avatar, not application one. Reach us via Intercom or support@getsocial.im if you need this functionality.

To handle avatar clicks:

1
2
3
4
5
GetSocialUi.createActivityFeedView("my-feed-id")
    .setAvatarClickListener((PublicUser user) -> {
        // Handle avatar click
    })
    .show();
1
2
3
4
5
GetSocialUi.createActivityFeedView("my-feed-id")
    .setAvatarClickListener { publicUser ->
        // Handle avatar click
    }
    .show()
1
2
3
4
5
GetSocialUIActivityFeedView *view = [GetSocialUI createActivityFeedView:@"my-feed-id"];
[view setAvatarClickHandler:^(GetSocialPublicUser *user) {
    // Handle avatar click
}];
[view show];
1
2
3
4
5
var view: GetSocialUIActivityFeedView = GetSocialUI.createActivityFeedView("my-feed-id")
view.setAvatarClickHandler({ user in
    // Handle avatar click
})
view.show()
1
2
3
4
5
GetSocialUi.CreateGlobalActivityFeedView()
    .SetAvatarClickListener(user => {
        // Handle avatar click
    })
    .Show();

Mention clicks

To handle click on mentions:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
GetSocialUi.createActivityFeedView("my-feed-id")
    .setMentionClickListener((String mention) -> {
        if (mention.equals(MentionClickListener.APP_SHORTCUT)) {
            // Handle click on the app mention
        } else {
            String userId = mention;
            // Handle click on the user mention
        }
    })
    .show();
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
GetSocialUi.createActivityFeedView("my-feed-id")
    .setMentionClickListener { mention ->
        if (mention.equals(MentionClickListener.APP_SHORTCUT)) {
            // Handle click on the app mention
        } else {
            val userId = mention;
            // Handle click on the user mention
        }
    }
    .show()
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
GetSocialUIActivityFeedView *activityFeed = [GetSocialUI createActivityFeedView:@"my-feed-id"];
[activityFeed setMentionClickHandler:^(NSString *mention) {
    if ([mention isEqualToString:GetSocialUI_Shortcut_App]) {
        // Handle click on the app mention
    } else {
        NSString *userId = mention;
        // Handle click on the user mention
    }
}];
[activityFeed show];
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
let activityFeed: GetSocialUIActivityFeedView = GetSocialUI.createActivityFeedView("my-feed-id")
activityFeed.setMentionClickHandler({ mention in
    if (mention == GetSocialUI_Shortcut_App) {
        // Handle click on the app mention
    } else {
        let userId = mention
        // Handle click on the user mention
    }
})
activityFeed.show()
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
GetSocialUi.CreateActivityFeedView("my-feed-id")
    .SetMentionClickListener(mention => {
            if (mention == MentionShortcuts.App)
                // Handle click on the app mention
            } else {
                string userId = mention;
                // Handle click on the user mention
            }
    })
    .Show();

Tag clicks

You can use tag click for various purposes, for instance to open Activity Feed filtered by tag.

To handle click on the tag:

1
2
3
4
5
GetSocialUi.createActivityFeedView("my-feed-id")
     .setTagClickListener((String tag) -> {
         // Handle click on the tag 
     })
     .show();
1
2
3
4
5
GetSocialUi.createActivityFeedView("my-feed-id")
    .setTagClickListener { tag ->
        // Handle click on the tag
    }
    .show()
1
2
3
4
5
GetSocialUIActivityFeedView *activityFeed = [GetSocialUI createActivityFeedView:@"my-feed-id"];
[activityFeed setTagClickHandler:^(NSString *tag) {
    // Handle click on the tag
}];
[activityFeed show];
1
2
3
4
5
let activityFeed: GetSocialUIActivityFeedView = GetSocialUI.createActivityFeedView("my-feed-id")
activityFeed.setTagClickHandler({ tag in
    // Handle click on the tag
})
activityFeed.show()
1
2
3
4
5
GetSocialUi.CreateActivityFeedView("my-feed-id")
    .SetTagClickListener(tag => {
        // Handle click on the tag
    })
    .Show();

Customizing UI

Activity Feed Theming

GetSocial UI library provides three themes to choose from, and API customizes look and feel to match your app style.

UI elements customization reference is below. To learn how to configure UI visit customization guide for Android, iOS or Unity.

UI Customization Reference
UI Customization Reference
UI Customization Reference
UI Customization Reference

Next steps

Give us your feedback! Was this article helpful?

😀 🙁