Back to Top

How to create Social Sharing Buttons with Bootstrap

how-to-create-social-sharing-buttons-with-bootstrap

You all who have blog or site are using social media icons to promote your information, page or website to social networking sites.In this article, I am going to share the ready to use solution with how you can create your own fast and beautiful social sharing button.To take the benefits and allow users to share your links in social networks is necessary. However, you need to sacrifice performance and seriously affect page loading time especially when the user is using the mobile or device which is also not desirable.

What is use of Social Sharing Buttons?

Social networking sites promotion is essential nowadays to get tremendous exposure to your content.

You want to get very easy way to set up social sharing buttons on your website. The first idea comes in mind is let’s use the plugin as it is a very easiest way to install and use. But let me clear you, sometimes plugin break your site or plugin use a javascript which might affect the speed of a website.To solve such problems, Here I come with the article which shows you how you can set up social sharing button without any plugin or any other file.

Bootstrap is the most popular framework and using it you can easily setup icons.Here, I have created the example to use the own social sharing buttons using pure CSS3 which is displayed when you click the button.These social sharing buttons uses the font awesome and bootstrap.And you just need to copy and paste the code, I will explain in the following line.

First create basic HTML structure, In this HTML code, I have to create the two buttons with some transition effect, You can change transition as per your requirement.HTML code is mainly the main div which contain share Button and other social media buttons. You can add more other social media icons/buttons if you require.

Remember, You need to replace the URL, title and media information as per your site details.

How To Create HTML code

Here is the HTML code.Let’s get start quickly with a basic structure and allows you to dive quickly into code.In this HTML code, you might need to replace URL with your specific desired one.Also, you can do some CSS changes as per your theme.

HTML is very simple and easily understandable. I have added button in the main div directly and create an another div within the main div for setting sharing icons.

Now, Let’s see the CSS code is relatively simple. Mostly you don’t need to make any change in CSS.

How to Add some CSS

Here is the CSS code used primarily set your sharing buttons. I have provided basic CSS code, but you can make changes as per your design.

In CSS, I have added color code for social icons but if you don’t want to use, you can remove CSS. Also, you can use your icons or CSS. CSS code is applying the transition effect when sharing icons display especially you click on the share button. I have applied scale and translate effect, but you can use any CSS3 effect.

After adding CSS, you need to add JavaScript code which will give the effect to show and hide the buttons on click event. You can also change the event as per your requirement. I have used the jQuery code so Make sure you have added jQuery core files to work this code as expected.

How to add JavaScript

You can add Javascript code in the head section or footer section of your HTML.

Above code is applying toggle effect on an active class so that class is compulsory. It is removing active class from each tag before applying toggle effect so this code will work if you are using multiple sharing buttons on one page without any conflicts.

By doing this, You will get the Sharing button very easily without any worries about site breaking.This approach emerges less code and more efficiency.You can see the demo on below code. Also, You can view working code on the homepage of a site.

The Final Output

Your turn now! I would love to hear more ideas and thoughts to improve or create social sharing buttons.Do share your creative ideas in the comment section.

Share:
Share on Facebook7Share on LinkedIn0Tweet about this on TwitterShare on Google+0Buffer this pageDigg thisShare on Reddit0

Leave a Reply

Your email address will not be published. Required fields are marked *

Most Popular Posts

How to import user from CSV in WordPress?

Posted on 3 years ago

Bhumi

Mysql String Function FIND_IN_SET( )

Posted on 6 years ago

Bhumi

How to Create a Simple Anti-Spam Captcha

Posted on 5 years ago

Bhumi

JQuery Animation effects

Posted on 5 years ago

Bhumi

Facade implementation in Laravel

Updated 1 month ago

Bhumi

MySQL coalesce() function

Updated 18 years ago

Bhumi

How to use JavaScript Promise API?

Updated 18 years ago

Bhumi

What are Lambdas and Closures in PHP?

Updated 18 years ago

Bhumi

The Reader’s Poll – June 2015

Posted on 2 years ago

Bhumi

The Reader’s Poll – August 2014

Posted on 3 years ago

Bhumi

The Reader’s Poll – June 2014

Posted on 3 years ago

Bhumi

The Readers’ Poll – May 2014

Posted on 3 years ago

Bhumi

The Readers’ Poll – August 2013

Posted on 4 years ago

Bhumi