🐦

Tweet a Link (5 min)

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

It works by adding a Quick Bar action that you can trigger from any page on the web.
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.
You can then customize your message and send the tweet.

✅

Want to start using this blueprint rather than building it from scratch? You can activate this blueprint with a few clicks from our marketplace.

Let’s add a Quick Bar

You can navigate to any URL, but you can start on a YouTube page, like our YouTube channel! Shameless plug to check it out if you haven’t already.

The first step of this tutorial is to add a QuickBar to this page, so let’s open the PixieBrix Page Editor extension (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 then select a Quick Bar trigger from the top left menu.

Once the QuickBar has been added, we can configure the action!

Extension 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!

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 create a fresh 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 that we’re going to post (from the page we triggered the extension).

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 by 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 blueprint.
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”)

Enabling the Quick Bar

Ready to test this out? If you haven’t configured your Quick Bar, you’ll need to do that to open the Quick Bar menu. Just go to chrome://extensions in your browser, then hover on the left-hand side to open a Keyboard Shortcuts menu.

Scroll to PixieBrix and you can set the keys for toggling the Quick Bar on or off.

🙋

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