Download Facebook Photos Instantly with One Click (Simple Automation Trick)

There’s a little frustration most people don’t talk about – saving images from Facebook.

You open a post, click on the image, wait for it to load, right click, save… and do the same thing over and over again. It’s easy enough, just pointlessly repetitive.

This is the sort of problem that automation is supposed to fix.

So I made a simple script that adds a lovely “Download Photo” button right on each post instead of having to click through multiple times every time. Just click once – and the picture is instantly saved.

No additional tabs. No sifting through menus.

Why it’s important

If you don’t download images frequently, it may not seem like a big deal. But if you’re the type of person who is:

• Collects material for study

• Save Reference / Inspiration

• Social media data works

• Or is into efficiency

And then those extra clicks add up quickly.

This little tweak solves all that friction.

What this script really does

• Automatically detects images in posts.

• Adds a download button in clean native style

• Ignores small icons and images that are not important

• Scrolling works every time

It runs in the background quietly and improves the experience without getting in your way.

I was focused on

I didn’t overthink it; I kept it simple:

• Light weight

• Reliable dynamic page loading

• Visually matches Facebook’s design

• User-friendly, no learning curve

There was no goal to make something flashy, just something that works smoothly every time.

The bigger picture

This is just one example of how a little automation can make a difference.

You don’t need big systems or heavy tools all the time. Occasionally a few lines of clever code can completely remove the need for repetitive work.

And once you start noticing these patterns, you’ll see how many daily tasks you can simplify.

Conclusion

If you repeat the same steps on websites, it can usually be automated.

This little script saves a multi-step process in one click – and that’s the kind of efficiency that scales.

If you care about similar ideas around automation, scraping, or simplifying workflows, there is a lot more you can build here.

// ==UserScript==
// @name         FB Universal Photo Downloader
// @namespace    http://tampermonkey.net/
// @version      1.4
// @description  Professional download button that follows the image
// @author       Ali
// @match        https://web.facebook.com/*
// @grant        GM_download
// ==/UserScript==

(function() {
    'use strict';

    const BTN_ID = 'ali-fb-dl-btn';

    // 1. Professional Styling (FB Design System)
    const injectStyles = () => {
        if (document.getElementById('ali-styles')) return;
        const style = document.createElement('style');
        style.id = 'ali-styles';
        style.innerHTML = `
            .${BTN_ID} {
                background-color: #0866FF;
                color: white;
                border: none;
                padding: 7px 14px;
                margin: 10px;
                border-radius: 6px;
                cursor: pointer;
                font-family: "Segoe UI", Helvetica, Arial, sans-serif;
                font-size: 13px;
                font-weight: 600;
                display: inline-flex;
                align-items: center;
                z-index: 999;
                transition: background 0.2s;
            }
            .${BTN_ID}:hover { background-color: #0552D1; }
            .${BTN_ID} svg { margin-right: 6px; fill: white; }
        `;
        document.head.appendChild(style);
    };

    const downloadHandler = (imgSrc) => {
        if (!imgSrc) return;
        GM_download({
            url: imgSrc,
            name: `FB_Image_${Date.now()}.jpg`,
            saveAs: true
        });
    };

    const processPosts = () => {
        // Find all images that look like post content (usually have 'scontent' in URL)
        const allImages = document.querySelectorAll('img[src*="scontent"]');

        allImages.forEach(img => {
            // Filter out profile pictures and small icons
            if (img.width < 300) return;

            // Find the closest common container for a post (x1lliihq is the most reliable "block")
            const postContainer = img.closest('.x1yzt60w') || img.closest('.x1lliihq');
            if (!postContainer) return;

            // Strict Check: Don't add if button exists in this container
            if (postContainer.querySelector(`.${BTN_ID}`)) return;

            const btn = document.createElement('button');
            btn.className = BTN_ID;
            btn.innerHTML = `
                <svg width="14" height="14" viewBox="0 0 20 20">
                    <path d="M10 2v8.586L12.293 8.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 111.414-1.414L9 10.586V2a1 1 0 112 0zm-7 13a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"/>
                </svg>
                Download Photo
            `;

            btn.onclick = (e) => {
                e.preventDefault();
                e.stopPropagation();
                downloadHandler(img.src);
            };

            // Insert at the top of the post for guaranteed visibility
            postContainer.prepend(btn);
        });
    };

    injectStyles();

    // Check every 2 seconds (More reliable for FB's heavy React updates)
    setInterval(processPosts, 2000);
})();