【Instagram】左側に「過去の投稿」ボタンを設置するJavaScript

2023年1月30日2023年11月26日JavaScript

この記事では、PC版「Instagram」の左側サイドバーに、「過去の投稿（/?variant=past_posts）」ページを開くためのリンクボタンを設置する「JavaScript」を紹介します。

ウェブサイトに「JavaScript」を適用できるChrome拡張機能「Tampermonkey（タンパーモンキー）などを利用します。

PC版Instagramの「ホーム」だと、フォローしている人の投稿後に、全く関係ない人の「おすすめの投稿」が表示されます。人によっては、不快かもしれません。

フォローしている人だけの投稿にしたい場合、「/?variant=past_posts」ページにアクセスする必要があります。こちらは、フォローしていない人の投稿が表示されません。

Instagramの「過去の投稿（/?variant=past_posts）」ページ画像

ブックマークに登録することで、多少アクセスしやすくなりますが、もっとアクセス性を向上したいと思うかもしれません。

JavaScriptを利用して、左側サイドバーに新しく「過去の投稿」というリンクボタンを設置してみたいと思います。Instagram上であれば、いつでもアクセスできます。

人工知能「ChatGPT（チャット・ジーピーティー）」に手伝ってもらい、作成しました。JavaScriptができる方からしたら、汚いコードだと思うかもしれません。

任意のウェブサイトに自分で作成したJavaScriptを実行できるChrome拡張機能「Tampermonkey（タンパーモンキー）」を利用します。（Firefoxはこちら）本拡張機能以外にも、JavaScriptを実行できる拡張機能はいくつかあります。どれでもOKです。

ホームから、「おすすめの投稿」だけを非表示にしたい場合

下記記事にて、CSSや、広告ブロッカー「uBlock Origin（ユーブロック・オリジン）」のフィルター機能を利用して、ホームの「おすすめの投稿」を非表示にする方法を紹介しています。気になった方は、参考にしてみてください。

【PC版Instagram】ホームの「おすすめの投稿」を消す方法

この記事では、PC版Instagramのホームで、フォローしている人の投稿が終わった後に続く「おすすめの投 ...

https://www.naporitansushi.com/instagram-home-recommended-po...

1. インストール方法
2. Instagramのサイドバーに「過去の投稿」を追加するJavaScript
3. 感想

インストール方法

Chromeウェブストアから「Tampermonkey（タンパーモンキー）」をインストールします。

Tampermonkey - Chrome ウェブストア

ユーザースクリプトでウェブを書き換える

https://chromewebstore.google.com/detail/tampermonkey/dhdgff...

Firefoxをご利用の方は、以下からインストールできます。

Tampermonkey – 🦊 Firefox (ja) 向け拡張機能を入手

Firefox 向け Tampermonkey をダウンロード。Tampermonkey is the world's most popular userscri ...

https://addons.mozilla.org/ja/firefox/addon/tampermonkey/

Instagramのサイドバーに「過去の投稿」を追加するJavaScript

「Tampermonkey」をインストールした状態で、「Instagram」にアクセスします。インストールした「Tampermonkey」アイコンをクリック→「新規スクリプトを追加」をクリックします。

コードを書き込む画面が表示されるので、全文を削除して、以下のコードを書き込みます。

// ==UserScript==
// @name         左側サイドバーに「過去の投稿」リンクボタンを設置
// @namespace    https://openai.com/blog/chatgpt/
// @namespace    https://www.naporitansushi.com
// @version      0.1
// @description  PC版Instagramの左側サイドバーの「ホーム」ボタンの下に「過去の投稿（/?variant=past_posts）」を開くリンクボタンを設置するJavaScript
// @author       ChatGPT（指示したのはナポリタン寿司）
// @match        https://www.instagram.com/*
// @match        https://www.instagram.com
// @icon         https://www.google.com/s2/favicons?sz=64&domain=instagram.com
// @grant        none
// ==/UserScript==

let p=document.querySelector(".xh8yej3.x1iyjqo2"),d=p.querySelector("div"),a=document.createElement("a");
a.href="/?variant=past_posts";
a.textContent="過去の投稿";
a.style.cssText = "font-size: 24px; display: block; margin: 10px 0 10px 20px;";
p.insertBefore(a,d.nextSibling);

本コードは、Instagram上だけで動作します。それ以外のサイトでは動作しません。

仕組みとして、左側サイドバー（.xh8yej3.x1iyjqo2）の1つ目のdiv（ホーム）のあとに、新しくHTMLのaタグを設置して、リンクを「/?variant=past_posts」、名前を「過去の投稿」にしています。自分が分かりやすいようテキストを編集してもOKです。

以下のようになればOKです。上部の「ファイル」タブ→「保存」をクリックします。