<div class="samsung">
  <div class="border">
  </div>
</div>

<!-- DEMO -->
<a href="http://www.adobewordpress.com/mobil-sitenize-whatsapp-diger-sosyal-paylasim-linkleri-ekleyin" target="_blank" class="article" style="display:none">Read Article</a>
section.socialShare {
  padding: 0;
  margin: 0;
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 1999999999;
}

section.socialShare > a {
  display: inline-block;
  width: 20%;
  height: 45px;
  background: #333;
  text-align: center;
  line-height: 45px;
  -webkit-box-sizing: border-box;
  -khtml-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
}

section.socialShare a.facebook {
  background: #4a67b7;
}

section.socialShare a.twitter {
  background: #22b0f2;
}

section.socialShare a.linkedin {
  background: #007bb5;
}

section.socialShare a.whatsapp {
  background: #2ab200;
}

section.socialShare a.email {
  background: #bc1515;
}

section.socialShare > a,
section.socialShare > a:hover,
section.socialShare > a:visited,
section.socialShare > a:active {
  color: white !important;
  text-decoration: none !important;
}


/* DEMO */

.samsung {
  width: 300px;
  height: 601px;
  background-image: url('http://www.adobewordpress.com/tasarim/images/samsung-galaxy-s6-social-share.png');
  background-size: 100% 100%;
  margin: 0 auto;
  position: relative;
}

.border {
  position: absolute;
  top: 10.4%;
  right: 4.8%;
  left: 4.8%;
  bottom: 9.4%;
  overflow: hidden;
}

section.socialShare {
  position: absolute;
}

a.article {
  position: fixed;
  bottom: 15px;
  left: 15px;
  display: table;
  text-decoration: none;
  color: white;
  background-color: #F44336;
  padding: 10px 20px;
  border-radius: 25px;
  font: 400 15px 'Open Sans', sans-serif;
}
/* HOW TO USE (for more information > adobewordpress.com)

You do not need to do any development. This script will collect your page title and url automatically.

Remove comments from line 7 and 33. Write your Twitter username to line 9. At last go to line 32 and change div.border to body. Everything is ready. Enjoy! */

// if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {

var twitterUser = '@adobewordpress'; /* Your Twitter Username */

// No need to change anything else :) 

var shareURL = window.location.href
var shareTitle = document.getElementsByTagName("title")[0].innerHTML;
var shareTweetdata = shareTitle + ' ' + twitterUser + ' ';

// If Font Awesome not included to project, we create related link tag inside of <head></head> elements. 
document.fonts.ready.then(function() {
  if (document.fonts.check('1em "FontAwesome"') != true) {
    $('head').append('<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">');
  }
});

var dataList = '<section class="socialShare">' +
  '<a class="facebook" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=' + shareURL + '"><i class="fa fa-facebook"></i></a>' +
  '<a class="twitter" target="_blank" href="https://twitter.com/intent/tweet?text=' + shareTweetdata + '&amp;url=' + shareURL + '"><i class="fa fa-twitter"></i></a>' +
  '<a class="linkedin" target="_blank" href="https://www.linkedin.com/shareArticle?mini=true&amp;url=' + shareURL + '&amp;title=' + shareTitle + '"><i class="fa fa-linkedin"></i></a>' +
  '<a class="whatsapp" target="_blank" href="whatsapp://send?text=' + shareTitle + '%20' + shareURL + '"><i class="fa fa-whatsapp"></i></a>' +
  '<a class="email" href="mailto:?subject=' + shareTitle + '&amp;body=' + shareURL + '"><i class="fa fa-envelope"></i></a>' +
  '</section>';

$('div.border').prepend(dataList);
// }

/* DEMO */
if(parent==top) {
  $('a.article').show();
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js