css - 如何使用 Font Awesome 字体实现基本的共享社交按钮?

标签 css ruby-on-rails facebook ruby-on-rails-4 twitter

这似乎是一个简单的问题,但我如何在我的 Rails 应用程序中使用 Font Awesome 实现基本的社交分享按钮。

我想在我的 PostsController#Show 上实现它们。

我开始研究它,认为它就像添加一个 link_to 一样简单 - 但很快意识到它并不那么简单。

对于 Twitter,您需要将帖子的标题与 URL 一起包含在推文的正文中。我想 Facebook 是相似的。

任何人都可以提供有关如何包含 WhatsApp 共享的提示的奖励积分 - 按此:http://whatsapp-sharing.com/ - 也在每个帖子上。

最佳答案

我刚刚完成 a small article on my site当我看到你的回复时回应你的评论。

使用以下 HTML:

<!-- Twitter -->
<a href="http://twitter.com/home?status=SHAREMESSAGE" title="Share on Twitter" target="_blank" class="btn btn-twitter"><i class="fa fa-twitter"></i> Twitter</a>
 <!-- Facebook -->
<a href="https://www.facebook.com/sharer/sharer.php?u=SHAREMESSAGE" title="Share on Facebook" target="_blank" class="btn btn-facebook"><i class="fa fa-facebook"></i> Facebook</a>
<!-- Google+ -->
<a href="https://plus.google.com/share?url=SHAREMESSAGE" title="Share on Google+" target="_blank" class="btn btn-googleplus"><i class="fa fa-google-plus"></i> Google+</a>
<!-- StumbleUpon -->
<a href="http://www.stumbleupon.com/submit?url=SHAREMESSAGE" title="Share on StumbleUpon" target="_blank" data-placement="top" class="btn btn-stumbleupon"><i class="fa fa-stumbleupon"></i> Stumbleupon</a>
<!-- LinkedIn --> 
<a href="http://www.linkedin.com/shareArticle?mini=true&url=&title=&summary=SHAREMESSAGE" title="Share on LinkedIn" target="_blank" class="btn btn-linkedin"><i class="fa fa-linkedin"></i> LinkedIn</a>

将 SHAREMESSAGE 替换为您的共享消息。对于 WhatsApp 和 IOS,你可以使用这个:

<a href="whatsapp://send?text=SHAREMESSAGE">Share on WhatsApp</a>

但是我在 Stack Overflow 的其他地方读到这在 Android 上不起作用。祝你好运!

关于css - 如何使用 Font Awesome 字体实现基本的共享社交按钮?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25619418/

相关文章:

css - 修复了具有可滚动内容区域的 flexbox 布局的内容标题

javascript - 侧边栏和主页持久性 - Rails

ruby-on-rails - 使用 HTTParty 检索 JSON 时出现“嵌套太深”错误

java - facebook graph api是否支持按位置搜索帖子消息?

php - 如何在 php/css 页面上添加类似 facebook 的按钮?

javascript - 滚动后全屏 ImageView 无法正常运行

javascript - 如何在 bootstrap collapse navbar-collapse 中将事件类添加到当前 <li>?

jquery - 移动优先设计,加载图像和jquery DOM选择

ruby-on-rails - 确保方程永远不会小于 0 - Ruby

通过 iPhone 应用程序点赞 Facebook 二维码