IT技術にまつわる実験ノート

「長編を書くより、短編を数多く完成させてください。それが上達への近道です」 by 手塚治虫

social-share-button を使ってみる

はじめに

ここでは以下の記事を参考にして social-share-button を使ってみることにする。

 

使ってみる

ざっくりとアプリを作成する。

 

gem をインストールする。

  • echo 'gem "social-share-button"' >> Gemfile
  • bundle

 

ジェネレーターを実行する。

  • bin/rails g social_share_button:install

f:id:matt-note:20190420000456p:plain

 

application.js に設定を追加する。

  • echo '//= require social-share-button' >> app/assets/javascripts/application.js

 

css ファイルを application.scss に変更して、設定を追加する。

  • mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss
  • echo '@import "social-share-button";' > app/assets/stylesheets/application.scss

 

サンプル用に scaffold する。

  • bin/rails g scaffold Article title:string content:text
  • bin/rails db:migrate

 

コンソールからデータを作成しておく。

  • bin/rails c
  • Article.create(title: "sns button test", content: "test desu")

 

ビューで social_share_button_tag メソッドを呼び出す。

ここでは記事の個別ページで SNS ボタンを出力することにする。

  • echo '<br><%= social_share_button_tag(@article.title) %>' >> app/views/articles/show.html.erb

 

サーバーを起動してアクセスしてみる。

f:id:matt-note:20190420002329g:plain

-> ざっくりと設定できた。

 

出力する SNS ボタンの設定は、config/initializers/social_share_button.rb で設定できる。

ここでは twitterfacebook だけで設定してみる。

f:id:matt-note:20190420002719p:plain

 

サーバーを再起動してアクセスしてみる。

f:id:matt-note:20190420002846p:plain

-> 出力する SNS ボタンを設定できた。