カバの樹

忘れないように記録しとこ

  • TOP
  • このサイトについて
  • vue.js
    • ライブラリ
      • UI Components
      • UI Layout
      • UI Utilities
      • Utilities
    • まとめ
  • WordPress
  • CodeIgniter
  • お問い合わせ
  1. TOP >
  2. vue.js >
  3. ライブラリ >
  4. UI Components >
  5. Social Sharing >

Vue.jsでFacebookログインボタンを実装する「vue-facebook-login-component」

2020年3月26日

Vue.jsでFacebookログインボタンを実装する「vue-facebook-login-component」

目次

  • vue-facebook-login-componentとは
  • 環境
  • インストール
  • 導入手順
  • さいごに

vue-facebook-login-componentとは

vue-facebook-login-componentは、Vue.jsでFacebookログインボタンを実装するコンポーネントライブラリです。

 

Vue.jsでFacebookログインボタンを実装する「vue-facebook-login-component」

 

環境

Vue 2.6.10
vue-facebook-login-component 2.2.1

インストール

以下のnpm、yarn、CDNを使ってインストールします。

npm

npm install vue-facebook-login-component

yarn

yarn add vue-facebook-login-component

CDN

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vueFacebookLoginComponent.umd.min.js"></script>

 

gitリポジトリは以下から取得できます。

https://github.com/adi518/vue-facebook-login-component

 

導入手順

1. ライブラリの取り込み

(1)ES6等の場合 [注意]モジュール版は未検証です。

import VFacebookLogin from 'vue-facebook-login-component'

(2)CDNの場合

なし

2.メソッドを設定

new Vue({
  el: '#app',
  data: {
    FB: {},
    model: {},
    scope: {}
  },
  methods: {
    handleSdkInit: function(a) {
      this.FB = a.FB;
      this.scope = a.scope;
    }
  }
});
 

3. テンプレートを準備

<v-facebook-login> を設定します。

[注意] サンプルはケバブケースで記載しています。

<div id="app">
  <v-facebook-login app-id="238734777526940" v-model="model" @sdk-init="handleSdkInit"></v-facebook-login>
</div>

 

app-idにFacebook アプリIDを設定します。

 

アプリIDを取得するには、デベロッパーアカウントの登録をする必要があります。
以下のサイトなどを参考にしてください。
https://biz.comlog.jp/manual2/20098.html

 

サンプル

https://kabanoki.github.io/vue/vue-facebook-login-component/

 

さいごに

Vue.jsでFacebookログインボタンを実装するコンポーネントライブラリでした。

 

今日はこの辺でー

 

  • Twitter
  • Share
  • Pocket
  • Hatena
  • LINE
  • コピーする
  • この記事を書いた人

カバノキ

印刷会社のWEB部隊に所属してます。 WEB制作に携わってから、もう時期10年になります。 普段の業務では、PHPをメインにサーバーサイドの言語を扱っています。 最近のお気に入りはJavascriptです。 Vue.jsを狂喜乱舞しながら、社内に布教中です。

-Social Sharing, UI Components, vue.js, ライブラリ
-Facebook, Facebookログインボタン, コンポーネント, ライブラリ

カバノキ


記事についての感想・質問 コメントをキャンセル

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。

関連記事

vue.js

[Vue.js]まとめてチェック機能を自作する
【2019年9月】Vue.jsライブラリ記事まとめ

vue.js

【2019年9月】Vue.jsライブラリ記事まとめ
始めにボヤっと表示されるlazy load「vue-progressive-image」

vue.js

始めにボヤっと表示される lazy load「vue-progressive-image」
Vue.jsでシンプルなライトボックスを実装する「vue-pure-lightbox」

Overlay UI Components vue.js ライブラリ

Vue.jsでシンプルなライトボックスを実装する「vue-pure-lightbox」

Charts UI Components vue.js ライブラリ

Vue.jsで配置図を実装する「vue-dag」

vue.js

データの変更に対して、v-bindやv-ifが反応しない時の対処法
PREV
Vue.jsでレイアウト変更なしにスクロールバーを設定する「vue2-perfect-scrollbar」
NEXT
Vue.jsでページネーションをクリックしたらリストのトップへスムースクロールさせる

管理人のコメント

Electronが面白くて全然ブログ更新できてない・・・なお次はStable diffusionをお触りする模様(2023.03.13)

検索

新着記事

Date Picker Form UI Components vue.js Vue3 ライブラリ

Vue3で簡単にDate Time Pickerを実装!「Vue Datepicker」の使い方

2023/3/17

PHP vue.js

テキストエリアのPOST値を直接Vueのdataに渡すとエラーになる

2023/2/24

PHP

PHPで作るTeamsへの通知Bot

2023/2/22

Electron React

[Electron]wait-onでlocalhostを使うと待機状態が永遠に続く

2023/2/7

EC-CUBE

[EC-CUBE4系]受注一覧を注文日で並び替えする

2023/2/2

よく読まれる記事

まだデータがありません。

最近のコメント

  • 高機能なセレクトボックス「vue-select」の使い方 に K より
  • 高機能なセレクトボックス「vue-select」の使い方 に カバノキ より
  • 高機能なセレクトボックス「vue-select」の使い方 に K より
  • 高機能なセレクトボックス「vue-select」の使い方 に カバノキ より
  • 高機能なセレクトボックス「vue-select」の使い方 に K より

目次

  • vue-facebook-login-componentとは
  • 環境
  • インストール
  • 導入手順
  • さいごに
  • TOP
  • プライバシーポリシー
  • このサイトについて
  • お問い合わせ

カバの樹

忘れないように記録しとこ

© 2023 kabanoki.net