【JA魔改秘笈】一首歌的时间教会你做社群分享功能

本篇文章将介绍如何在一首歌的时间内快速新增社群分享功能,包含Facebook、Twitter、Google+、微博、微信等(如果做不完肯定是你选的歌太短了!


让我们开始吧!

Part 1 - 新增GEM social-share-button

https://github.com/huacnlee/social-share-button

Gemfile
+ gem 'social-share-button'
  • $ bundle instal
  • $ rails s 重启服务器
  • $ rails g social_share_button:install


Part 2 - 导入CSS及Javascript

app/assets/stylesheets/application.scss
+ *= require social-share-button
app/assets/javascripts/application.js
+ //= require social-share-button
+ //= require social-share-button/wechat


Part 3 - 新增分享按钮(范例为products#show页面)

app/views/products/show.html.erb
+ <%= social_share_button_tag(@product.name, :allow_sites => %w(facebook twitter google_plus wechat weibo), :image => @product_images.first.image.main.url , desc: @product.description) %>

@product.name 设定分享标题
:allow_sites => %w(facebook twitter google_plus wechat weibo) 设定社群分享按钮,可自行调整(这个Gem共有17个社群网站分享功能)
:image => @product_images.first.image.main.url 设定分享图片
desc: @product.description 设定分享内容

大功告成!!

这样就完成了,是不是非常简单阿!?

※ 社群分享按钮基本上都是抓当前网址的信息,因此本机无法测试,请先确认分享按钮可正常弹出后,推上Heroku查看分享内容

※ 目前完成了最「基本」的分享功能,每个社群分享的效果、设定皆不相同,可依照需求自行调整,也可以参考github上的官方文档 social-share-button






Plus - 优化分享效果(选修)

做完上面社群分享功能,有些人可能会对分享的页面不太满意,这是因为在分享时很多资讯(标题、描述、图片等)会存放在<head></head>里,上面的Gem虽然可以快速实现功能,但部分的效果不够完整

因此我们可以另外设置,进一步优化分享效果(下面以Facebook、Google+为例子)

Part 1 - 新增GEM seo_helper

https://github.com/techbang/seo_helper

Gemfile
+ gem 'seo_helper'
  • $ bundle instal
  • $ rails s 重启服务器


Part 2 - 新增config/initializers/seo_helper.rb,加入基础设置

  • touch config/initializers/seo_helper.rb 新增Helper
config/initializers/seo_helper.rb
+ SeoHelper.configure do |config|
+  config.site_name = "J & A SELECT"
+ end
  • config.site_name = "J & A SELECT" 设置网站名称


Part 3 - 在Layout上方<head></head>中加入设置

app/views/layouts/application.html.erb
<head>
- <title>J & A SELECT</title>
+ <%= render_page_title_tag %>
+ <%= render_page_description_meta_tag %>
+ <%= render_page_image_link_tag %>
+ <meta property="og:title"       content="<%= page_title %>"/>
+ <meta property="og:description" content="<%= page_description %>"/>
+ <meta property="og:image"       content="<%= page_image %>"/>

 ...
</head>
  • <title>J & A SELECT</title> 删除原先页面标题设定
  • <%= render_page_title_tag %> 加入页面标题设定
  • <%= render_page_description_meta_tag %> 加入页面描述设定
  • <%= render_page_image_link_tag %> 加入页面图片设定
  • <meta property="og: ... /> 下方三行为Facebook的特殊设定


Part 4 - 在Controller设置内容(范例为show页面)

app/controllers/products_controller.rb
def show
    ...
  
+   set_page_title       @product.name
+   set_page_description @product.description
+   set_page_image       @product.image.thumb.url
end
  • set_page_title @product.name 设定页面标题
  • set_page_description @product.description 设定页面描述
  • set_page_image @product.image.thumb.url 设定页面图片

大功告成!!


※ 这样就完成了进一步的设置,如果你想深入研究,也可以参考github上的官方文档seo_helper

※ 眼尖的同学应该有发现,这个Gem是拿来设计网站SEO的,以后有SEO的相关需求也可以透过上述方法来实现




若有任何问题都可以在下方留言,或在Wechat、Slack上找到我,希望本篇文章对你有帮助 :D

如果我的文章对你有帮助,欢迎打赏,谢谢你的支持! :D

comments powered by Disqus