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 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 appropriate title attribute. Icons use muted color which changes when user hovers over them.

Hover over
Facebook icon in the sidebar

Hover over
Twitter icon in the sidebar

Elegant uses scalable vector icons from Font Awesome. You can instantly customize the icons by tweaking the CSS. This customization can range from changing size and color to adding drop shadow.

How to configure the widget

Define SOCIAL in your SOCIAL is list of tuple. Each tuple has two items, title and URL.

SOCIAL = (('Twitter', ''),
    ('Github', ''))

In this example, SOCIAL has two tuples. First tuple is ('Twitter', ''). First element of the tuple is the title Twitter and second element is the URL.

Elegant picks icons from Font Awesome. Title of the tuple, for example Twitter, is used to decide the icon of the social media profile.

Twitter will use fa-twitter CSS class, Github will use fa-github, and Facebook will use fa-facebook.

You can see all the icons and their corresponding CSS classes in Font Awesome documentation.

How to customize the icon

What if the icon of your social media site is not available in Font Awesome? What if the CSS class name does not follow fa-<title> convention, for example Stack Exchange is different from fa-stack-exchange? What if you want to use fa-youtube-play in place of fa-youtube for your YouTube profile?

The solution is to add a third element to the tuple. CSS class name.

SOCIAL = (('Twitter', '', 'twitter-square'),
    ('Youtube', '', 'youtube-play'))

This third element is optional. It should be equal to the Font Awesome CSS class that you want to use for the social profile, minus the fa part from the CSS class name.

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.


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