サイトの自分の好きな位置にインスタの画像を貼ってみる

＜備忘録：インスタ貼り付け＞

 サイトやWordpressでインスタの自動更新の写真を埋め込みたいと思ってコードを調べていましたが、なかなか簡単にできるのが見つからず、結局APIを使うハメになったので、その備忘録です。

やること 
・インスタをプロアカウントにする
・Facebookのページ作成（インスタと紐づけ）
・アプリID・app secret・ユーザーアクセストークンの取得
・InstagramプロアカウントID・アクセストークンの取得 ・貼り付ける

インスタの準備

1. 自分のプロフ画面の「設定」からプロアカウントを設定する。（プロアカウントは無料）
2. 設定後にプロフに出る「プロフィールを編集」を選ぶ。
3. 公開情報の「ページ」を選ぶ。
4. 「Facebookページを作成」を選ぶ。
5. ページがない時は作成・あるときは紐づけをして設定する。（Facebookページは公開される）
   
   

アプリID・app secret・ユーザーアクセストークンの取得

1. https://developers.facebook.com/にアクセスし、右上の「マイアプリ」を選ぶ。
2. 右上の「アプリを作成」をタップ。
3. ユースケース画面の「その他」を選んで次へ
4. アプリタイプ画面「なし」を選んで次へ
5. 自分のわかりやすいアプリ名と、メールアドレスを入力し「アプリを作成」をクリック。
6. 画面が変わったら左側のメニューより「設定」の中にある「ベーシック」から[アプリID]と[appsecret]をメモやコピペしておく。
7. 上のメニューから「ツール」を選択し、「グラフAPIエクスプローラー」を選ぶ。
8. 「トークンを取得」より「ユーザーアクセストークンを取得」をクリック。
9. ログイン画面が出るのでFacebookのアカウントにログインする。
10. 画面が戻ったら右側のメニューのユーザートークンの下にあるアクセス許可に初期設定されている「public_profile」を含めた以下の9項目を追加する。
    
    


・public_profile
Events Groups pages内の
・business_management
・pages_manage_metadata
・pages_read_engagement
・pages_read_user_content
・pages_show_list
Other内の
・instagram_basic
・instagram_manage_comments
・instagram_manage_insights
11. 「Generate Access Token」をクリック
12. 表示された英数字のユーザーアクセストークンをメモ・コピペしておく。
    
    

InstagramのプロアカウントID・アクセストークンの取得

API Query Makerにアクセスし、順に入力していく。
「Instagramビジネスidとアクセストークンを取得」をクリックし下に表示される「InstagramプロアカウントID」と「アクセストークン」をメモ・コピペしておく。

埋め込む

上記の「InstagramプロアカウントID」と「アクセストークン」を使い、以下のコードを表示したい箇所に埋め込む

独自ドメインを持っている状態でサーバーの引っ越しの仕方

＜備忘録：サーバー編＞ 

独自ドメインを使っていたサーバーからドメインをそのままで、新しいサーバーでも使いたいという必要に迫られたので、そのままやったことを書き出しておきます。

引っ越しの準備

・使っていたサーバー（旧サーバー）からこれから使うサーバー（新サーバー）のスペック確認
旧サーバーよりも新サーバーの方が容量が多いとか、速度が早いとかないと意味がないのでその確認。

・旧サーバーのデータのバックアップ
とにかくエクスポート出来るものは何でもエクスポートしておく。画像が意外とネックになるので本当に消えてしまっては困る画像は手動で保存。FTPが使えたらそこに出てくるものもとりあえずできる限りダウンロード。

・新サーバーの契約

引っ越しの開始

・新サーバーでサイトやブログを作成し、旧サーバーで使っていたドメイン（サブドメイン）を登録する。そのサーバーに出てくるサーバー情報からIPアドレスを確認しておく。

・旧サーバーで使用を始めた時にドメイン登録でDNS設定をしていると思うので、契約している（ネームサーバーを登録している）ドメインサイトへ行き、旧サーバーで登録したDNS設定を確認しておく。（まだ消さない）

・新サーバーのDNS設定をサーバー情報から確認し、ドメインサイトのDNS設定画面から新サーバーのDNS設定を登録する。

・一定時間後、反映されているはずなのだが普通にアドレスにアクセスすると旧サーバーのサイト（ブログ）画面が出てしまうので、一時的に自分のPCからのみ新サーバーのアドレスにアクセスできるように設定を変える⇓

・自分のPCからメモ帳やテキストソフトを「管理者として実行」して開いてから[hosts]ファイルを開く

hostsファイルの場所

Windows 7以降

C:\Windows\System32\drivers\etc\hosts
フォルダから入っていくか、検索に[hosts]と入れる

macOS

/private/etc/hosts
ツールバーの「移動 」→「フォルダへ移動」で「/private/etc」を入力する

開いたら、文字列の一番下に調べておいた

新サーバーのIPアドレス[半角スペース]使っているドメイン（サブドメイン）

を入れて保存。これで自分のPCからのみ新サーバーの方のドメインアドレスが見れるようになったりブログなどなら設定画面が出るようになる。

・ブログやサイトを新サーバーに移し、データのエクスポートや修正などが終わりサイト構築できたら新サーバーで一度アドレスにアクセスして状態を確認し、問題なかったら先程変更した[hosts]ファイルを再び開き、入力した

新サーバーのIPアドレス[半角スペース]使っているドメイン（サブドメイン）

を消去して保存する。これで旧サーバーのアドレス画面が再び表示されるようになる。
※この時表示がうまく切り替わらない場合は「スペースキー+F5」を押してキャッシュクリアをして更新する。

・再びドメインサイトへ行き、DNS設定を開いて旧ブログで登録していたDNS設定を消去する。

・これでサーバーの引っ越しが完了。

※ちゃんと切り替わっているか確認するには
・一定時間待つと新サーバーの方の画面が表示されるようになるので、再び[hosts]を「管理者として実行」として開き、今度は

旧サーバーのIPアドレス[半角スペース]使っているドメイン（サブドメイン）

と文字列の一番下に入れて保存。

ドメインアドレスにアクセスするとエラーページが出る。問題なければこれで旧サーバーからのアクセスはできなくなっているのを確認できる。[hosts]をもとに戻しておく。

・新サーバーの様子を見つつ1週間～1ヶ月ほどは旧ブログをそのままにしておき、問題がなさそうなのを確認したら旧サーバーのサイトやブログを消去・またはサーバーの解約をする。