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

收藏文章 点赞鼓励

why:为什么要分享?

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

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

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

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

file

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

how:如何一步步实现?

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

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

安装social-share-button这个gem

Gemfile
1
+ gem 'social-share-button'

执行bundle install

引入js和css

app/assets/stylesheets/application.scss
1
2
3
4
  //= require bootstrap/modal
+ //= require social-share-button
+ //= require social-share-button/wechat
  //= require_tree .
app/assets/stylesheets/application.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 +@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,新增配置文件

config/initializers/social_share_button.rb
1
2
3
SocialShareButton.configure do |config|
  config.allow_sites = %w(weibo qq wechat douban twitter facebook)
end

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

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

app/views/posts/show.html.erb
1
<%= social_share_button_tag(@post.title, 'data-wechat-title' => '#{@post.title}') %>

验证效果

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

大功告成,啦啦啦~

参考文章

评论区