使用 bootstrap 样式自定义 Facebook 分享按钮

Question

如何在 Facebook 分享按钮上应用 bootstrap 样式？

我用这个 JS 动态更改共享 link

$scope.$on('fbShareLinkChanged', function(e, d) {
  $scope.fbShareLink = d
  $scope.fbShareBtnTemplate = '<div class="fb-share-button" data-href="'+ d+ '" data-layout="icon_link" data-mobile-iframe="true""> </div>　'

});

但是，我发现按钮样式无法更改。

我想对文本使用 bootstrap 样式 "Share with your friends"

我该怎么办？

DEMO 页面 https://lazyair.co/user/quick_search/index#/?depart_date_range=2016%2F05%2F09%20-%202016%2F05%2F17&return_date_range=2016%2F06%2F14%20-%202016%2F06%2F17&from=OKINAWA&to=TAIPEI（该按钮将在您更改任何下拉项时显示）

Answer 1

这是你想要做的吗？

HTML

<a href="https://www.facebook.com/sharer/sharer.php?u=" title="Share on  
Facebook" target="_blank" class="btn btn-facebook"><i class="fa 
fa-facebook"></i> Share with your friends</a>

CSS

.btn-facebook {
background: #3b5998;
border-radius: 3px;
color: #fff;
padding: 8px 16px;
}

.btn-facebook:link, .btn-facebook:visited {
color: #fff;
}

.btn-facebook:active, .btn-facebook:hover {
background: #30477a;
color: #fff;
}

我基本上会在样式中添加类，并将元素从 "div" 更改为 "a" 元素。

$scope.fbShareBtnTemplate = '<a class="btn btn-facebook" data-href="'+ d + '" data-layout="icon_link" data-mobile
-iframe="true"> <i class="fa fa-facebook"></i> Share with your friends</a>'

请看

https://jsfiddle.net/h5472odv/

注意：这需要Fontawesome

使用 bootstrap 样式自定义 Facebook 分享按钮

Customize facebook share button with bootstrap style

javascript

facebook-javascript-sdk