iMessage share button

When you reach the end of the page here on Happy Shell, there are 3 buttons to assist you in sharing the link to Twitter, Facebook or Reddit, should you find the content interesting enough.

What you might not see (depending on the device you are currently reading this on) is the 4th button, which is displayed only on smaller screens (e.g. iPhones) and can be used for sharing the article via iMessage.

iMessage sharing

See the code below for the link syntax:

<div class="share-post">  
  <span>Share this post:</span>
  <a target="_blank" href="https://twitter.com/share?text={{encode title}}&amp;url={{url absolute="true"}}">Twitter</a>
  <a target="_blank" href="https://facebook.com/sharer.php?u={{url absolute="true"}}">Facebook</a>
  <a target="_blank" href="https://reddit.com/submit?url={{url absolute="true"}}">Reddit</a>
  <a id="imessage" href="sms:&body={{encode title}} {{url absolute="true"}}">iMessage</a>
</div>  

To display the button only on smartphones, hide the #imessage element by default and then enable it again in your smartphone media query section.

#imessage {
    display: none;
}

@media only screen and (max-width: 720px) {
    #imessage {
        display: inline-block;
    }
}

Jan Soucek's Picture

About Jan Soucek

I work with technology and sometimes, sometimes, I even write about it.

See those little icons below? That's where you can find my other stuff.