Feeds:
Posts
Comments

Archive for the ‘Button Codes’ Category

For many artists/designers endeavoring to build an online a presence, a blog is an incredible way to show up to their work and share new projects. Still, designing a high-quality blog and content is not enough. You have to get the word out ( is a blog still a blog if nobody reads it?)

So how can you make it inviting for people to visit your digital studio?

I believe a non-cluttered, restful design is key, for starters. My design zen inspiration is An Open [Sketch] book. Joining blog/aggregating communities such as networked blogs, technorati and notcot.org can bring like-minded people to your online home.  Also, blogging websites are full of advices on how to ‘get read’ (see ‘On Blogging’ on my blogroll).

In December, I designed my new business cards so I could share my online work and vision with artists and professionals I met  (do you like them? – ordered with Vista = very happy)

I also found a way to have a  digital V-Card as a gmail signature so that people could visit my art and architecture websites when I sent them an email- we will talk about this next.

But I believe the best way to reach out to people is to be an answer to their problem, i.e tutorials ( like I’m doing now…this is so meta). In other words, if you couldn’t find something online and had to build it yourself , save the struggle to other people and you will gain aficionados. In my case, I wanted to have a customized ‘Buy Me Coffee/Micro-Donation’ button for my WordPress blog, linked to Paypal, just in case someone wanted to take me out for coffee cause they loved my blog and art  so much:) A sort of digital tip jar.

What I found online did not fit my blog or design needs, and there were problems linking my button my free Paypal account. So i did a bit of code magic. I hope it helps you.

And if it does and you want to tip me…well… that would be just swell!

How to make a customized ‘Buy me Coffee’ Paypal micro-donation button


Premise:  You have a free PayPal (not-merchant) account, and a free WordPress.com blog.

Goal: You want to be able to place an attractive button where folks who enjoy your posts can drop couple of bucks to sustain your caffeine
addition (or other, who am I to judge?).

Problem:

A. You have tried to generate the button code from your Paypal account but, once it is placed in your blog, it does not link to your
Paypal donation page. You tried messing with the code, and it still doesn’t work.

B. You need help with placing your own image on the Paypal button, or with creating the button on WordPress.

Solution:

Well, I struggled so you don’t have to.

1.If you are here, I am assuming you have a blog.  If you don’t have one, go to wordpress.com and sign up for one. It is beyond the scope of this tutorial to enumerate the qualities of WordPress, but people who have shopped around invariably choose to host their [free] blog here. You will be well-cared for. For the WordPress.org [paid domain] folks, there is a Paypal plugin, so no need to go further.

2. After accessing your blog, sign up or sign on to your Paypal account. Look at the tabs on top of the page: under ‘Products and Services’, click ‘Website Payment Standards’

You will land on  ‘Website Payments Standards Overview’ >Payment Button tab.

Go to  ‘Accept donations anywhere on the web’ and click on ‘Create one now’

Fill out the fields (skip Step 2 and 3 unless you want to upgrade your PayPal account).     You can customize your button now, but you probably want to substitute the ‘donate’ image with something more appealing at a later time. I did not customize for this tutorial, and did not fill the ‘Company’ or ‘Donation ID’ fields.

When you are done, click ‘Create Button’ at the bottom of the page.

This will generate the button’s code. Remove ‘Code Protection’, on the top right of the box (very important) and click ‘Select Code’.

Copy (ctrl+c) the code. On your desktop, right-click anywhere, select ‘New’ and create a new text (.txt) document, or you can use your usual html editor as well. Paste (ctrl+v) the code.

You will get something like this (where the red X’s are your id numbers):

3. Normally you would now go to your WordPress blog dashboard, choose Widgets, drag a ‘Text- Arbitrary text or HTML” widget  to your sidebar  and and paste the above code to obtain a button. This time though, this would result in an empty field, and we need a workaround.

You will use the ‘Image-Display an image in your side bar’ Widget

Drag it in the sidebar and open it:

A. Widget Title: You can name your button ‘Donate’ or ‘Feed the Starving Artist’ etc.

B. In the ‘Image URL’  place the URL address of any  image that is hosted on image hosting websites such as Flickr, Photobucket etc.

(I always recommend hosting your own images). You can usually find this code under a ‘Share’ button by the hosted image in these sites.

The address will look something like this (where ‘yourhostingsite’ and ‘youraccountname’ are a substitute for your actual code):

http://i231.yourhostingsite.com/albums/ee231/youraccountname/7338fccb7887.jpg

C. In the ‘Link URL’ (where you want visitors to land when you click your button) you will paste this code, derived from the PayPal code above (with a sprinkle of magic).

https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=XXXXXXXXXXXXX

(the X’s are your ID code from the Paypal button code in Step 2)

Now we have the ‘ingredients’ for our customized button: an image hosted online, its address, and a link to your PayPal donation page.

I like to have the button centered, so I adjusted the size and justification of the widget until I was satisfied.

Be creative, you can design your button to include text and credit cards symbols, in a software such as Photoshop.

Hope you will enjoy your very own PayPal/Donations button and that this worked out for you!


Share

Read Full Post »