Facebook OGP 対応 + Twitter Card 対応 する際の HTML テンプレート

index.html.haml

%ul#social-container.social-container
  %li.facebook<
		#fb-root
		:javascript
			(function(d, s, id) {
				var js, fjs = d.getElementsByTagName(s)[0];
				if (d.getElementById(id)) return;
				js = d.createElement(s); js.id = id;
				js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1";
				fjs.parentNode.insertBefore(js, fjs);
			}(document, 'script', 'facebook-jssdk'));
		.fb-like{data: {href: host_name, layout: 'button_count', action: 'like', show: {faces: 'true'}}}
	%li.twitter<
		= link_to 'https://twitter.com/share', 'ツイート' , class: 'twitter-share-button', data: {lang: 'ja'}
	%li.google<
		.g-plusone
	%li.hatena<
		= link_to "http://b.hatena.ne.jp/entry/#{host_name}/", class: 'hatena-bookmark-button', data: {hatena: {title: app_title,bookmark: {layout: 'standard-balloon', lang: 'ja'}}}, title: 'このエントリーをはてなブックマークに追加' do
			= image_tag 'http://b.st-hatena.com/images/entry-button/[email protected]', alt: 'このエントリーをはてなブックマークに追加', width: 20, height: 20, style: 'border: none'

layout.haml

!!!
%html
  %head{lang: 'ja', prefix: "og: http://ogp.me/ns#"}
    %meta{charset: 'utf-8'}
    %title= current_page.data.title
    
    %meta{name: 'description', content: '#{app_description}'}

    %meta{itemprop: 'name', content: app_title}
    %meta{itemprop: 'description', content: '#{app_description}'}
    %meta{itemprop: "image", content: "#{host_name}/ogp.png"}
		
    %meta{name: "apple-mobile-web-app-capable", content: "yes"}
    %meta{name: "apple-mobile-web-app-status-bar-style", content: "black"}
    %meta{name: "format-detection", content: "telephone: no"}
    %meta{name:"viewport", content:"width=device-width, maximum-scale=1.0, minimum-scale=1.0,user-scalable=no,initial-scale=1.0"}

    %meta{property: "og:title", content: app_title}
    %meta{property: "og:type", content: "website"}
    %meta{property: "og:image", content: "#{host_name}og_facebook.png"}
    %meta{property: "og:url", content: "#{host_name}"}
    %meta{property: "og:site_name", content: app_title}
    %meta{property: "og:description", content: app_title}

    %meta{name: "twitter:card", content: "summary"}
    %meta{name: "twitter:site", content: "@wakamsha"}
    %meta{name: "twitter:title", content: app_title}
    %meta{name: "twitter:description", content: "ここに説明文を記述"}
    %meta{name: "twitter:creator", content: "@wakamsha"}
    %meta{name: "twitter:image:src", content: "#{host_name}og-twitter.gif"}

    %link{rel: 'shortcut icon', href: 'favicon.ico', type: 'image/vnd.microsoft.icon'}
    %link{rel: 'icon', href: 'favicon.ico', type: 'image/vnd.microsoft.icon'}
    %link{rel: 'apple-touch-icon', href: 'apple-touch-icon.png'}

    = stylesheet_link_tag "all"
    
    = javascript_include_tag  "http://b.st-hatena.com/js/bookmark_button.js", "social"
    
  %body{class: page_classes}
    = yield