1. Add a new mod: Adding button on Twitter
Navigate to twitter.com and load up a tweet - this one, for example 😹
We’re choosing to add a Button trigger to this mod - so from the blue Add menu in the Page Editor we’re choosing the Button trigger
We’re naming our Name: Twitter Flash News
I decided not to have a Caption so left this one blank
Now you want to select a selector that works for a place somewhere near the top where you can quickly press a button. In my timeline - Twitter does change quite quickly - the best selector for this is the .r-k4xj1c
This selector targets the three dot menu of twitter and adds a little button next to it.
I also want to highlight the fact that I want this button to appear only on “status” tweets so I will change the Sites field to be https://twitter.com/*/status/*
Now let’s go into the advanced options:
I want to send this tweet directly to Slack, so it’s appropriate to have a Slack icon
I want the button to appear at the End.
and the most complicated part of this brick is to edit the template and replace it with the one I made here:
2. Adding a brick: Sending to slack
Let’s go ahead and add a new brick, this time we’re looking for “Send a Slack message”
Click the Add a brick button and search for the Brick as named above.
We’re gonna configure this block in the following way:
We’re setting the hookURL to be https://hooks.slack.com/services/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
I am also entering the channel to be test-messages
and the text of the message will be:
Check out <{{@input.url}}|{{@input.title}}>
{{ @input.description | truncate(100) }}
Let’s analyze what this block of templating code does:
In Slack when you post a link using this format “<URL | text>” it turns the link into the text so that anyone can click it.
To achieve this dynamically I pass the variables @input.url
and @input.title
using that specific format.
Then on a new line I pass @input.description
and I add a filter to truncate the text to only display the first 100 words.
Now you might be wondering - where are these variables @input.url @input.title and @input.description coming from?
The answer is that they’re given to us (for free so to speak) when we create the input button, they’re evaluated in the context of the button input brick - which is the first brick we configured in this tutorial.
Conclusions
It’s simple to automate repetitive actions with Pixiebrix, especially when you want to do high impact things quickly!
From here, my team can see the tweets I flagged as noteworthy, and be on top of what’s happening with our company’s twitter interactions
Thank you for reading!