Twitter Bootstrap Question posted in

Twitter bootstrap – How to get social login buttons using devise + omniauth + rails

I am currently running a rails 4 application, and I would like to get social login buttons instead of links which are the default provided by omniauth / devise.

Currently I have a signup form which looks like this,

current sign up form

And I included, the following gems, bootstrap-social-rails and font-awesome-rails.

I am hoping to get some buttons that look like this,

social login buttons

My new.html.erb looks like the following,

<%= f.submit "Sign up", class: "btn btn-primary" %>
    <%= f.submit "Twitter", class: "btn btn-block btn-social btn-twitter fa fa-twitter"%>
    <%= f.submit "Sign in with Twitter", class: "btn btn-social-icon btn-twitter fa fa-twitter" %>
Tags:

2

Answers


  1. 0

    OmniAuth authorisation performs by redirection to the provider service, which means that buttons are <a href="...">, not actual <button> tags.

    In that case, what you would like to implement can be done like this:

    <%= link_to user_omniauth_authorize_path(:twitter), class: "btn btn-block btn-social btn-twitter" do %>
   <span class="fa fa-twitter"></span> Sign in with Twitter
<% end %>
    Login or Signup to reply.
  2. 0

    First you need _link.html.erb file. There will be code for providers as i write below.

    <%- if devise_mapping.omniauthable? %> 
  <%- resource_class.omniauth_providers.each do |provider| %>
    .........
  <% end -%>
<% end -%>

    Change this code to following code of line.

    <%- if devise_mapping.omniauthable? %>
  <%- resource_class.omniauth_providers.each do |provider| %>
    <%= link_to "<i class='#{ICONS[provider]}'></i>".html_safe, omniauth_authorize_path(resource_name, provider), class: "ui #{COLOR[provider]} mini submit button ok" %>
  <% end -%>
<% end -%>

    And in initialize, make CONSTANT for icon and color.

    ICONS = { google_oauth2: 'google plus', twitter: 'twitter', facebook: 'facebook', linkedin: 'linkedin', github: 'github'}
COLOR = { google_oauth2: 'blue', twitter: 'twitter', facebook: 'facebook', linkedin: 'linkedin', github: 'black' }

    Please change the class name(if it is different, That is just demo classes not from bootstrap).

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search