ソーシャルボタンの設定まとめ

ソーシャルボタンの設定まとめ

このブログ（Movable Type）に設置したソーシャルボタン、バッジの設定まとめです。

head、metaタグ

Facebook

メインインデックス

<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# blog: http://ogp.me/ns/blog#">
<meta property="og:title" content="<$mt:BlogName$>">
<meta property="og:description" content="<$mt:BlogDescription$>">
<meta property="og:type" content="blog">
<meta property="og:url" content="<$mt:BlogURL$>">
<meta property="og:image" content="<$mt:BlogURL$>favicon.png">
<meta property="og:site_name" content="<$mt:BlogName$>">
<meta property="fb:admins" content="Facebook ID">
<meta property="fb:app_id" content="Facebook Platform application ID">

エントリー・アーカイブ

og:imageには、カスタムフィールドの「サムネイル画像」に画像のURLの記述があればそのURLを、なければFaviconを反映させる。

<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
<meta property="og:title" content="<$mt:EntryTitle$>">
<meta property="og:description" content="<$mt:EntryExcerpt$>">
<meta property="og:type" content="article">
<meta property="og:url" content="<$mt:EntryPermalink$>">
<meta property="og:site_name" content="<$mt:BlogName$>">
<meta property="og:image" content="<mt:If tag="EntryDataThumbnail"><mt:EntryDataThumbnail><mt:Else><$mt:BlogURL$>favicon.png</mt:If>">
<meta property="fb:admins" content="Facebook ID">
<meta property="fb:app_id" content="Facebook Platform application ID">

Twitter Cards

メインインデックス

<meta name="twitter:card" content="summary">
<meta name="twitter:url" content="<$mt:BlogURL$>">
<meta name="twitter:title" content="<$mt:BlogName$>">
<meta name="twitter:description" content="<$mt:BlogDescription$>">
<meta name="twitter:site" content="@ユーザー名">

エントリー・アーカイブ

カスタムフィールドの「シェア」に画像のURLがあればtwitter:cardを「photo」にしてtwitter:imageに画像のURLを反映させる。なければtwitter:cardを「summary」にする。カスタムフィールドの「サムネイル画像」に画像のURLの記述があればtwitter:imageにサムネイル画像のURLを反映させる。

<mt:If tag="EntryDataShare">
<meta name="twitter:card" content="photo">
<meta name="twitter:image" content="<mt:EntryDataShare>">
<mt:Else><meta name="twitter:card" content="summary">
<mt:If tag="EntryDataThumbnail">
<meta name="twitter:image" content="<mt:EntryDataThumbnail>">
</mt:If>
</mt:If>
<meta name="twitter:url" content="<$mt:EntryPermalink$>">
<meta name="twitter:title" content="<$mt:EntryTitle$>">
<meta name="twitter:description" content="<$mt:EntryExcerpt$>">
<meta name="twitter:site" content="@ユーザー名">

FacebookもTwitterも両方利用する場合

両方共Open Graph protocolに基づいているので、Twitter cardのタグはユーザー名とCardのタイプを指定するだけで大丈夫。

エントリー・アーカイブ

カスタムフィールドの「シェア」に画像のURLがあればtwitter:cardを「photo」にして画像のURLをog:imageに反映させる。 なければtwitter:cardを「summary」にする。

カスタムフィールドの「サムネイル画像」に画像のURLの記述があればog:imageにサムネイル画像のURLを反映させ、なければFaviconを反映させる。

<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
<meta name="twitter:site" content="@ユーザー名">
<mt:If tag="EntryDataShare">
<meta name="twitter:card" content="photo">
<meta property="og:image" content="<mt:EntryDataShare>">
<mt:Else><meta name="twitter:card" content="summary">
<meta property="og:image" content="<mt:If tag="EntryDataThumbnail"><mt:EntryDataThumbnail><mt:Else><$mt:BlogURL$>favicon.png</mt:If>">
</mt:If>
<meta property="og:type" content="article">
<meta property="og:title" content="<$mt:EntryTitle$>">
<meta property="og:description" content="<$mt:EntryExcerpt$>">
<meta property="og:url" content="<$mt:EntryPermalink$>">
<meta property="og:site_name" content="<$mt:BlogName$>">
<meta property="fb:admins" content="Facebook ID">
<meta property="fb:app_id" content="Facebook Platform application ID">

HTMLコード（エントリー・アーカイブ テンプレート）

FacebookのLike（いいね）ボタン

<div class="fb-like" data-href="<$mt:EntryPermalink$>" data-send="false" data-layout="button_count" data-width="120" data-show-faces="false"></div>

Tweet（ツイート）ボタン

<a href="https://twitter.com/share" class="twitter-share-button" data-url="<$mt:EntryPermalink$>" data-text="<$mt:EntryTitle$>" data-via="ユーザー名" data-lang="en">Tweet</a>

Google+ボタン

<div class="g-plusone" data-size="medium" data-href="<$mt:EntryPermalink$>"></div>

Pinterestボタン

<a href="http://pinterest.com/pin/create/button/?url=<$mt:EntryPermalink$>&media=<mt:If tag="EntryDataShare"><mt:EntryDataShare></mt:If>&description=<$mt:EntryTitle encode_html="1"$>" class="pin-it-button" count-layout="horizontal"><img src="//assets.pinterest.com/images/PinExt.png" title="Pin It"></a>

Instagramボタン

<a href="http://instagram.com/ユーザー名?ref=badge" class="ig-b- ig-b-24"><img src="//badges.instagram.com/static/images/ig-badge-24.png" alt="Instagram"></a>

Tumblrボタン

<a href="http://www.tumblr.com/share" title="Share on Tumblr" class="tumblr">Share on Tumblr</a>

JavaScript

</body>の前に記述する。

<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 = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=Facebook Platform application ID";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!-- /Facebook -->

<script type="text/javascript" src="https://apis.google.com/js/plusone.js">{lang: 'ja'}</script>
<!-- /Google+ -->

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<!-- /Twitter -->

<script src="//assets.pinterest.com/js/pinit.js"></script>
<!-- /Pinterest -->

<script src="http://platform.tumblr.com/v1/share.js"></script>
<!-- /Tumblr -->

スタイルシート

/* Instagram Styles */

.ig-b- { display: inline-block; }
.ig-b- img { visibility: hidden; }
.ig-b-:hover { background-position: 0 -60px; }
.ig-b-:active { background-position: 0 -120px; }

.ig-b-24 { 
width: 24px;
height: 24px;
background: url(//badges.instagram.com/static/images/ig-badge-sprite-24.png) no-repeat 0 0;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
.ig-b-24 { 
background-image: url(//badges.instagram.com/static/images/ig-badge-sprite-24@2x.png);
background-size: 60px 178px;
}
}

/* Tumblr Styles */

.tumblr {
display: inline-block;
text-indent: -9999px;
overflow: hidden;
width: 20px;
height: 20px;
background: url('http://platform.tumblr.com/v1/share_4.png') top left no-repeat transparent;
}

Last modified: December 19, 2012

[PR] Dropbox 登録は無料！(500MBのボーナス容量をプレゼント)

You might also like

Comment