This tutorial will show you how to create one button to share a message directly to social media without having to re-write the content on every site.
- It works by adding a button to a familiar user interface: We’re using YouTube here but you could use anything you want.
- Following that, you are prompted to edit the message that you’re willing to share on Social Media by way of a PixieBrix modal
- Finally we’re then going to use the Twitter Compose brick
# Let’s add a QuickBar
Navigate to your YouTube channel, in our case that’s https://www.youtube.com/channel/UCSDlrGSORVQKt2QN_hpb15A
The first step of this tutorial is to add a QuickBar to this page, so let’s open the PixieBrix Page Editor extension (by virtue of pressing F12 or inspecting the page and navigating to the Page Editor).
Once the Page Editor is open, let’s add a Quickbar
Once the QuickBar has been added we can configure it!
Extension Name: Quickbar from YouTube to Twitter
Action Title: Post to Social Media
Under Advanced, I selected the Icon to be the Twitter icon
Once you’re done, it should look like this!
Add the Show a modal brick
Next up we’re going to add the Show a modal or sidebar form brick,
This brick allows us to open a modal in the middle of the screen - and paired up with the previous brick, it means that when running the extension a modal will open up.
Let’s configure it as such:
Form Title: Compose a message
Name: message
Label: Compose your message to share on Twitter
Field Description: This field, let’s delete the default value and replace it with Maximum 180 characters
Input Type: Paragraph Text
Required field: True
It should look like this:
This is it for this brick, if you try the Quick Bar this far you will see it appear like in the demo below:
Add the Tweet in a new tab brick
Now the fun part, we’re going to add a brick that as the name implies it, 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 name Tweet in a new tab
This is how we’re going to configure this brick - each of the parameters are self explanatory, the URL that we’re going to post, the text of the message and any hashtags we might wanna include. Optionally we can also define a “via” field - which in our case we will just delete:
- url: We’re going to write the channel name that we’re going to promote, in our case it’s the 💜PixieBrix YouTube channel
https://www.youtube.com/channel/UCSDlrGSORVQKt2QN_hpb15A - via: Click on the drop down (by default ABC) and click Exclude it
- text: This will be the text of our tweet, we’re passing the variable
@form.messageso we can grab the text from the modal we prompted the user to fill before - hashtags: totally optional, you can leave it empty or use some words like in the screenshot below (and notice that you should do so without the preceding # character)
And there you have it - if you try the extension so far it will look like this:
Now all you gotta do is send the tweet!
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 “Simualate DOM event”)
Conclusion
We’ve learned about creating and using a Quickbar, and we’ve learned about creating modals to gather user information on screen.
Finally we introduced a new Twitter brick that has been released recently to create the Tweet programmatically
You can make this extension post the tweet automatically by the browser bypassing all need for user’s input. However, this is for another day