広告を利用しています

当サイトは広告を掲載しています。消費者庁が2023年10月1日から施行した景品表示法の規制対象(通称:ステマ規制)にならないよう配慮して記事を作成しています(記事はこちら、消す方法はこちら

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

2023年1月30日JavaScript

「Instagram」のアイコン

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

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

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

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

Instagramのホームに表示される「おすすめの投稿」画像

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

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

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

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

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

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

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

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

インストール方法

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

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

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

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

Tampermonkeyにコードを書き込む手順画像1

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

// ==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です。上部の「ファイル」タブ→「保存」をクリックします。

Tampermonkeyにコードを書き込む手順画像2

「Instagram」のページに戻って、一度ページをリロードします。左側サイドバーの「ホーム」の下に新しく「過去の投稿」という文字が追加されます。

Instagramの左側サイドバーに「過去の投稿」ボタンを設置するJavaScriptを実行してみたGIF画像

クリックすると、「https://www.instagram.com/?variant=past_posts」ページに移動します。

Instagramの左側サイドバーに「過去の投稿」ボタンを設置してクリックした画像

一時的に無効化したい場合は、Instagramにアクセス→Tampermonkeyをクリック→「左側サイドバーに過去の投稿リンクボタンを設置」をオフにします。ページをリロードすると、元通りになります。

Tampermonkeyに書いたスクリプトを一時的に無効化する手順画像

完全にいらなくなった場合は、コード自体を削除します。

感想

以上、PCウェブサイト版「Instagram(インスタグラム)」の左側サイドバーにある「ホーム」の下に、新しく「過去の投稿」リンクボタンを設置するJavaScriptでした。

余談ですが、検索結果の「人気投稿」を削除することもできます。

本記事で利用させていただいたアイコン画像:社会-メディアは instagramでは スクエア – ソーシャルメディアとロゴ アイコン

2023年1月30日JavaScript

Posted by ナポリタン寿司