Photo by Team Nocoloco on Unsplash
Set up Buy Me A Coffee button on Hashnode
This guide will help you add the beautiful Buy Me A Coffee button to all your Hashnode articles and start receiving support from your fans.
Table of contents
No headings in the article.
The nice thing about adding "buy me a coffee" button on hashnode is that it is easy and you do not have to manually add it in every article you write. All thanks to the Hashnode widget.
Follow the following steps to add "buy me a coffee" (usually abbreviated as bmc) button as a widget to your hashnode blog.
Please note you need to have the following.
- Buy me a coffee account
- Hashnode Blog
Step 1
Once you have created an account, sign in to your Buy Me A Coffee account.
Step 2
Click the "Dashboard" option on top of the page.
Step 3
On the new page that appears, Click "Settings" on the left-hand navigation menu.
Step 4
On the Settings
tab, scroll down a bit and you see "My page link" field just like the one below.
Click on the "copy" button.
Step 5
Head over to your Hashnode dashboard. Click on "Widget" on the left-hand navigation menu.
Step 6
Click on "Add New Widget"
Step 7
Copy and paste the HTML
code below in the first field that has a placeholder text of "Paste your embed code here"
NB: Replace the placeholder text
with your own value.
<div>
<p style="font-weight: bold; color: #fff; font-size: 20px; font-family: sans-serif;">If you find my article useful, you can support me by buying me a coffee using the button below</p>
<a href="<YOUR_PAGE_LINK>" target="_blank"><img src="https://www.buymeacoffee.com/assets/img/guidelines/download-assets-sm-2.svg"></a>
</div>
Step 8
You can give your new widget an ID.
By entering a value in the "Widget ID" field, you can easily use the widget inside your article by typing the text below.
%%[<WIDGET_NAME>]
If you can don't want the widget to appear on every article, you can skip steps 9 and 10
Step 9
Turn on the switch in the Pin widget.
Pinning a widget will make it appear on all your articles. You can pin up to two widgets.
Step 10
Select the widget location. You can either make the widget appear on top of every article or at the bottom of every article.
Step 11
Once you have completed all the above steps, click on the "Create" button.
Here is what the form will look like after filling it.
As earlier stated, you do not need to edit your existing hashnode article(s). The "bmc" button will be automatically available in every of your article due to the widget we used.
If you are not satisfied with the image button used, you can head over here to download the buy me a coffee creator kit and its assets.
I hope you will find this useful as a creator.