Social Sharing is a great way to promote your content on social network. It is a must to have tool for every websites. Some professional level websites have special social buttons. You can use a lot of plugins for social sharing. But with plugin, there may be some problem. Everything has benefit and some losing side. The benefit is that, the plugin will show your social share count. If you have a popular websites with a lot of visitors, you should choose the plugin for social share. Sometimes the number of social share encourages the visitors to share more. Also using plugin is super easy. It is recommended for most of the naive users.
No hard feelings ! If you just don’t want to mess up with the coding, plugin is the best solution for you. But which plugin? Thats the Million dollar question. I have discussed it previously in my post here Social Share Buttons Without Affecting Page Speed. Nothing new. Same things everywhere.
I have tested a lot of Plugins. But you can’t do the experiment with your site. Every time you add a plugin, it adds a Table and some data to database. Even you delete the plugin the data is stored in the database. They keep it, if you have add the plugin later 🙄
Remember: Slow load times have higher bounce rates.
Quick tips to find out how much js you are using:
Cklick on Right button of your mouse, Click on view page source. Press Ctrl+Fand search for .js.
Below is some of my tested Plugin:
Add Twitter, Facebook Like, Google plus one Social share
Floating Social Bar
Floating Social Bar only loads scripts when necessary. None of the social media scripts are loaded when the page is loaded. Instead we show a replica image with all the counts. We use the socialite script to only load social buttons when the user brings their mouse over the button. Thats why it is useful. I have tested it and works fine. Download Floating Social Bar
Some Plugins that I don’t recommend: rtSocial, Digg Digg, Share Buttons by AddToAny etc.
Recently I have come through this plugin. Flare is a simple yet eye-catching social sharing bar that gets you followed and lets your content get shared via posts, pages, and media types. It is now the Most Wanted Plugin. I have also tested it and recommended to my friends.
This plugins appears after visitors scroll down to see more content. The only thing that bothering me is, it appears in left side of mid column. It would be better in the left side of left sided primary sidebar. I am not so much geeky guy. SO I cant fix that. Not also trying. Better to use in below post content.
Flare allows you to:
- Add a Follow Me widget – place widgets on your site with links to your social networks to get more followers.
- Configure multiple share icons for some of the most popular sharing services like Twitter, Facebook, Stumble Upon, Reddit, Google+ and Pinterest! More coming soon!
- Easily order your icons, customize their icons’ appearance
- Control which post types your Flare appears on
- Display your Flare at the top, bottom, left or right sides of your post content
- Flare displayed on the left and right of your post follow your visitors down the page as they scroll and conveniently hide when not needed
Watch this video below to See
Responsive Test of Flare Plugin with Genesis Framework and Eleven40 Child theme:
I have an intentions to write a full post about Flare. You can select the Flat Metro style Share button and Follow button in Setting page of Flare. If you have any problem, let me know in the comment.
So after a lot of buzz, I am now coming to main topic. To add Flat colorful social share buttons with hover effect that changes color on Hover.
We will use Header and footer plugin to use the code below every post. Download and install Header and Footer from above link. Go to Dashboard > Settings > Header and Footer.
Click on Post Content > Copy codes from below and paste it in “Code to be inserted after each post“.
For Thesis Theme users, we will need Thesis Open Hook. I have done this in my Thesis 1.8.5. Not sure in case of newer version of thesis theme. Also you can choose Header and Footer instead of Open Hook plugin.
Go to Dashboard > Thesis > Thesis hooks. Add the below code in Thesis_hook_after_post
Add Some Style and Colorful buttons:
Insert the below codes in your child themes style.css or custom.css in Thesis theme.
Changing in the Margin and Padding will add some more style.
The Below code will render following style:
border: 1px solid black;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3) background: #30a146;
background: linear-gradient(top, #30a146 0%, #249334 100%);
background: -moz-linear-gradient(top, #30a146 0%, #249334 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #30a146), color-stop(100%, #249334));
So How does it look in your site.
If you are using it, let me know. I will add the site URL as Demo !