A Simple Social Media Share Example

Below is a simple social media share example on how to create social media share links. In this example, we’ll be creating share links using simple html anchors (no javascript needed) and sharing text, a url and an image url.

A few tips on the share links:

  • For the Facebook share link, make sure to get a Facebook App Id by registering an app w/ https://developers.facebook.com/ and add your site’s url to get an app_id for use in the share link.
  • Escape # (%23), @ (%40) and other special characters contained within value pairs of the share link (see links below)

The image we’ll be sharing: (This could be your logo or marketing graphic)

simpleshare

Working Example: (Click on links below)

The share link url’s from the working example:

http://twitter.com/home/?status=A Simple Social Media Share %23Example %40yesi79 http://yesi79.com/?p=561


https://www.facebook.com/dialog/feed?app_id=235356709923469&link=http://yesi79.com/?p=561&picture=http://yesi79.com/wp-content/uploads/2014/07/simpleshare.png&redirect_uri=http://yesi79.com/?p=561&name=A Simple Social Media Share %23Example&caption=My %23Caption&description=My %23Description

http://pinterest.com/pin/create/button/?media=http://yesi79.com/wp-content/uploads/2014/07/simpleshare.png&url=http://yesi79.com/?p=561&description=A Simple Social Media Share %23Example http://yesi79.com/?p=561

https://www.linkedin.com/cws/share?url=http://yesi79.com/?p=561

Twitter Cards: (If anyone shares your url)

If you would like an image to show up when user’s share your url within the tweet, make sure you have the proper twitter card meta tags on your page. You can use twitter’s neat twitter card validator to create the proper meta tags you’ll need and request to have your site registered (add your meta tags to your page, then test and validate your url, during the test process a link will show up asking if you’d like to register your site for twitter cards). To see a twitter photo card in action, click on the tweet link above and share this page; then view your tweet within the twitter iphone app.

Here are the meta tags you’ll need:

<meta name=”twitter:card” content=”photo”>
<meta name=”twitter:site” content=”yesi79″>
<meta name=”twitter:creator” content=”yesi79″>
<meta name=”twitter:title” content=”A Simple Social Media Share #Example @yesi79 http://yesi79.com/?p=561″>
<meta name=”twitter:image:src” content=”http://yesi79.com/wp-content/uploads/2014/07/simpleshare.png”>
<meta name=”twitter:domain” content=”http://yesi79.com/?p=561″>
<!– Optional –>
<meta name=”twitter:app:name:iphone” content=””>
<meta name=”twitter:app:name:ipad” content=””>
<meta name=”twitter:app:name:googleplay” content=””>
<meta name=”twitter:app:url:iphone” content=””>
<meta name=”twitter:app:url:ipad” content=””>
<meta name=”twitter:app:url:googleplay” content=””>
<meta name=”twitter:app:id:iphone” content=””>
<meta name=”twitter:app:id:ipad” content=””>
<meta name=”twitter:app:id:googleplay” content=””>