rails 3 gem,只需点击一下即可在社交媒体网站上分享内容

时间:2013-11-14 06:50:27

标签: ruby-on-rails-3 api facebook-graph-api twitter

是否可以通过一次点击在不同的社交媒体网站(fb,twitter,google +,soundcloud)上分享我的网络应用程序中的内容? Instagram也有类似的功能。

有轨道宝石可用吗? 指向教程的指针将不胜感激。

2 个答案:

答案 0 :(得分:3)

这些是简单的HTML / JavaScript插件。除了在模板中放置所需的标记之外,您不需要在Rails堆栈中包含任何内容。

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/

答案 1 :(得分:3)

为什么要使用宝石

虽然实现社交共享按钮的代码非常简单,并且通常可以直接从该网站的示例复制到您的模板中,但使用gem来管理该代码会有好处:

  • 它有助于保持代码库(DRY)中关注点的分离。如果您打算在多个视图中使用这些按钮,您可能还是想编写一些辅助模板函数。

  • 您无需更新每个共享按钮的实施中的任何更改(如果您选择的宝石维护得很好)

我知道这是一个老线程,但我偶然发现它正在为rails寻找“社交分享宝石”,因为我得到了一个工作解决方案,我想分享。

哪个宝石

我能找到两个有点积极维护的宝石:

  • https://github.com/huacnlee/social-share-button - 这支持大量网站,但使用简单的实现。它不支持更高级的功能,如计数器和其他格式,因为它不会调用完整的iframe实现。但它似乎对主要的亚洲社交网络有很好的报道。
  • https://github.com/iffyuva/social-buttons - 这仅支持Facebook,G +,Twitter和Pinterest。但是,它是一个功能更全面的抽象,所以它适用于我的用例(FB,G +,Twitter,带计数器)。

示例实现

要使用后者,您通常可以按照github页面上的说明操作,但有一些例外:

我必须将gem的源代码设置为github而不是rubygems,因为rubygem行已经过时并且有一些阻塞错误。所以:

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

如果你的抓取工具无法访问他们的网址,那么在你打开它之后,facebook对话框会一直关闭 - 如果你是从localhost工作的话,就会发生这种情况,所以请确保你指定了URL。实际上,您的应用程序应该知道您的内容的特定网址是什么,所以在您看来:

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

最后,文档对于如何为facebook功能形成参数有点不清楚,或者你需要script: true来为google plus标签部署其脚本。

以下是我的观点:

<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>

在我的sass中,我添加了一些规则来规范化iframe到常规内联大小调整:

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