Skip to Main Content

Links - with JSON

Let people discover all your great content in one place by adding links to your social media account and other resources.

BioDrop Profile links example

  1. Find your json file in the data folder using your GitHub username, for example data/sarajaoude.json

If you need help on how to edit this file, please see the Editing Guide

  1. Add a collection called links at the root of your json file which will contain one or more objects that must have three fields name, url and icon.

This is an example of a single link object:

{
  "name": "Follow me on Twitter",
  "url": "https://twitter.com/SaraJaoude",
  "icon": "FaTwitter"
}
fieldtyperequireddescription
namestringtrueThe display name for the button
urlstringtrueFull url to the resource
iconstringtrueThe icon you would like displayed. We support the following icon sets: Fa and Si from React Icons.
groupstringfalseOptional property to group links together, any without a group will be added to the end in a new group called "Others". If no groups are used then no groups are displayed including "Others".

To add more links add another object inside the links collection.

For example:

  "links": [
    {
      "name": "Follow me on Twitter",
      "url": "https://twitter.com/SaraJaoude",
      "icon": "FaTwitter"
    },
    {
      "name": "Follow me on Instagram",
      "url": "https://twitter.com/EddieAndSaraExplore",
      "icon": "FaInstagram"
    }
  ]
  1. Now you can commit your file and create a Pull Request, for more details please see Editing Guide

Clicks on these social shortcuts that match any of your links will also increment their respective counters

Grouping your Links

To place your links into groups, you can use labels such as Business or Socials Primary in the group property.

"links": [
 {
      "group": "Business",
      "name": "Business: DevRel Services",
      "url": "http://eddiejaoude.io",
      "icon": "FaLink"
    },
    {
      "group": "Socials Primary",
      "name": "Twitter: Follow me",
      "url": "https://twitter.com/eddiejaoude",
      "icon": "FaTwitter",
      "color": "#00ACEE"
    },
    {
      "group": "Socials Primary",
      "name": "YouTube: Learn more about Open Source",
      "url": "https://youtube.com/eddiejaoude",
      "icon": "FaYoutube",
      "color": "#FF0000"
    }
]

Here is how the links with grouping will appear on your Profile: BioDrop profile with grouped links