--> Skip to main content
Home Bootstrap Web Programming Bootstrap Social Sharing Buttons at the Bottom of Article Using FontAwesome

Bootstrap Social Sharing Buttons at the Bottom of Article Using FontAwesome

Nowadays, social media has become a necessity in promoting our content that we have. The growth of social media continues to increase, it is indicated by the emergence of new social media.

You can find out many tutorial about making social media button. But, the average of them is intended for blogger or wordpress template. Even if there is no much difference in making social media sharing button, but there are some that have diffences.

 In this tutorial, we'll create social sharing button for : Twitter, Facebook, Google+, Pinterest and the last is Linkedin. Such button put in the below article as show by Figure.1 below :
creae social sharing buttons
Fig.1

Steps in creating social sharing buttons

In this example, we just concern about how to create social sharing button. We do not discuss about the template (such as : navbar, footer and so on).

 We create a file css to give style for button like : background, font color and so on. Whereas for each icon of button, we use library FontAwesome.

1. Create file social-button.css

In this file, we create a frame for placement the button, whether we put the button in center or leftside. It also have properties such as : background for frame, background for the button, color of how button looks like when hove and active.
.frame-tombol{
    
    padding: 20px 12px;
    margin-bottom: 10px;
    text-align: center;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 4px;
    background-color: #428bca;
    border-color: #357ebd;
    }

.tombol-twitter {
    background-color: #00acee;
    border-radius: 0;
    color: #fff
}
.tombol-twitter:link, .tombol-twitter:visited {
    color: #fff
}
.tombol-twitter:active, .tombol-twitter:hover {
    background-color: #0087bd;
    color: #fff
}
.tombol-facebook {
    background-color: #3b5998;
    border-radius: 0;
    color: #fff
}
.tombol-facebook:link, .tombol-facebook:visited {
    color: #fff
}
.tombol-facebook:active, .tombol-facebook:hover {
    background-color: #30477a;
    color: #fff
}
.tombol-googleplus {
    background-color: #e93f2e;
    border-radius: 0;
    color: #fff
}
.tombol-googleplus:link, .tombol-googleplus:visited {
    color: #fff
}
.tombol-googleplus:active, .tombol-googleplus:hover {
    background-color: #ba3225;
    color: #fff
}
.tombol-pinterest {
    background-color: #cc2127;
    border-radius: 0;
    color: #fff
}
.tombol-pinterest:link, .tombol-pinterest:visited {
    color: #fff
}
.tombol-pinterest:active, .tombol-pinterest:hover {
    background-color: #c7371e;
    color: #fff
}
.tombol-linkedin {
    background-color: #0e76a8;
    border-radius: 0;
    color: #fff
}
.tombol-linkedin:link, .tombol-linkedin:visited {
    color: #fff
}
.tombol-linkedin:active, .tombol-linkedin:hover {
    background-color: #0b6087;
    color: #fff
}
If we want to put the button in the leftside, just modify the file css by changing class .frame tombol by text-align:left.

 Changes to the background color of the frame-button, can be modified on the background-color, as well as change the background color for each key social media.

2. Add icon on each social sharing button

In this step, we will call and implement :
  • File social-button.css
  • Library Font-Awesome which make add icon on the button
  • And bootstrap.css which place such icon in the Button form
We assume the library font-awesome.min.css, bootstrap.min.css and social-button in the folder : assets/css/filename.css, then the code :
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/social-button.css">
<link href="assets/css/font-awesome.min.css" rel="stylesheet">
Next step, to make icon in the form button, create by attach the code font-awesome like this :
<div class="frame-tombol" >
    <a href="" class="btn tombol-twitter"><i class="fa fa-twitter"></i> Twitter</a>
    <a href="" class="btn tombol-facebook"><i class="fa fa-facebook"></i> Facebook</a>
    <a href="" class="btn tombol-googleplus"><i class="fa fa-google-plus"></i> Google+</a>
    <a href="" class="btn tombol-pinterest"><i class="fa fa-pinterest"></i> Pinterest</a>
    <a href="" class="btn tombol-linkedin"><i class="fa fa-linkedin"></i> LinkedIn</a>
</div>


Complete Source Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="author" content="ilmu-detil.blogspot.com">
    <title>Pembuatan Tombol Share </title>
    <!-- Bagian css -->
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/ilmudetil.css">
    <link rel="stylesheet" href="assets/css/social-button.css">
    <link href="assets/css/font-awesome.min.css" rel="stylesheet">
    
    <style>
        .recent{
            padding-top:20px;
            
        }
        .info-meta{
            padding-top: 10px;
            color:#9999;
        }
        a:focus, 
        a:hover {
        text-decoration: none;
        outline: none;
        color: #9c9c9c;
        }
        .footer-bottom {
        background-color:#3b5998;
        color:#fff;
        padding-top:10px;
        padding-bottom:10px;
        }
        .post-detail{
         padding-bottom :30px
        }
        
    </style>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="index.html">
            Pusat Ilmu Secara Detil</a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-left">
                <li class="clr1 active"><a href="index.html">Home</a></li>
                <li class="clr2"><a href="">Programming</a></li>
                <li class="clr3"><a href="">English</a></li>
            </ul>
        </div>
    </div>
</nav>
</br></br></br></br>
    
<div class="container" style="margin-top:40px">
    <div class="row">
        <div class="col-md-9">
              <div class="panel panel-default">
               <div class="panel-body">
                <div class="post-detail">
                  <h3>Latih Balita Anda Dalam Merangsang Saraf Motorik</h3>
                  
                    <div class="info-meta">
                        <ul class="list-inline">
                            <li><i class="fa fa-clock-o"></i> Jan 5, 2016 </li>
                            <li><i class="fa fa-eye"></i>21k</li>
                            <li><i class="fa fa-heart-o"></i>372</li>
                            <li><i class="fa fa-user"></i> Posting by Ilmu Detil</li>
                            <li class="pull-right">Category : Technology</li>
                        </ul>
                    </div>
                  <hr>
                  <p>
                  <img src="images/education.jpg" width="300px" alt="..." style="float:left;padding:5px 10px 5px 10px;">A simple shell for an h1 to appropriately space out and segment sections of content on a page. It can utilize the h1's default small element, as well as most other components (with additional styles).
                  A simple shell for an h1 to appropriately space out and segment sections of content on a page. <p>It can utilize the h1's default small element, as well as most other components (with additional styles).
                  A simple shell for an h1 to appropriately space out and segment sections of content on a page.</p> <p>It can utilize the h1's default small element, as well as most other components (with additional styles). A simple shell for an h1 to appropriately space out and segment sections of content on a page. It can utilize the h1's default small element, as well as most other components (with additional styles).
                  A simple shell for an h1 to appropriately space out and segment sections of content on a page. It can utilize the h1's default small element, as well as most other components (with additional styles).
                  A simple shell for an h1 to appropriately space out and segment sections of content on a page. It can utilize the h1's default small element, as well as most other components (with additional styles).</p>
                  
                  <p>It can utilize the h1's default small element, as well as most other components (with additional styles).
                  A simple shell for an h1 to appropriately space out and segment sections of content on a page.</p>
                  
                  <p>It can utilize the h1's default small element, as well as most other components (with additional styles). A simple shell for an h1 to appropriately space out and segment sections of content on a page. It can utilize the h1's default small element, as well as most other components (with additional styles).
                  A simple shell for an h1 to appropriately space out and segment sections of content on a page. It can utilize the h1's default small element, as well as most other components (with additional styles).
                  A simple shell for an h1 to appropriately space out and segment sections of content on a page. It can utilize the h1's default small element, as well as most other components (with additional styles).</p>
                 
                  </p>
                
                  </div>
                <div class="frame-tombol" >
                    <a href="" class="btn tombol-twitter"><i class="fa fa-twitter"></i> Twitter</a>
                    <a href="" title="Share on Facebook" target="_blank" class="btn tombol-facebook"><i class="fa fa-facebook"></i> Facebook</a>
                    <a href="" title="Share on Google+" target="_blank" class="btn tombol-googleplus"><i class="fa fa-google-plus"></i> Google+</a>
                    <a href="" class="btn tombol-pinterest"><i class="fa fa-pinterest"></i> Pinterest</a>
                    <a href="" class="btn tombol-linkedin"><i class="fa fa-linkedin"></i> LinkedIn</a>
                </div>                
                  
               </div>
               
            </div>
         </div>
        <div class="col-sm-3">
            <div class="panel panel-default">
               <div class="panel-heading"><h4 class="text-center">Latest News</h4></div>
               <div class="panel-body">
                    <div class="recent">
                        <a href="#"><img class="img-responsive" src="images/sport.jpg" alt="" /></a>                
                        <div class="info-meta">
                            <ul class="list-inline">
                                <li><i class="fa fa-clock-o"></i> Jan 5, 2016 </a></li>
                                <li><i class="fa fa-eye"></i>21k</li>
                                <li><i class="fa fa-heart-o"></i>372</li>
                            </ul>
                        </div>
                        <h4>
                            <a href="">Pertandingan Basket NBA berlangsung sangat sengit</a>
                        </h4>
                    </div>
                    
                    <div class="recent">
                        <a href="#"><img class="img-responsive" src="images/technology.jpg" alt="" /></a>                           
                        <div class="info-meta">
                            <ul class="list-inline">
                                <li><i class="fa fa-clock-o"></i> Jan 5, 2016</li>
                                <li><i class="fa fa-eye"></i>21k</li>
                                <li><i class="fa fa-heart-o"></i>372</li>
                            </ul>
                        </div>
                        <h4 class="entry-title">
                            <a href="">Tip dan Trik dalam memilih laptop untuk penyuka game</a>
                        </h4>
                    </div><!--recent-->
                </div>
            </div>      
        </div>          
    </div>          
</div>
<!--FOOTER-->
<div class="footer-bottom">
    <div class="container-fluid text-center">
        <p>Copyright &copy; 2016,  DTC. Developed by <a href="https://ilmu-detil.blogspot.com/">Pusat Ilmu</a></p>
    </div>
</div>  
</div>   
</body>
</html>
  • DEMO
    •                        
  • DOWNLOAD

You Might Also Like:

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar
Tutup Komentar