Question

这就是我希望facebook分享按钮位于我的页面中的方式：

这是我目前的html for share按钮：

<div class='fb-share-button small-4 medium-4 large-4 columns text-right' data-href='https://sample.com//tutor.php?id=562385671a6ea' layout='button'>
    <div class='fb-share-button' data-href='https://sample.com//tutor.php?id=562385671a6ea' layout='button' style="border:2px solid #fff;padding:0 !important;margin-bottom:12px !important;"></div>

这就是我现在所拥有的，添加了一些风格：

如何缩小白色边框和分享按钮之间的间隙？

facebook脚本：

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=435703029955549";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Answer 1

#share {
        background-color:#5D7DAE;
        height:24px;
        width: 80px;
      }

      #share a.click {
        font-size:13px;
        font-weight:bold;
        text-align:center;
        color:#fff;
        border:1px solid #FFF;
        background-color:#5D7DAE;
        padding: 2px 10px;
        cursor: pointer;
        text-decoration:none;
        width:80px;
        display:block;
      }

<div id="share">
        <a class="click" href="http://www.facebook.com/dialog/feed?app_id={{fbapp_id}}&link={{link_url}}&message={{share_message|urlencode}}&display=popup&redirect_uri={{link_url}}" target="_blank">
            <i class="fa fa-facebook-official"></i> Share
        </a>
    </div>

Will give you

Answer 2

尝试使用此代码样式分享按钮通过css -

body {
  background: rgb(65, 65, 65) none repeat scroll 0% 0%;
}
.fb-share-button {
background: rgb(62, 91, 151) none repeat scroll 0% 0%;
color: rgb(255, 255, 255);
font-family: arial;
font-size: 12px;
font-weight: 900;
box-sizing: border-box;
padding: 5px;
min-width: 50px;
margin: auto;
display: inline-block;
position: relative;
border: 2px solid white;
border-radius: 2px;
clear: both;
float: left;
}
.fb {
  color: rgb(255, 255, 255);
  background: none;
  padding: 0px;
  border: none;
  width: auto;
  border-radius: 0px;
  min-width: auto;
  font-family: arial;
  font-size: 12px;
  font-weight: 900;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
<div class='fb-share-button small-4 medium-4 large-4 columns text-right' data-href='https://sample.com//tutor.php?id=562385671a6ea' layout='button'>
  <div class='fb fb-share-button' data-href='https://sample.com//tutor.php?id=562385671a6ea' layout='button'><i style="font-size: 13px;margin-right: 2px" class="fa fa-facebook-square"></i>Share</div>
</div>

如何设置脸谱分享按钮

2 个答案: