Twitterカード(2018/5/20)

Twitterカードとfacebookシェアボタン用(LINE用)の画像を作りました。 TOP ページにfacebook、twitter、google+、はてなブックマーク、LINE へのシェアボタンも設置しています。 シェアボタンは、デザインを統一したかったので下記のような方法で作成しました。記録として残します。

<head> 内に記述したソース

<!DOCTYPE html>
<html lang="ja">
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#">
<meta charset="utf-8" />
<title>ぱたぱたアニメ館--GIFアニメ-ション、アイコン、イラスト、スマホ壁紙、クリップアートなどのフリー素材を配布</title>
<!-- ogp  -->
<meta property="og:title" content="ぱたぱたアニメ館--GIFアニメ-ション、アイコン、イラスト、スマホ壁紙、クリップアートなどのフリー素材を配布。" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://pata2.jp/" />
<meta property="og:site_name" content="ぱたぱたアニメ館" />
<meta property="og:image" content="https://pata2.jp/twitter/fb_butterfly.jpg" />
<meta property="og:description" content="webページやブログ、SNSで使えるGIFアニメ-ション、アイコン、イラスト、スマホ壁紙、クリップアートなどたくさんのフリー素材を作っています。" />
<meta property="og:locale" content="ja_JP" />
<!-- twitter -->
<meta name="twitter:card" content="summary" />
<meta name="twitter:image" content="https://pata2.jp/twitter/tw_boy.png" />
<!-- css  -->
長いので省略・ソースは下にあります
<!-- script -->
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/sns.js"></script>
</head>

グレーの箇所は、 HTML5で書かれていることの宣言<!DOCTYPE html>とHTML要素+言語<html lang="ja">と 文字コード<meta charset="utf-8" />とタイトル<title></title>です。 <!-- -->はコメントです。コメントは無くても構いません。

上に戻る

head に prefix 属性

<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#">

head に prefix 属性で「 OGP を使います」と宣言しています。( html にも指定できますが head 推奨)

OGP とは「Open Graph Protocol」の略で、HTML文書に設定することによって SNS上で webページのURL や内容、サムネイル用画像などの情報を伝えることができます。 「website」の部分は、トップページは website 、その他のページは article と記述します。

meta タグの説明

<meta property="og:title" content="ページのタイトル" />
<meta property="og:type" content="ページのタイプ(トップページはwebsite 、他はarticleなど)" />
<meta property="og:url" content="ページのURL" />
<meta property="og:site_name" content="サイト名" />
<meta property="og:image" content="facebook用画像のURL" />
<meta property="og:description" content="ページの説明" />
<meta property="og:locale" content="サイトの言語" />
<meta name="twitter:card" content="Twitterカードの種類(summary、summary_large_image、app、player)" />
<meta name="twitter:image" content="Twitter用画像のURL" />

三角矢印他にも以下のようなタグがあります。

[facebook App-ID]
<meta property="fb:app_id" content="App-ID(15文字の半角数字)" />
[twitter @ユーザ名]
<meta name="twitter:site" content="@ユーザー名" />

上に戻る

facebook 画像

1200x630px 以上の画像を使用します。 大きい画像を表示するには、少なくとも 600x315px の画像が必要です。 画像の最大サイズは 8MB です。 600x315px より小さい場合は表示サイズが非常に小さくなります。 「facebook 画像サイズ

facebook 表示の確認

fb_developer.png

facebook シェアデバッガーで画像がきちんと表示されるか確認します。

fb.png

② URL、説明、画像が表示されています。

上に戻る

Twitter 画像タイプ

三角矢印 summary

カード画像は 1:1 の比率をサポートしています。 最小寸法は 144 x 144px、最大サイズは 4096 x 4096px、画像のサイズは 5 MB 未満です。 JPG、PNG、WEBP、および GIF 形式がサポートされています。 アニメーション GIF は最初のフレームのみが使用されます。 SVG はサポートされていません。

三角矢印 summary_large_image

カード画像は、 2:1 の比率をサポートしています。 最小寸法は 300 x 157px、最大サイズは 4096 x 4096px、画像のサイズは 5 MB 未満です。 JPG、PNG、WEBP、および GIF 形式がサポートされています。 アニメーション GIF は最初のフレームのみが使用されます。 SVG はサポートされていません。

Twitter表示の確認

tw_developer.png

Card validator で画像がきちんと表示されるか確認します。

tw.png

② ツイートするとこういう感じになります。

上に戻る

CSS

<style>
ul.sns{
	width:100%;
	margin:0;
	padding:0;
	display:table;
	table-layout:fixed;
	list-style:none;
}
ul.sns li {
	margin:0;
	padding:5px;
	display:table-cell;
	text-align:center;
}
ul.sns li a{
	color:#ffffff;
}
.facebook {background:#3b5998;}
.twitter {background:#1b95e0;}
.google_p {background:#db4437;}
.hatebu {background:#00a4de;}
.line {background:#39b731;}
</style>

script

<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/sns.js"></script>

jQuery の最新バージョンは 3.3.1 のようです。(2018/5/20現在)
sns.js は jQuery 参考サイトで勉強して適当に作りました。

上に戻る

HTML

<div>
<ul class="sns">
<li class="facebook"><a href="">Facebook</a></li>
<li class="twitter"><a href="">Twitter</a></li>
<li class="google_p"><a href="">Google+</a></li>
<li class="hatebu"><a href="">はてブ</a></li>
<li class="line"><a href="">LINE</a></li>
</ul>
</div>

snsのボタンです。ul タグに CSS で table を指定して横に並べています。

facebook 用ソース

<div id="fb-root"></div>
<script>(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 = 'https://connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v3.0';
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<body> 直下に記述します。

何も間違いがなければ、すんなりと画像は表示してくれます。ソース使えるものがあれば使ってくださいね。

上に戻る