Badge Code Implementation Guide
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.
This guide covers many topics, so feel free to skip ahead to a specific section:
- 1. HTML Basics
a. How to view your source code
b. What to look for in your HTML source code
- 2. Copy your Badge code
- 3. Paste your Badge code
- 4. Paste using WYSIWYG editors
a. Using Code View
b. Using HTML Insert
- 5. Common Problems
a. Paste your code exactly
b. 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 <HTML> tag alerts a browser that this is the start of your HTML document. The opening <HEAD> tag contains your header information and is not visible when you view the page in your browser. Any text displayed between the BODY tags (<BODY> and </BODY>) will be displayed in your browser. The closing </HTML> 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 <BODY> and closing </BODY> tags of your source code.
If you are experiencing difficulty finding the <BODY> 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 '<BODY' (without the quotes) to find the opening tag or '</BODY' (without the quotes) to find the closing tag, and click 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.
3. In your editor, switch to the HTML view. Paste the badge code between the <BODY> and </BODY> tags -- where the cursor is blinking. Pasting the badge code outside the <BODY> 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
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 '<BR>' 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.