Tweet a Link

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

This tutorial will show you how to create a Quick Bar action to grab a link and draft a tweet with just a click.

1. It works by adding a Quick Bar action that you can trigger from any page on the web.

2. When triggering the action, it will grab the current page’s URL and open a new tab with a tweet compose box drafted with the URL.

3. You can then customize your message and send the tweet.

1. Add a Quick Bar

You can navigate to any URL, but you can start on a YouTube page, like our YouTube channel!

The tutorial's first step is adding a QuickBar to this page, so let’s open the PixieBrix Page Editor. You can do this by pressing F12 or inspecting the page and then navigating to the PixieBrix tab.

Once the Page Editor is open, click Add and select a Quick Bar trigger from the top left menu.

Once the Quick Bar has been added, we can configure the action!

Name: Tweet This Link

Action Title: Tweet This Link

Under Advanced, I selected the Icon to be the Twitter icon

Once you’re done, it should look like this!

2. Add the Tweet in a new tab brick

To add another brick, select the + button below the Quick Bar brick.

Now we’re going to add a brick that, as the name implies, will open a new tab and draft a tweet with whatever content we desire.

Let’s go ahead and add it by adding the brick by searching for Tweet in a new tab

Now we need to configure the brick with any details we want to pass it.

We’ll add the URL we will post (from the page we triggered the mod).

Optionally we can also define a “via” field - which would let us append an account to the append of the tweet saying “via @account”. We’ll select the “ABC” and choose to exclude this.

• url: You can reference the URL of the page you triggered the action with using @input.url.

• via: Click on the drop-down (by default ABC) and click Exclude it

• text: This will be the text of our tweet. If you often include some text in your tweet, you’re welcome to add something here; just keep in mind anything you add will show up every time you use this mod.

• hashtags: You can leave it empty or add any hashtags you’d generally use (and notice that you should do so without the preceding # character)

Let’s test it out and see how it looks.

Now all you have to do is add any text you want to share to your tweet and press send.

You can do that manually by pressing the send button or use a couple of extra PixieBrix bricks to get it done (this would be using the bricks “Wait for DOM event” and “Simulate DOM event”)

3. Editing Quick Bar shortcut

Ready to test this out? By default, you'll open your Quick Bar by pressing CMD/CTRL + M . If you would like to change that, you can change your Quick Bar shortcut to another combination of keystrokes.

🙋Need some help with building? Head over to the Slack Community, and we’ll gladly help you!