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

flchenhp · 2021年08月29日 · 304 次阅读

原文链接,原文展示效果更佳哦~

why:为什么要分享?

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

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

what:功能效果是什么样子?

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

file

用微信扫描二维码会用微信打开这篇文章,点右上角课选择分享到到朋友圈或者朋友。其他社交网站还支持微博,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 页面,点击尝试分享。

大功告成,啦啦啦~

参考文章

暂无回复。
需要 登录 后方可回复, 如果你还没有账号请 注册新账号