Home » bootstrap » bootstrap-social-railsでソーシャルログインのロゴの設定 ruby on rails

bootstrap-social-railsでソーシャルログインのロゴの設定 ruby on rails

環境

ruby 2.4.1
ruby on rails 5.1.3
OS CentOS

ソーシャルログインとは

外部のアカウントの情報を活用して、サイトに会員登録やログインなどをするサービス。

例えば、twitterやfacebookなどといったSNSのアカウントを利用して、

サイトへアカウント登録やログインができることです。

bootstrap-social-railsとは

SNSに準ずるロゴを作成してくれる gem です。

ロゴの画像をダウンロードして、

プロジェクトに格納するんではなく、

gem でSNSのロゴ情報を取得したほうが

スマートに管理できると思います。

bootstrap-social-railsをRailsに導入

bootstrap-social-railsの依存関係にあるものが

bootstrap と font-awesome-rails です。

依存関係のgemをまず導入したいと思います。

bootstrapは導入方法はこちらから

font-awesome-rails も依存関係であるので、入れていきたいと思います。

Gemfileにfont-awesome-railsを記入していきます。

gem 'font-awesome-rails'

bundle install でインストールしましょう。

そして動かすのための設定が必要です。
requireでfont-awesomeをライブラリとして読み込む設定と
cssまたはscssにimport文を記述して動くように設定します。

# コメントアウトの中に下記のコードを記入する
*= require font-awesome

# 他のimport文と同様に記入する
@import "font-awesome";

bootstrap-social-railsをrailsにインストールする

Gemfileに記入してインストールします。

gem 'bootstrap-social-rails'

bundle install でインストールしましょう。

そしてさきほどと同様にcssまたはscssに設定していきます。

# コメントアウトの中に記入する。
*= require bootstrap-social

# 他のimport文と同様に記入する
@import "bootstrap-social";

この設定が終わりようやく使えるようになります。

動作確認

ソーシャルログインのボタンを実際に作ってみます。
※ haml で書いてます。

= link_to " facebookでログイン", user_facebook_omniauth_authorize_path, class: "fa fa-facebook btn btn-facebook"
= link_to " Twitterでログイン",  user_twitter_omniauth_authorize_path, class: "fa fa-twitter btn btn-twitter"

このようにマークとボタンが作成されてそれっぽくなりましたね。
ユーザーにわかるように設定しないと、
なんのボタンかわからない状態になります。
ですので、こういったgemやロゴ画像を使って、
ソーシャルログイン用のボタンに有効活用していきましょう!

 

追記

SNSの扱っているマークが、

bootstrap-socialのサイトに載っています。

参考文献

, , , ,

コメントを残す

%d人のブロガーが「いいね」をつけました。