BloggerにSNSシェアボタンを追加するよ！
ブログと一緒にtwitterなどのSNSも運営されている方も多いかと思います。SNSで「いいね」や「シェア」してもらうことで、多くの人に記事を見てもらえることが期待できます。
あなたもSNSシェアボタンを設置してみませんか？
メタタグの設定
シェアする場合に、メタタグというのを設定する必要があります。これは、記事のタイトルや著者、アイキャッチ画像をSNS側に認識してもらうためです。
SNS側では、タイトルやアイキャッチ画像を使って、twitterカードのようなツイートを生成します。
以下のメタタグは<head>内に記載してください。
<meta property='og:url' expr:content='data:blog.url'/>
<meta property='og:site_name' expr:content='data:blog.title'/>
<meta property='og:locale' content='ja_JP'/>
<b:if cond='data:blog.pageType == "item"'>
<title><b:eval expr='data:blog.pageName + " | " + data:blog.title'/></title>
<meta property='og:type' content='article'/>
<meta property='og:title' expr:content='data:blog.pageName + " | " + data:blog.title'/>
<meta property='og:image' expr:content='"http://bloggerspice.appspot.com/postimage/" + data:blog.url'/>
</b:if>
<b:if cond='data:blog.pageType == "index"'>
<title><b:eval expr='data:blog.title'/></title>
<meta property='og:type' content='blog'/>
<meta property='og:title' expr:content='data:blog.pageTitle'/>
<meta property='og:image' content='[image url]'/>
</b:if>
<b:if cond='data:blog.pageType == "archive"'>
<title><b:eval expr='data:blog.pageName + " | " + data:blog.title'/></title>
<meta property='og:type' content='article'/>
<meta property='og:title' expr:content='data:blog.pageName'/>
<meta property='og:image' content='[image url]'/>
</b:if>
<b:if cond='data:blog.metaDescription'>
<meta name='og:description' expr:content='data:blog.metaDescription'/>
</b:if>
<meta name='twitter:card' content='summary' />
シェアボタン
「シェア」ボタンを押すと、SNSのほうに記事を紹介することができます。
twitterだと、こんな感じでtwitterカードが表示されて、クリックするとtwitterから記事を読むことができます。
記事書いた。
— きっしー (@KissyWalk) 2017年12月9日
ブログ執筆にはStackEditがおすすめ！｜ほぼ毎日延長戦 https://t.co/XtYKMGMlUc
シェアボタンは、ブログ（トップページ）と記事は別にしておくといいと思います。例えば、トップページにはブログのシェアボタン、記事ページには記事のシェアボタンといった具合です。
以降に、各SNSのブログ用と記事用のリンクを記載します。
ボタンや画像にリンク張るなどしてご利用ください。
※Feedly以外はURLを変更する必要はありません。
そのままお使いください。
ブログ
<a class='social_item social_facebook' expr:href='"http://www.facebook.com/sharer.php?u=" + data:blog.homepageUrl + "&t=" + data:blog.title' rel='nofollow' target='_blank'><i class='fa fa-facebook social_icon'/><span class='social_num'>Facebook</span></a>
記事
<a class='social_item social_facebook' expr:href='"http://www.facebook.com/sharer.php?u=" + data:blog.url + "&t=" + data:post.title + "｜" + data:blog.title' rel='nofollow' target='_blank'><i class='fa fa-facebook social_icon'/><span class='social_num'>Facebook</span></a>
ブログ
<a class='social_item social_twitter' expr:href='"http://twitter.com/share?text=" + data:blog.title + " &url=" + data:blog.homepageUrl' rel='nofollow' target='_blank'><i class='fa fa-twitter social_icon'/><span class='social_num'>Twitter</span></a>
記事
<a class='social_item social_twitter' expr:href='"http://twitter.com/share?text=" + data:post.title + "｜" + data:blog.title + " &url=" + data:blog.url' rel='nofollow' target='_blank'><i class='fa fa-twitter social_icon'/><span class='social_num'>Twitter</span></a>
はてな
ブログ
<a class='social_item social_hatena' expr:href='"http://b.hatena.ne.jp/add?mode=confirm&url=" + data:blog.homepageUrl + "&" + data:blog.title' rel='nofollow' target='_blank'><i class='fa fa-hatena social_icon'/><span class='social_num'>Hatena</span></a>
記事
<a class='social_item social_hatena' expr:href='"http://b.hatena.ne.jp/add?mode=confirm&url=" + data:blog.url + "&" + data:post.title + "｜" + data:blog.title' rel='nofollow' target='_blank'><i class='fa fa-hatena social_icon'/><span class='social_num'>Hatena</span></a>
ブログ
<a class='social_item social_pocket' expr:href='"http://getpocket.com/edit?url=" + data:blog.homepageUrl' rel='nofollow' target='_blank'><i class='fa fa-get-pocket social_icon'/><span class='social_num'>Pocket</span></a>
記事
<a class='social_item social_pocket' expr:href='"http://getpocket.com/edit?url=" + data:blog.url' rel='nofollow' target='_blank'><i class='fa fa-get-pocket social_icon'/><span class='social_num'>Pocket</span></a>
Feedly
expr:hrefでうまくURLが生成できないため、URLを直接埋め込んでいます。わかったら更新します！
ブログ
<a class='social_item social_rss' href='http://cloud.feedly.com/#subscription%2Ffeed%2Fhttp://bgt-48.blogspot.jp/' rel='nofollow' target='_blank'><i class='fa fa-rss social_icon'/><span class='social_num'>Feddly</span></a>
記事
準備中。
Google+
ブログ
<a class='social_item social_google-plus' expr:href='"https://plus.google.com/share?url=" + data:blog.homepageUrl' rel='nofollow' target='_blank'><i class='fa fa-google-plus social_icon'/><span class='social_num'>Google+</span></a>
記事
<a class='social_item social_google-plus' expr:href='"https://plus.google.com/share?url=" + data:blog.url' rel='nofollow' target='_blank'><i class='fa fa-google-plus social_icon'/><span class='social_num'>Google+</span></a>
最後まで読んでいただきありがとうございます。
また読んでくださいませ。
そんじゃーね。
関連記事
SPONSORED LINK
SPONSORED LINK