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.

ยท

3 min read

Table of contents

No heading

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.

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.

bmc1.JPG

Step 3

On the new page that appears, Click "Settings" on the left-hand navigation menu.

bmc2.JPG

Step 4

On the Settings tab, scroll down a bit and you see "My page link" field just like the one below.

bmc3.JPG

Click on the "copy" button.

Step 5

Head over to your Hashnode dashboard. Click on "Widget" on the left-hand navigation menu.

bmc4.JPG

Step 6

Click on "Add New Widget"

bmc5.JPG

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.

bmc6.JPG

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.

ย