おぴよの気まぐれ日記

おぴよの気まぐれ日記

岡山やプログラミング、ファッションのこと、子育てや人生、生き方についての備忘録。

TwitterやFacebookなどのSNSボタンを5分で追加する

Railsアプリを作る時、SNSのシェアボタンを設置するにはどうすれば良いのでしょうか?

Rails social-share-button gemのイメージ画像
Rails social-share-button gemのイメージ画像

今回たまたまsocial-share-buttonというgemを見つけたので、それを使ってみました。 https://github.com/huacnlee/social-share-button

やり方はREADME.mdに書かれていますが、まとめます。

ざっくり手順紹介

ざっくり手順紹介

  1. Gemfileに追加してbundle installする
  2. application.cssに追加する
  3. application.jsに追加する
  4. viewにsocial_share_button_tagを設定する

Gemfileの設定

# Gemfile
gem 'social-share-button'

コマンドはお馴染みのbundle install

css設定

# application.css
#= require social-share-button

js設定

# application.js
//= require social-share-button

viewの設定

# show.html.haml
%p#notice= notice
%h2
  = @event.title
= social_share_button_tag(@event.hash_tag, :allow_sites => %w(twitter facebook google_plus weibo qq douban google_bookmark delicious tumblr pinterest email linkedin wechat vkontakte xing reddit hacker_news telegram odnoklassniki))

これだけ!!

第一引数に渡した文字列がツイートの本文になる。

twitterのボタンを押した時の画像
twitterのボタンを押した時の画像

とりあえず全部アイコン出してますけど、半分以上分からない...

あと、facebookは使えないんだって。 Error_と_OhkEventRails.png

まーこんな感じです。

README.md通りやると途中でrails gコメンドでファイル作成して、そっちに表示したいアイコンの配列を作るのですがエラーになって上手くいかなかった。 多分上手くそのファイルが読み込めてないのだけど、原因わからないからviewから直接渡しちゃってる。

とりあえず出来たからOK!