Bloggers use different tools to connect with their readers, engage in discussion with them, and create a loyal following of fans. These tools range from fully blown social web apps like twitter to old school RSS feeds.

Bloggers usually add a social media widget to their blog which has links to all their social media profiles; inviting readers to engage with them else where on the web too. Most social widgets are loud and obtrusive. Their colors and placement takes away readers’ attention from the actual content.

Profiles in the Sidebar

Elegant understands the importance of readers engagement but it makes sure not to push author’s “online social karma” down readers’ throats.

Elegant displays the widget in the sidebar. Each icon is a link to a social media profile with an optional title attribute. Icons use muted color which changes when user hovers over them. On hover, icon is also scaled up in size.

Here is an example of hovering over LinkedIn icon.

Hover over LinkedIn in the Sidebar

Following image shows these icons in color.

Social Profiles in color

These SVG icons are Super Tiny. Most of them have sizes less than 500 bytes, and none of them exceeds 1 K bytes in size. This gives you increased website speed.

How to configure the widget

Define SOCIAL in your SOCIAL is list of tuple. Each tuple has three items,

  1. key, case insensitive, must match one of the available keys
  2. URL
  3. title, optional
    ('Email', '[email protected]', 'My Email Address'),
    ("Github", "", "Elegant Github Repository"),
    ("RSS", SITEURL + "/feeds/all.atom.xml"),
    ("Facebook", ""),

If title is defined then it is used to populate title attribute of the link.

Available Keys

  1. Calendar
  2. Email
  3. Facebook
  4. Github
  5. GitLab
  6. Gmail
  7. Goodreads
  8. HackerNews
  9. Instagram
  10. Keybase
  11. LinkedIn
  12. Mastodon
  13. Reddit
  14. RSS
  15. Spotify
  16. StackOverflow
  17. Telegram
  18. Twitch
  19. Twitter
  20. Wire
  21. YouTube

How to customize Social Profile Label

By default, Elegant labels social profile section as Contact. You can change this label by defining a new variable SOCIAL_PROFILE_LABEL in your file.


Missing Social Profile?

What if the icon of your social media site is not available?

Migrating from font-awesome to SVG icons opened up a whole lot of possibilities. We are not limited to icons provided by the [font-awesome] project. Instead, we can use any SVG icon.

If you icon of your favorite site is missing then feel free to open an issue. We will add it for you as long as a SVG icon is available for it.

Like this post? Share on: TwitterFacebookEmail

Talha Mansoor Avatar Talha Mansoor is the creator and lead developer of Elegant theme.

Keep Reading


Last Updated


Connecting With Your Readers


Stay in Touch

Get New Release Alert