Rails 使用網頁上的FB分享鈕

話說平常轉貼連結在FB通常都會看到連結在FB顯示的美美的，現在才知道原來他後面是有做不少的設定，我們先從工具講起。

前置準備
FB有一個給developer的網頁，你要先申請一些東西然後才可以來用這個分享的功能，然後每次你的meta更新完，就要放到這個debug tool來檢查看看，而且只有放進來這裡，在分享的時候meta才會更新。


怎麼把meta放到head咧？
我們使用content_for 把meta放在layout的application.html.erb的head，application.html.erb放上一個if，來檢查是否要yield。

# application.html.erb
<%= content_for?(:head) ? yield(:head) : '' %>

# 放在.html.erb
<% content_for :head do %>
  <meta property="og:url"  content="http://www.hahahah.cc/items/<%= @item.id %>" />
  <meta property="og:type"  content="video" />
  <meta property="og:title"  content="<%= @item.title %>" /> 
  <meta proverty="og:locale" content="zh-TW" />
  <meta property="og:image" content="<%= @item.item_cover.thumb.url %>" />
  <meta property="og:video" content="<%= raw(og_video_url(@item.intro_video)) %>" />
  <meta property="og:video:secure_url" content="<%= raw(og_video_secure(@item.intro_video)) %>" />
  <meta property="og:video:width" content="480" />  
  <meta property="og:video:height" content="360" />
  <meta property="og:video:type" content="application/x-shockwave-flash" />
  <meta property="og:description" content="<%= @item.short_desc %>" />
  <meta property="og:site_name"  content="hahahah" />
  <meta property="fb:app_id" content="去申請一個" />
<% end %>

要怎麼embeded影片在網頁上？
使用者貼進來的網址我們去抓他的youtube_id，然後把他放在iframe裡回傳

# 放在helper
def youtube_embed(youtube_url)
  if youtube_url[/youtu\.be\/([^\?]*)/]
    youtube_id = $1
  else
    # Regex from # http://stackoverflow.com/questions/3452546/javascript-regex-how-to-get-youtube-video-id-from-url/4811367#4811367
    youtube_url[/^.*((v\/)|(embed\/)|(watch\?))\??v?=?([^\&\?]*).*/]
    youtube_id = $5
  end

  %Q{<iframe class="embed-responsive-item" src="//www.youtube.com/embed/#{ youtube_id }" frameborder="0" allowfullscreen></iframe>}
end

og_video_url
meta的og_video_url這個項目的網站也是要處理過，不然分享到FB時，你的影片會播不出來，特別注意他是http。

# 放在helper
def og_video_url(youtube_url)
  if youtube_url[/youtu\.be\/([^\?]*)/]
    youtube_id = $1
    "http://youtube.com/v/#{ youtube_id }?autohide=1&version=3"
  else
    # Regex from # http://stackoverflow.com/questions/3452546/javascript-regex-how-to-get-youtube-video-id-from-url/4811367#4811367
    youtube_url[/^.*((v\/)|(embed\/)|(watch\?))\??v?=?([^\&\?]*).*/]
    youtube_id = $5
    "http://youtube.com/v/#{ youtube_id }?autohide=1&version=3"
  end
end

og_video_secure_url
這個meta和上面的那個meta的差別在於他是https。

# 放在helper
def og_video_secure(youtube_url)
  if youtube_url[/youtu\.be\/([^\?]*)/]
    youtube_id = $1
    "https://youtube.com/v/#{ youtube_id }?autohide=1&version=3"
  else
    # Regex from # http://stackoverflow.com/questions/3452546/javascript-regex-how-to-get-youtube-video-id-from-url/4811367#4811367
    youtube_url[/^.*((v\/)|(embed\/)|(watch\?))\??v?=?([^\&\?]*).*/]
    youtube_id = $5
    "https://youtube.com/v/#{ youtube_id }?autohide=1&version=3"
  end
end