Custom Social Share Buttons With Author Information

By Kieran Hunter

Default social share buttons are ugly, and so are some author boxes. So I have come up with a much cleaner design to show both these elements in your blog posts.

Or you can just grab the social media share buttons codes and have them on their own.

Author boxes typically show the authors image, along with bio information and links to the blog author’s social media pages.

This is great if you have a  website with multiple users, we need to see who wrote the post, and see their personal information.

I realised for personal sites we don’t need most of this information. As the site just relates to one person, it’s all about scrapping what we don’t need.

You don’t need this bloated style author box with more social media icons all over the place. So here is ‘Custom Social Share Buttons With Author Information’.

See the Pen Responsive Author and Social Media Box by Kieran Hunter (@kieranfivestars) on CodePen.

Note: These are share buttons, not links to social media pages, which makes them cool and useful.

The standard share buttons looks terrible however way you display them. Here I have tried to make them look more appealing, and not take up any extra room.

This is also beautifully responsive, to see the live version in action view the CodePen version and you can see how its all made.

If you would like to implement this yourself in WordPress you can download or copy the files from my Github.

If you have any trouble or questions / comments, feel free to get in contact.

See full list of social share URL’s.

Facebook Open Graph

For the Facebook share button to work you will need to implement the Facebook Open Graph meta tags. If not then Facebook will grab any information from the post or page.

The Facebook Open Graph grabs the correct content from the page such as featured image, title and description.

I use the Yoast SEO plugin for the Facebook Open Graph, as it’s built in and does it all automatically very nicely. And it’s one of the best plugins you could download for WordPress.

You can also do this for the Twitter and Google meta data too.

Leave a comment