さくらのレンタルサーバスタンダードで、SNSのシェアボタンを設置する

参考にさせて頂いたページ

LINEで送るボタンを設置する

ツイートボタンを設置する

これも公式ページTwitterボタン | Aboutを見たら普通にできる

Facebookのシェアボタンを設置する

参考ページ株式会社ISSUN（イッスン） facebookのOGP設定について » 株式会社ISSUN（イッスン）に沿って進めていった。

結果として自分のページに入れたのは以下のソースコード

<html xmlns:og=”http://opengraphprotocol.org/schema/” xmlns:fb=”http://www.facebook.com/2008/fbml” >

<meta property="og:type" content="website" />
<meta property="og:url" content="http://utility.sakura.ne.jp/line_stamp/sora_and_sakura.html" />
<meta property="og:image" content="http://utility.sakura.ne.jp/line_stamp/assets/img/main.png" />
<meta property="og:locale" content="ja_JP" />
<meta property="og:title" content="LINEスタンプ「忍者そらとさくら」" />
<meta property="og:description" content="LINEスタンプ 「忍者そらとさくら」のページだよ。かわいい忍者スタンプを一目みてね。" />
<meta property="og:site_name" content="LINEスタンプ 忍者そらとさくら (C) 2014 Motomichi" />
<meta property="fb:app_id" content="789024797830247" />

FacebookのデベロッパーページではApps > Settingsの順に遷移して、

Display Name(たぶん何でも良いんだけど、参考ページに沿ってやってみたので、UTILITY_SAKURA_NE_JP)
App Domains(ボタンクリック時シェアするページのドメイン)
Contact Email(自分のEメールアドレス)
Site URL(ボタンクリック時シェアするページのURL)
Mobile Site URL(ボタンクリック時シェアするページのURL)

の5項目を入力して保存した。

次にApps > Status & Review の順に遷移して、Do you want to make this app and all its live features available to the general public?と書いてある項目をonにした。

サンドボックス設定のon/off変更らしい。

シェアボタンはサーバーにアップしないと表示されない

ローカルでhtmlを開いても表示されない

シェアボタンを押してみたら 403 Forbidden エラーが出た

ページへのアクセス権が無いとのこと。

さくらインターネットはどうやらデフォルトで海外のIPアドレスからのアクセスを禁止しているようなのでそれが原因だった。

debugツールで反映する

参考ページFacebookのシェアボタンで、403 Forbiddenが表示される場合の解決方法 | ホームページ制作の合同会社ジョイネットに沿って進めた。

キャッシュとかがクリアされて反映されるらしい。

ツイートボタンの右の余白を調整する

検索したり、自分でいじってみたりしたけど、いまのところpxで指定するしかなさそう。

overflow:hidden;が設定してあるので、はみ出た部分が消えちゃうけど。

facebookのシェアボタンの上下の余白を調整する

facebookのシェアボタンは、line-heightの影響を受けているので、line-heightの数値を調整するか、vertical-alignで調整すると良さそう。

facebookのシェアボタンを非同期で読み込む

facebookのシェアボタンをブログに設置する方法（読み込み速度改善版）にあるように

js.async = true;

の一行を追加すると良いらしい。

以下のソースコードは引用

<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.async = true;
  js.src = "//connect.facebook.net/ja_JP/sdk.js#xfbml=1&appId=◯◯◯◯◯◯◯◯◯◯&version=v2.0\";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

とのこと。

Motomichi Works Blog

モトミチワークスブログです。その日学習したことについて書いている日記みたいなものです。