Get Social With AngularJS


Michael Bromley
@michlbrmly

Rich Social Media Sharing:

How It Works

Twitter meta data
<meta property="twitter:card" content="summary" />
<meta property="twitter:site" content="@flickr" />
<meta property="twitter:title" content="Developing States Photo" />
<meta property="twitter:description" content="View the album on Flickr." />
<meta property="twitter:image" content="https://farm6.staticflickr.com/5510/123123.jpg" />
<meta property="twitter:url" content="https://www.flickr.com/p/sets/23/" />
Open Graph meta data 
<meta property="og:title" content="The Rock" />
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="http://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg" />

Example: Facebook

The Problem With Angular



Crawlers Do Not Evaluate JavaScript


<meta property="og:title" content="{{ metadata.title }}" />
<meta property="og:site_name " content="My Favourite Albums" />
<meta property="og:url " content="{{ metadata.url }}" />
<meta property="og:description" content="{{ metadata.description }}" />
<meta property="og:image" content="{{ metadata.image }}" />

The Solution


  • Server-side rendering
  • Redirect crawlers

Ingredients


  • A web server capable of rewriting URLs
  • A server-side scripting language
  • html5Mode = true

The Server - Apache


Required Modules:

  • mod_rewrite
  • mod_proxy
  • mod_proxy_http

The Language - PHP


Basic Method:

  • Get the data from the API
  • Output HTML with meta tags populated

The Redirection - .htaccess


RewriteCond %{HTTP_USER_AGENT} (facebookexternalhit)

RewriteRule album/(\d*)$ http://www.mysite.com/static-page.php?id=$1 [P]

  • Detect user agent
  • If matching, redirect to static-page.php
  • [P] = use proxy to remap rather than redirect

User Agents


  • facebookexternalhit/1.1 (+http(s)://www.facebook.com/externalhit_uatext.php)
  • Twitterbot/1.0
  • Pinterest/0.1 +http://pinterest.com/
  • Google (+https://developers.google.com/+/web/snippet/)

Test It Out!


  • Facebook Open Graph Object Debugger
  • Twitter Card Validator
  • Pinterest Rich Pin Validator
  • Google Structured Data Testing Tool
  • Fiddler

Check Out The Demo:


http://bit.ly/TzKuLK

Thank You!




@michlbrmly
http://www.michaelbromley.co.uk
Made with Slides.com