< ホームへ戻る

AZO social share buttons

Customizable social share buttons.

2019年02月19日 更新

いきなりサンプル(samples)

突然ですが、こちらがサンプルページ(samples page)です。

ダウンロード(download)

唐突ですが、ダウンロードはGitHubでどうぞ。

基本設定(base settings)

ボタンを設置する前に、
設置先のページや、azo_ssb.jsファイルに適切な値をセットしてください。

  1. 前提

    2. Facebookの共有機能を利用する場合は、
    Facebook for Developersでアプリを作成し、そのアプリIDを使用します。
    Fcebookの設定ページにて、アプリにazo_ssbを設置するドメイン(例：hogehoge.com)を設定しておきます。

  2. 設置先のページ 設定その１(settings page to set buttons 1)

    3. OpenGraphメタタグ(OGP)をしっかり書いてください。(write OGP to your page)

    共有した先のシステムは、OGPの情報を読み出します。
    また、検索サイトでの表示などに使われます。しっかりページの説明をしましょう。

    • xmlns -> OGPやFacebookの名前空間
    • og:site -> サイト名
    • og:title -> ページのタイトル
    • og:type -> ページがサイトトップであれば"site"、記事であれば"article"
    • og:url -> ページのURL
    • og:image -> ページの代表的な画像
    • og:description -> ページの説明
    • og:locate -> ページの場所情報（日本語+日本なら"ja_JP"）
    • twitter:card -> Twitterカードの種類
    • twitter:site -> サイト管理者のTwitterアカウント（@付きで記述）
    • twitter:creator -> ページ作成者のTwitterアカウント（@付きで記述）
    • fb:app_id -> FacebookのアプリID（Facebook共有を使う場合は必須）

    特に、画像とTwitterのアカウント、FBのアプリIDは、azo_ssbでも使用します。
    （azo_ssb内で変更も出来ますが、ページに書いてしまった方がおすすめ。）

    また、以下のタグもazo_ssbでは読み出します。

    • <link="alternate" type="application:***（xmlとか）" title="RSS（2.0とかAtomとか）" href="https://hogehoge/feed.xml" />
  3. szo_ssb.jsの設定(settings to azo_ssb.js)

    4. 行数は都度変わるので、変数名を示します。

    • azo_ssb_home

      • azo_ssbを設置するディレクトリ名です。http://、またはhttps://から始まり、/で閉じてください。
      （例：azo_ssb_home = 'https://hogehoge.com/azo_ssb/';）

      オフラインでデバッグしたい場合は、この値は空文字列（''）でやります。(when debug, empty string)

    • this.hashtag

      • Twitter・Facebookへ共有した時に、ハッシュタグを１つ設定出来ます。

    • this.description

      • ページの説明です。デフォルトはOGPに記載された説明文で、この値に文章を入れると上書きされます。

    • this.image

      • 画像のURLです。デフォルトはOGPに記載された画像で、この値にURLを入れると上書きされます。

    • this.rss

      • RSSのURLです。デフォルトはlinkタグに記載されたURLで、この値にURLを入れると上書きされます。
      RSSを設定すると、RSS・Feedly・Inoreaderの共有ボタンが有効になります。

  4. szo_ssb.jsの詳細設定(small settings to azo_ssb.js)
    • facebook_appid

      • FacebookのアプリIDです。デフォルトはOGPに記載されたものを使うので空文字列でOKです。
      値を入れるとこの値を優先してアプリIDを使用します。

    • this.twitter_hashtag

      • Twitter共有時に追加するハッシュタグです。設定した場合、this.hastagを上書きします。

    • this.twitter_account_via

      • Twitter共有時に「@honyararaさんから(via)」の文言が追加されます。

    • this.twitter_account_follow

      • 共有後にフォローを促す表示がされます。デフォルトはOGPに記載されたsiteとcreatorの２つのアカウントです。

    • this.facebook_hashtag

      • Facebook共有時に追加するハッシュタグです。設定した場合、this.hastagを上書きします。

    • this.pinterest_media_url

      • Pinterest共有時に追加する画像URLです。デフォルトはOGPに記載されたもので、値に入れるとこの画像URLを使用します。

  5. azo_ssbファイル一式をazo_ssb_homeで設定したディレクトリに設置する(set azs_ssb files to azo_ssb_home directory)

    6. sampleフォルダは不要です。azo_ssb.jsとazo_ssb.cssと３つの画像ディレクトリがあればいいです。(no need sample)

ボタンを設置 その１(put buttons 1)

ボタンを設置する前に、
設置先のページや、azo_ssb.jsファイルに適切な値をセットしてください。

  1. azo_ssb.jsの読み出し

    2. まず、htmlファイル内のどこでも良いので、azo_ssb.jsを読み出すタグを書きます。 

    <script src="//hogehoge.com/azo_ssb/azo_ssb.js">

  2. 表示させたいボタン列の設定

    3. ボタン列を表示させたい箇所に、以下のようにscriptタグを書きます。 

    <script>
var azo_ssb_sample1_setting = {
  name: 'sample1',
  table_column: 0,
  table_row: 0,
  buttons: [
    AZO_SSB_BTN_TWITTER,
    AZO_SSB_BTN_FACEBOOK,
    AZO_SSB_BTN_TUMBLR,
    AZO_SSB_BTN_POCKET,
    AZO_SSB_BTN_LINKEDIN,
    AZO_SSB_BTN_EVERNOTE,
    AZO_SSB_BTN_BUFFER,
    AZO_SSB_BTN_BLOGGER,
    AZO_SSB_BTN_OTHER
  ],
  button_type: AZO_SSB_BTNT_ICON,
}
azo_ssb_array_add(azo_ssb_sample1_setting);
</script>

    • name -> ボタン列を識別する名前です。
    • table_column -> ボタン列の縦列の数です。0で無制限です。(0 is unlimit)
    • table_raw -> ボタン列の横列の数です。0で無制限です。(0 is unlimit)

      • table_columnもtable_rowも0を指定した場合、無制限に横１列表示します。

    • buttons -> azo_ssb.js最上部に定義された、ボタンの種類を羅列します。
    • button_type -> azo_ssb.js最上部に定義された、ボタンの表示形式を指定します。
      • AZO_SSB_BTNT_ICON アイコンのみ(only icon)
      • AZO_SSB_BTNT_LABEL ラベルのみ(only label)
      • AZO_SSB_BTNT_ICON_LABE アイコンとラベル(icon and label)
      • AZO_SSB_BTNT_ICON_LABE_NL アイコンとラベルの間に開業(icon new-line label)
  3. 表示させるボタン列のスタイルを、azo_ssb.css最下部に追記する。
    4. table.azo_ssb_sample1 {
  border-collapse: separate;
  border-spacing: 1em 1em;
}
table.azo_ssb_sample1 td {
  color: #FFFFFF;
  text-align: center;
  border-radius: 10%;
}
.azo_ssb_icon_sample1 {
  width: 2em;
}
    • table.azo_ssb_名前 テーブルのデザイン。ボタンの間隔など。
    • table.azo_ssb_名前 td テーブル内のセルのデザイン。ボタンの丸みなど。
    • table.azo_ssb_icon_名前 アイコンの大きさ。

ボタンを設置 その２(put buttons 2)

複数ページや動的ページに同一のボタンを設置する場合、
ボタン列定義やCSSファイルは、別途テンプレートとして分離しておくことをおすすめします。

同梱の、template1ファイルの記述をご覧ください。

謝辞(acknowledgments)

azo_ssbは、SNS共有ボタンの雄、「AddToAny」をリスペクトして作成されました。

参照(reference)