用social-share-button给文章加个社交分享功能

原文链接

why：为什么要分享？

文章分享有以下几大好处：

• 得到点赞鼓励，可以正循环促进自己坚持写作
• 得到批评意见，可以进行针对性的改善，提升自己的写作能力
• 如果是无理的谩骂，直接无视，也能锻炼一下自己的厚脸皮和抗击打能力

what：功能效果是什么样子？

点击文章里微信图标，弹出二维码界面：

[图片上传失败...(image-6636d7-1630570955396)]

用微信扫描二维码会用微信打开这篇文章，点右上角课选择分享到到朋友圈或者朋友。其他社交网站还支持微博，Facebook，Twitter等等好多个。

how：如何一步步实现？

Rails的魅力就在于很多功能，别人都已经帮你写好了，我们只需要拿来用就可以，不用什么都自己做～

Rails实现社交分享超简单，写好的gem叫social-share-button，下面我就一步一步完成吧～

安装social-share-button这个gem

+ gem 'social-share-button'

执行bundle install

引入js和css

  //= require bootstrap/modal
+ //= require social-share-button
+ //= require social-share-button/wechat
  //= require_tree .

 +@import "social-share-button";
 
  .....
  .....
+/****** 分享按钮样式 ******/
 +$size: 24px;
 +
 +.social-share-button {
 +  .ssb-icon {
 +    background-size: $size $size;
 +    height: $size;
 +    width: $size;
 +  }
 +}
 +/****** 完成分享按钮样式 ******/

给分享功能做配置

执行touch config/initializers/social_share_button.rb，新增配置文件

SocialShareButton.configure do |config|
  config.allow_sites = %w(weibo qq wechat douban twitter facebook)
end

你也可以自定义选择你希望分享的社交网站，具体参考：github的说明文件

在post的show页面中增加分享的链接图标

<%= social_share_button_tag(@post.title, 'data-wechat-title' => '#{@post.title}') %>

验证效果

可以找个文章的show页面，点击尝试分享。

大功告成，啦啦啦～

参考文章

• 「从零开始做购物网站」第26章 实作商品社交分享功能
• gem的github链接