How do I implement basic share social buttons with Font Awesome fonts?

marcamillion

This may seem like a simple question, but how do I implement basic social share buttons with Font Awesome in my Rails App.

I want to implement them on my PostsController#Show.

I began looking into it, thinking it was as simple as just adding a link_to - but quickly realized it isn't as simple as that.

For Twitter, you will want the title of the post to be included in the body of the tweet along with the URL. I imagine Facebook is similar.

Bonus points for anyone that can also give a tip for how to include WhatsApp sharing - per this: http://whatsapp-sharing.com/ - on each post also.

RichOnRails

I had just finished up a small article on my site in response to your comment when i saw your reply.

Use the following 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>

Replace SHAREMESSAGE with your share message. For WhatsApp and IOS you can use this:

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

However I've read elsewhere on Stack Overflow that this doesn't work on Android. Good luck!

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

How to dynamically implement social media share buttons?

From Dev

How can I install custom fonts using Bower? (not Font Awesome)

From Dev

How can I display Font Awesome fonts in Character Map?

From Dev

How do I hide a Font Awesome spinner?

From Dev

Font-awesome Social Media buttons hover effects

From Dev

Font Awesome Fonts not loading?

From Dev

Swap Text in AngularJs data binding for Font Awesome font when text match (Social Media Fonts)

From Dev

How do I give a font awesome icon a background color?

From Dev

How do I make Font Awesome WCAG 2.0 compatible?

From Dev

How do I decrease the size of a font-awesome icon?

From Dev

How do I add a Font Awesome icon to file input field

From Dev

How do I get text below Icon button with font awesome

From Java

How do I implement basic "Long Polling"?

From Dev

Resizing Font Awesome Fonts with font-size

From Dev

Add to Jekyll social share buttons

From Dev

How can I import social media buttons?

From Dev

How to use font awesome icons in jQuery mobile buttons

From Dev

How do I make my own simple social media buttons that grab the current URL automatically?

From Dev

How to implement font-awesome into a input appended through jQuery

From Dev

Replacing Font Awesome Social Media Icons With Images

From Dev

Social Media icons SlideIn with Font Awesome

From Dev

Font Awesome social icons stacked in Bootstrap navbar

From Dev

not display font-awesome social media logo

From Dev

Font-Awesome doesn't load fonts

From Java

Font-Awesome error 404 on fonts

From Dev

Fonts and Font Awesome icons not loading over SSL

From Dev

Wine and Font Awesome have conflicting fonts

From Dev

How do I implement a basic node Stream.Readable example?

From Dev

How can I load a web font such as font awesome on page load?

Related Related

  1. 1

    How to dynamically implement social media share buttons?

  2. 2

    How can I install custom fonts using Bower? (not Font Awesome)

  3. 3

    How can I display Font Awesome fonts in Character Map?

  4. 4

    How do I hide a Font Awesome spinner?

  5. 5

    Font-awesome Social Media buttons hover effects

  6. 6

    Font Awesome Fonts not loading?

  7. 7

    Swap Text in AngularJs data binding for Font Awesome font when text match (Social Media Fonts)

  8. 8

    How do I give a font awesome icon a background color?

  9. 9

    How do I make Font Awesome WCAG 2.0 compatible?

  10. 10

    How do I decrease the size of a font-awesome icon?

  11. 11

    How do I add a Font Awesome icon to file input field

  12. 12

    How do I get text below Icon button with font awesome

  13. 13

    How do I implement basic "Long Polling"?

  14. 14

    Resizing Font Awesome Fonts with font-size

  15. 15

    Add to Jekyll social share buttons

  16. 16

    How can I import social media buttons?

  17. 17

    How to use font awesome icons in jQuery mobile buttons

  18. 18

    How do I make my own simple social media buttons that grab the current URL automatically?

  19. 19

    How to implement font-awesome into a input appended through jQuery

  20. 20

    Replacing Font Awesome Social Media Icons With Images

  21. 21

    Social Media icons SlideIn with Font Awesome

  22. 22

    Font Awesome social icons stacked in Bootstrap navbar

  23. 23

    not display font-awesome social media logo

  24. 24

    Font-Awesome doesn't load fonts

  25. 25

    Font-Awesome error 404 on fonts

  26. 26

    Fonts and Font Awesome icons not loading over SSL

  27. 27

    Wine and Font Awesome have conflicting fonts

  28. 28

    How do I implement a basic node Stream.Readable example?

  29. 29

    How can I load a web font such as font awesome on page load?

HotTag

Archive