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.
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.
Following image shows these icons 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 pelicanconf.py. SOCIAL is list of tuple. Each tuple
has three items,
key, case insensitive, must match one of the available keysURLtitle, optional
SOCIAL = (
('Email', '[email protected]', 'My Email Address'),
("Github", "https://github.com/Pelican-Elegant/", "Elegant Github Repository"),
("RSS", SITEURL + "/feeds/all.atom.xml"),
("Facebook", "https://facebook.com/ExamplePage/"),
)
If title is defined then it is used to populate title attribute of the link.
Available Keys
CalendarEmailFacebookGithubGitLabGmailGoodreadsHackerNewsInstagramKeybaseLinkedInMastodonRedditRSSSpotifyStackOverflowTelegramTwitchTwitterWireYouTube
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
pelicanconf.py file.
SOCIAL_PROFILE_LABEL = u'Stay in Touch'
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.
