--- title: Adding the Following:Follower list function slug: world-sdk-guide/adding-the-followingfollower-list-function docTags: createdAt: 2024-09-02T08:34:13.135Z --- Using the Social API of ZEPETO.Module, World Creators can load users' friend lists. World Creators can also follow new users or unfollow users they followed. ## How to Install Please first install Window → Package Manager → ZEPETO.World Package version 1.21.0 or later. Then, install the ZEPETO.Module Package. ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-Wz2C2dqGFGqCbVVSSIPMd-20240904-102425.png) ## Using a pop-up friend list prefab ZEPETO.Module Package offers UI prefabs for you to easily create the following/follower list. 1\) In the Project panel, go to Packages > ZEPETO.Module > Social > Runtime > UI > \_Resources > Prefab folder. 2\) Out of the prefabs in the folder, drag and drop FollowScrollView\.prefab into the scene. ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-O4iKxlFAR1PnhIB3tihQo-20240904-102425.png) :::hint{type="danger"} **❗️ Caution** When the EventSystem object does not exist in the scene, this feature may not run correctly. Add the object by going to GameObject > UI > EventSystem. ::: 3\) Click the Play button to see the friend list popup appearing on the screen. ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-wuTuSReoqVNrJL8dKL9Be-20240904-102424.png) - FollowScrollView\.prefab, which creates the friend list popup, uses the FollowScrollView component to load and display the friend list and total user count on the screen. - Information configured in the FollowScrollView component is as follows. ### Follow Scroll View Component | 1 | Height | The value for the vertical distance between user info cells in the scroll view | | - | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------- | | 2 | Load Count | Cell Load Count: The number of cell data loaded when the scroll view is scrolled. Configuring a high number for this value may affect the loading speed. | | 3 | User Info Prefab | The UI prefab for individual cells for displaying the user information | | 4 | Total Count Prefab | The prefab that displays the total user count. The text can be automatically translated and displayed in multiple languages. | | 5 | Canvas Scaler | Can select the Canvas appearance for friend list UI. Can use premade Canvases. | | 6 | Vertical | Register vertical screen UI prefab including the Follow View Controller. | | 7 | Horizontal | Register horizontal screen UI prefab including the Follow View Controller. | | 8 | Background | Semi-transparent black screen that appears when friend list UI is displayed | ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-Rs2UaG2rdrjme7GvMZ7Ci-20240904-102424.png) If the world screen is in horizontal mode when the friend list is generated through FollowScrollView, FollowScrollView\_Landscape is applied. - When the screen is in vertical mode, FollowScrollView\_Portrait is applied. - Information configured in the FollowView Controller component applied to FollowScrollView\_Landscape and FollowScrollView\_Portrait is as follows. ### Follow View Component | 1 | Follwer Tab | Follower tab group | | -- | --------------- | --------------------------------------------------------------------------- | | 2 | Following Tab | Following tab group | | 3 | Scroller | Friend list scroll view | | 4 | Empty Image | An image displayed when the friend list is empty | | 5 | Loading Spinner | An image displayed while the friend list is loading | | 6 | Close Button | A button to close the friend list popup | | 7 | Title | A title for the friend list popup | | 8 | Follower | A button text for displaying the active/hidden state of the follower panel | | 9 | Following | A button text for displaying the active/hidden state of the following panel | | 10 | Empty Text | A text displayed when the friend list is empty. | | 11 | Panel | Whole UI panel | ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-f_av14jLQGwf9i4eoDQKa-20240904-102425.png) As shown below, the cell where the friend information is displayed has the Follow Cell View and UserInfo Cell View components applied. The information in each component is as follows. ### User Info Cell View Component | 1 | View Name | Username text | | - | ------------------ | -------------------- | | 2 | View Profile | User profile image | | 3 | Btn Follow | Follow user button | | 4 | Btn Un Follow | Unfollow user button | | 5 | View Badge | Badge icon image | | 6 | View Greeter Badge | Greeter icon image | | 7 | View Follow | Follow button text | | 8 | View Is Following | Unfollow button text | ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-wgpc9WgekaAgCz8nEB1NY-20240904-102425.png) :::hint{type="success"} 👍 **Tips** - ZEPETO Text inherits UnityEngine\_UI.Text and provides some additional features for UI convenience within the world. The texts can be easily edited in the FollowScrollView Prefab edit mode. - The badge icons displayed next to the user name are icons used to mark special users such as ZEPETO creators and greeters. ::: ## Modifying the friend list popup prefab UI You can customize your friend list by modifying the UI elements. Select a prefab in Packages and drag and drop the prefab into the Assets folder to copy the prefab. ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-ld8TafVCthzl4LCNJOgBE-20240904-102425.png) :::hint{type="success"} **👍 Tips** Prefabs cannot be modified while in the Packages folder, but they can be modified once they are copied into subfolders of the Assets folder. :::