sharing_tags

sharing_tags is a gem for adding social sharing buttons to your Rails app.

Available for the following social networks: Facebook, Twitter, Odnoklassniki, Google Plus, Vkontakte, Line

Installation

Add this line to your application's Gemfile:

gem 'sharing_tags'

Run the bundle command to install it.

After you install SharingTags and add it to your Gemfile, you need to run the generator:

rails generate sharing_tags:install

Usage

This gem is a Rails 4+ compatible engine and now automatically includes all the view helper modules into ActionView::Base

Views

For the simplest way of using this gem, add this helper method to head in your views:

    # generate meta tags for different social networks
    = sharing_meta_tags

    # render sharing buttons for networks
    = sharing_tags_buttons :facebook, :twitter, context: :user

Usage example

# initializers/sharings_tags.rb
SharingTags.configure do

    # global configuration
    title         "Global site title"
    description  "Global site description"
    page_url     { root_url }
    image        { image_url('img.jpg') }

    # for switch context call `sharing_tags_context(:user)` in controller action
    context :user do
        title         "User site title"
        description  "User site description"
        page_url     { profile_url }
    end
end

Advanced configuration

# initializers/sharings_tags.rb
SharingTags.configure do

  facebook do
    app_id "APP ID"
  end

  twitter do
    title         "Twitter title"
    description { "Twitter description" }
    page_url     "http://a.b"
    image         "http://img.jpg"
  end

  facebook do
    title       { "Facebook title" }
    share_url   { "http://c.d" }
    image       "http://img.png", "100x200", "image/jpeg"
  end

  google do
    link_params utm_source: "google_source", utm_medium: "google_medium", utm_content: "google_content",
                utm_campaign: "google_campaign", marker: "google_marker"
  end

  # for switch context call `sharing_tags_context(:user, @user, @photo)` in controller action
  # or pass it in `sharing_tags_buttons context: [:user, @user, @photo]`
  context :user do
    title       { |user, photo| "Hello #{user.name}" }
    description { |user, photo| I18n.t("sharing.description", gender: user.gender) }
    image       { |user, photo| photo.image.url }

    twitter do
      title         "Twitter title"
    end
  end
end

Javascript

You can subscribe to javascript events

# click on sharing link
jQuery(document).on "sharing_tags.click_action", ({network, context, target})->
  # your code

# on start sharing
jQuery(document).on "sharing_tags.before_share", ({network, context, target})->
  # your code

# on successful sharing
jQuery(document).on "sharing_tags.success_share", ({network, context, target, response})->
  # your code

# on cancel sharing
jQuery(document).on "sharing_tags.cancel_share", ({network, context, target, response})->
  # your code

# on success or cancel sharing
jQuery(document).on "sharing_tags.after_share", ({network, context, target, response})->
  # your code

# on open sharing popup
jQuery(document).on "sharing_tags.open_popup", ({network, context, url, popup_window})->
  # your code

Recommendations

Facebook sharing images 1200x630 and add mimetype and size Best way for sharing sharer provider, but after sharing you stay on the post page + big images - after sharing stay on the post page in FB browser - can check sharing result in response

fb_ui sharing everywhere
+ correct natively share in FB browser
+ return to page where called sharing
+ can check sharing result in responce
- small images in the posts
- have to create facebook application for app_id
- doesn't work for iOS Chrome browser

dialog
+ can redirect to another page after sharing
+ can check sharing result in responce
- small images in the posts

fb_ui_feed
+ can change sharing info without changing meta tags
+ big images
+ can check sharing result in responce
- doesn't work in iOS FB browser
- long time for load external big image

Vkontakte sharing images 537x240

Twitter Summary card images must be at least 120x120px

Tools for testing

Facebook Debugger (https://developers.facebook.com/tools/debug)

Google Structured Data Testing Tool (http://www.google.com/webmasters/tools/richsnippets)

Contributing

Fork it ( https://github.com/Kr00lIX/sharing_tags/fork )
Create your feature branch (git checkout -b my-new-feature)
Commit your changes (git commit -am 'Add some feature')
Push to the branch (git push origin my-new-feature)
Create a new Pull Request