Webサイト公開時の設定諸々（SNSシェア、解析タグ、公開後 etc）

初期設定

pugを使用。meta情報はjsonにまとめておく。

meta.json

{
    "site_name": "sampleサイト",
    "description": "サイトの説明",
    "sns_description": "シェア文言",
    "hashtag": "sample,sample2,sample3",
    "url": "http://sample.com",
    "via": "sample",
    "favicon_url": "favicon.ico",
    "webclipicon_url": "apple-touch-icon.png",
    "facebook_app_id": "123456789",
    "ogp_image_url": "http://sample.com/img/ogp.png",
    "keywords": [
        "サンプル",
        "sample",
        "qiita"
    ]
}

hashtag : 複数登録は","で区切る
favicon_url : ルートディレクトリでない場合はフルパス
webclipicon_url : 127*127
ogp_image_url : ogpは必ずフルパス 1200*630
※ htmlタグを含んだ文字列の場合、エスケープされたくないので!=を使う

↓meta情報まとめはこちら
head内に記述する要素の総まとめ -meta要素、link要素、ソーシャルサービス用の要素、ブラウザやスマホアプリ用の要素など

index.pug(エンコード処理)

- var encode_description = encodeURIComponent(sns_description);
- var encode_hashtag = encodeURIComponent(hashtag);
- var encode_url = encodeURIComponent(url);
- var encode_via = encodeURIComponent(via);

SNSシェア

デフォルトのボタンなら以下を参照
SNSのシェアボタンの設置方法まとめ (サンプルコード付き)

Facebook

まずはFBアプリ登録
https://developers.facebook.com/

• 本番用とテスト用のIDを取得
• 忘れないようにすぐに公開（AppReviewを'yes'に）
• ドメイン、url、emailなど設定

参考
FacebookでDeveloper登録とアプリ登録

続いて、以下を外部ファイルにまとめてincludeするとよい。

facebook.jade

#fb-root
script.
  window.fbAsyncInit = function() {
    FB.init({
      appId      : '#{facebook_app_id}',
      xfbml      : true,
      version    : 'v2.6'
    });
  };
  function shareFB(){
    FB.ui(
      {
        method: 'share',
        href: '#{url}',
      }
    );
  }
  (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/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));

  $('.js-share_fb').on('click', function(){
    shareFB();
  });

OGPのmetaタグ設定は以下参照。

tweetdig.net

tweetdig.net