2

Is it possible to share content from my web application on different social media sites (fb, twitter, google+, soundcloud) in one click? Instagram has similar feature.

Is there rails gem available for that? Pointers to tutorials will be appreciated.

pramodtech
  • 6,300
  • 18
  • 72
  • 111

2 Answers2

3

These are simple HTML/JavaScript drop-ins. You don't need to involve anything in the Rails stack beyond placing the required markup in your template.

https://twitter.com/about/resources/tweetbutton

http://developers.facebook.com/docs/reference/plugins/like/

http://www.hyperarts.com/blog/tutorial-how-to-add-facebook-share-button-to-your-web-site-pages/

L. Quastana
  • 1,273
  • 1
  • 12
  • 34
3

Why use a gem

While it's true the code to implement social sharing buttons is quite straightforward and can usually be copied directly from that site's examples into your template, there are benefits to using a gem to manage that code:

  • It helps maintain separation of concerns in your codebase (DRY). If you are going to be using these buttons in multiple views, you'd probably want to write some helper template functions anyway.

  • You don't have to keep your app up to date with any changes in the implementation of each sharing button (provided the gem you choose is well-maintained)

I know this is an old thread, but I stumbled upon it looking for "the" social sharing gem for rails, and since I got to a working solution I wanted to share.

Which gem

I was able to find two somewhat actively maintained gems:

  • https://github.com/huacnlee/social-share-button - This supports a large number of sites, but uses a simple implementations. It doesn't support more advanced functionality like counters and other formats, because it's not calling the full iframe implementations. But it seems to have excellent coverage of the main asian social networks.
  • https://github.com/iffyuva/social-buttons - This only supports Facebook, G+, Twitter, and Pinterest. However, it is a more fully-featured abstraction and so it worked for my use case (the FB, G+, Twitter, with counters).

Example implementation

To use the latter, you can generally follow the instructions on the github page, with a few exceptions:

I had to set the source of the gem to github instead of rubygems, because the rubygem line was out of date and had some blocking bugs. So:

gem 'social-buttons', git: 'git://github.com/iffyuva/social-buttons.git', branch: 'master'

The facebook dialog box keeps closing right after you open it if their crawler can't get to their url - this will happen if you're working from localhost, so make sure you specify the URL. Really, your application should know what your cannonical url for your content is, so in your view:

url = request.protocol + HOST_FOR_CRAWLERS + model_path(@model)

Finally, the documentation was a little unclear on how to form arguments for the facebook function, or that you need script: true for the google plus tag to deploy its script.

Here's my view:

<ul class="social-share-list list-inline"> <li class="twt"> <%= tweet_button count: 'horizontal', related: 'realted_twitter_handle', text: @model.title + ' ' + url, url: url, via: 'your_twitter_handle' %> </li> <li class="gp"> <%= google_plus_button href: url, script: true, annotations: :bubble, size: :medium %> </li> <li class="fb"> <%= like_button your_facebook_app_id, action: 'like', href: url, layout: :button_count, send: true %> </li> </ul>

In my sass, I added some rules to normalize the iframes to regular inline sizing:

ul.social-share-list { li { &.twt {margin-right: -35px;margin-bottom: -5px;} &.gp {margin-right: -33px;margin-bottom: -5px;} &.fb { position: absolute;} } }

zrisher
  • 2,215
  • 1
  • 16
  • 12