🕰️

View Old Versions of a Website with the Wayback Machine (8 min)

🍎

Before you begin this tutorial, make sure you've completed the Quick Start Guide

In this tutorial, we'll add a button to Twitter to "go back in time" to see what a page looked like in the past. We can do this using the Wayback Machine, a digital archive of the internet

To develop our workflow, we'll use Uber's account (@Uber) as an example. But, our button will work on any Twitter account page. As you can see in the screenshot below, the Wayback Machine has a history of Uber's account as far back as April 6, 2008:

image

1. Place a Button

Open the Page Editor

Navigate your browser to Uber's Twitter account, and open the PixieBrix Page Editor

Place a Button

  • Click Add in the top left of the Page Editor and choose Button
  • Then hover your cursor over "More" on the left side of the page above Tweet
image
  • Toggle the More dropdown menu. To do this while in insert button mode, hold down the "Option" key (Mac) or "Alt" key (Windows) and click on More
  • Place the button in the More dropdown
    • Hold down the "Shift" key and click any button in the button group
    • Let go of "Shift" and click any other button in the button group. PixieBrix will add a new custom button to the bottom of the button group
image

Fixing the Button's Style

  • There is no spacing between the icon and the caption. To fix the spacing, go to the Foundation tab and scroll down to the Template section
  • Scroll to the bottom of the template, and you will see {{{ caption }}}
  • Place the text cursor in front of {{{ caption }}} and click space three times. This will insert non-breaking spaces (written as  ) into the template between the the icon and the image
image
  • The template should now look like this:
<div class="css-1dbjc4n r-1awozwy r-18u37iz"><a target="_blank"
        role="link"
        data-focusable="true"
        class="css-4rbku5 css-18t94o4 css-1dbjc4n r-1loqt21 r-16y2uox r-dnmrzs r-1ny4l3l r-o7ynqc r-6416eg"
        rel=" noopener noreferrer"
        href="#">
        <div class="css-1dbjc4n r-18u37iz r-16y2uox r-1j3t67a r-9qu9m4">
            {{{ icon }}}<div dir="auto"
                class="css-901oao css-bfa6kz r-1fmj7o5 r-16y2uox r-1qd0xha r-a023e6 r-16dba41 r-ad9z0x r-bcqeeo r-qvutc0">
                <span
                    class="css-901oao css-16my406 r-poiln3 r-bcqeeo r-qvutc0">&nbsp;&nbsp;&nbsp;{{{ caption }}}</span>
            </div>
        </div>
    </a></div>

Customize the Caption and Icon

Click the Page Editor Menu Item tab and replace the word "Action" with "Wayback." To customize the icon, type "clock" and choose the clock in the Icon dropdown.

Your button should look like this:

image

You must close the dropdown before continuing to the next step. To do close the dropdown, click on the webpage outside of the dropdown.

2. Select Data

🚨

The "More" dropdown must be closed to perform this step. To close the dropdown, click on the webpage anywhere outside of the dropdown

Add the Context Data Reader

  • Go to the Page Editor Data tab and click Add Existing
  • Type "context reader" in the search box and choose the Context reader
  • At the bottom of the Page Editor you should now see the following Raw Data
image
  • We will use the url property path when configuring the act in the next step of the tutorial

3. Perform an Action

Define the Target URL

In a separate browser tab, navigate to the Wayback Machine, and input the URL of Uber's Twitter account:

image

Click BROWSE HISTORY and you will be taken to the following URL:

https://web.archive.org/web/*/https://twitter.com/Uber

We can see in the URL that the target URL appears after the /*/ segment of the URL.

📖

Advanced: you can narrow down the request by providing by including part of a date (in YYYYMMDD format) in front of the *. See this Wikipedia documentation for details

If we wanted to view the page history for a different account, we could switch the "Uber" segment of the URL with a different account name.

Configure the Open a Tab Action

  • Go to the Effect tab of the Page Editor and click Add a Block
  • Search "open a tab" and select the "Open a tab" effect to add it
  • In the configuration section that opens, we'll define a URL template for the URL argument. Our data property path for the Twitter account URL was url. To have PixieBrix dynamically create the URL, we'll use PixieBrix's template support:
  • https://web.archive.org/web/*/{{{url}}}

When we click the button, PixieBrix will fill in the value of the url.

🚨

We surround myVariable with three sets of braces in this example so that PixieBrix fills in the exact text. Otherwise, PixieBrix's default behavior with double braces "{{" is to escape the special characters in the URL (e.g., converting / to &#47;) to ensure the text renders correctly on a webpage.

Test Your Search

Press the Wayback button to test your workflow.

Click into the Wayback Machine's timeline to see a historical view of Uber's Twtter account. For example, here's what it looked like on November 10, 2010:

image

Try your Wayback button from different Twitter accounts to see how the URL dynamically changes. Once you're happy with the button, click Save to use this search in the future.