We understand that copying and pasting your badge code can be confusing sometimes,
especially if you’re new to HTML and web design. This guide will cover some HTML
basics, give two examples of pasting code using two different types of web editors,
and discuss common problems you might experience after pasting the badge code.
- HTML Basics
- How to view your source code
- What to look for in your HTML source code
- Copy your Badge code
- Paste your Badge code
- Paste using WYSIWYG editors
- Using Code View
- Using HTML Insert
- Common Problems
- Paste your code exactly
- Look for extra HTML added
1. HTML basics
If you’re unfamiliar with HTML, allow us to give you a little background. HTML (Hyper
Text Markup Language) is the programming language in which webpages are written.
This coding language is used on the World Wide Web.
Web browsers read HTML in order to display the contents of a page.
1a. How to view your source code
If you would like to view an HTML document (also known as the ‘source code’), first
open your web browser. Then go to a page whose source you would like to see and
click View on the menu bar at the top of the screen. Next, select
Source if you’re using Internet Explorer or Page Source
if you’re using Firefox.
The HTML document containing the source code of that page will appear on the screen.
1b. What to look for in your HTML source code
Every HTML document consists of bracketed tags which tell the web browser how to
display the HTML elements. All HTML elements start with an opening tag (< >)
and end with a closing tag (). All HTML documents have the following basic
structure:
The opening tag alerts a browser that this is the start of your HTML document. The
opening tag contains your header information and is not visible when you view the
page in your browser. Any text displayed between the BODY tags ( and ) will be displayed
in your browser. The closing tag alerts your browser that this is the end of your
HTML document.
For badges to appear properly, you will need to place your badge code between the
opening and closing tags of your source code.
If you are experiencing difficulty finding the tags, try simultaneously pressing
the ‘CTRL’ and ‘F’ keys on a PC, or ‘COMMAND’ and ‘F’ keys on a Mac to open a
Find text box. Then type Find next.
2. Copy your Badge code
First, you will need to locate your Badge code, found in the
Copy the Code
box which is located on the Select a Badge page in account setup process or again
in your email notification. This is the code you will copy and paste into your site’s
HTML source code.
To copy your code, highlight the entire contents of the badge code
box by clicking anywhere in this box with your mouse. You’ll know the code has been
selected when the entire contents of the box are highlighted in blue.
Next, from your browser’s Edit menu, choose Copy
in order to copy the highlighted area. If you prefer not to paste your code directly
into your site’s HTML source code, you can paste it into an alternate application
such as Notepad while you access your source code in the following sections.
3. Paste your Badge code
In this section, we’ll cover pasting the code into your page’s HTML source code.
If you’re not familiar with HTML, head to step 1
In order to display a badge on your website, it is very important that you copy
the badge code exactly as it appears and paste it directly into the HTML source
code of your webpages, without any modifications. Modifying the badge code is against
our program policies and may also result in errors on your page.
After copying your Badge code, return to your desktop and open your HTML editor.
Once you’ve accessed your HTML source code, click on the spot where you’d like to
place your badge code and then select Paste from the Edit
menu.
When you’ve finished pasting the code into the webpages, you’ll need to save changes
and upload or publish the updated pages to your server. If you have difficulty uploading
to your server, please contact your webhost. Keep in mind that after you’ve pasted
the badge code into the HTML source of your page, it must look exactly the same
as the badge code displayed in your Badge account.
If implemented correctly, your badge should appear almost immediately.
4. Paste using WYSIWYG editors
If you’re using a design-enhanced HTML editor, often referred to as WYSIWYG (What
You See Is What You Get), it may use a
Code View feature which
contains HTML, Design/Normal, and Preview views. Or, your editor may use an
HTML Insert feature which utilizes an ‘Insert’ menu tab. If you are
unable to locate the HTML source code of your webpage in your WYSYWIG editor, please
contact the support group for your HTML editing software for specific instructions
on how to locate this view.
In the following sections, we’ll show examples of pasting Badge code using both
Code View and HTML Insert. Because every editor is different, and because only you
know how you like to build your webpages, we’re unable to give you exact instructions
for pasting your ad code. However, we hope you’ll find these examples helpful.
4a. Using Code View
If your web editor uses a Code View feature, please follow these instructions for
pasting your Badge code.
1. Using your editor, open the webpage on which you’d like to display Badge. In
the Normal or Design view, select the location
in your document where you want to place Badge.
2. Copy the badge code from the text field during the Add Business process or in
Your Business Center.
3. In your editor, switch to the HTML view. Paste the badge code between the and
tags — where the cursor is blinking. Pasting the badge code outside the tags will
prevent the badges from appearing correctly.
4. Go to your editor’s Preview tab to confirm that the badge code
has been pasted correctly. If done correctly, you should be able to see the badge.
5. If you’re satisfied with the results, go to File in your menu
and click Publish Web…. This will upload your website onto the
web with the badge implemented.
4b. Using HTML Insert
If your web editor uses an HTML Insert feature, please follow these instructions
for pasting your Badge code.
1. First, copy your Badge code from the text field during the Add Business process
or in Your Business Center.
2. Next, using your editor, open the webpage on which you’d like to display Badge.
Click the Insert option on the toolbar, then drag down and click
HTML.
3. An HTML Code box will now appear. Paste your Badge code into the box and click
OK.
After doing so, a new HTML box will appear. You can move this box to any location
on your website, but you cannot overlap the HTML box with any other text or graphic
box on the website. Overlapping will prevent your badges from appearing or create
errors when you upload the website.
4. Once you’re satisfied with the position of your badges, go to File
in your menu and click Preview in Browser to see what your badge
will look like.
5. If you are satisfied with the badge placement, go to File and
click on Publish. If implemented correctly, badges should appear
almost immediately.
5. Common Problems
5a. Paste your code exactly
If you don’t see an badge unit appearing on your site, or if you see an error on
your site, such as the HTML badge code appearing, check the HTML source code of
your site to make sure the Badge code on your site looks exactly the same as the
Badge code in your account pages.
To check the HTML source of your webpage, follow these steps:
- Open a browser window and view your webpage.
- Under your browser’s
View tab, select Source in Internet Explorer or Page
Source in Firefox. A text document displaying the HTML code of your
site will pop up.
- Press the Ctrl and F keys, or the COMMAND and F keys if you’re
using a Mac. This will bring up a Find box. Type ‘badges’ into
the box and press ‘Enter’ to locate your badge code.
- Next, open your Badge account
in a new browser window and go to the Your Badge code box, under
the Badge Setup tab. On your screen, place your HTML source code
alongside the badge code in the Your Badge code box. Compare the
badge code and ensure that it looks exactly the same on both pages.
The most common reason publishers do not see their badge is that the code was copied
incorrectly.
5b. Look for extra HTML added to your badge code
If the badge code in the source of your live site appears differently from the badge
code in your account, it may be because your webhost automatically includes or changes
certain tags when you place code onto your site. You may see that extra HTML code
such as ‘
’ or tags have appeared in your badge code, as in the examples below. The badge
code may also be reformatted to appear in one line.
If you are confident that you pasted the code into the HTML view of your WYSIWYG
editor exactly as it appears in your account, you should contact your webhost about
any changes you see to the badge code, such as reformatting or extra tags.
Facebook
Twitter
AOL.
Google
Yahoo
LinkedIn
Hotmail