Adding Code to Your Website
ezguide
easy to follow step by step guides
easy to follow step by step guides
Increasingly clients want to add features to their website which run on other systems. As the Administration area text editor is not primarily designed for this, you need to be aware of raw mode.
Our website editor is designed for adding text and images only. Through facilities such as Linknotes, the Colour Scheme Editor and the Paragraph Control Tool (to create sections with subheadings) our aim is to provide the functionality that most clients need without the requirement for putting anything other than plain text into the editor. The primary exception to this is that our editor recognises a number of specific codes, used to achieve styling effects. Some of these are simple HTML codes you may recognise such as <b> for bold, while others are proprietary codes, which are generally more powerful and have been devised by WebHealer. Examples are <right> for right aligned text or <fb> for a Facebook Like button. These are explained in section C4 of our Help Guide and other related sections.
Some editors (such as that offered by Tumblr) apply a policy of restricting HTML so that only approved codes can be used, however we decided not to do this. The advantage of this that you are free to use other HTML for additional functionality and creative flexibility. The disadvantage is that HTML (and Script code) is very powerful, so it is possible to break the layout or overall design of your website pages and generate browser errors. In addition to this, solving coding problems is a very technical area and a potential can of worms, so our support team are only able to help with problems where you have used our approved codes.
Having said this, there are an increasing number of useful website features provided by other suppliers (often called 3rd parties) that can be incorporated into (or "plugged in" to) websites just by a simple copy and paste, and our websites can usually, but not always, incorporate these features, provided the copy and paste is done correctly, and our guidelines below are followed.
This guide is focussed on helping you to make your Plug In code work, because then at least the code should have been written and tested very extensively to ensure it is reliable on all the different browsers and devices available. The information below is still useful if you have created your own code. If your plug in code doesn't work or has other side effects on the layout of your pages, see our troubleshooting section at the end of this guide.
Now and again certain plug in codes or formatting techniques become so popular that almost every client wants to use them, and we have started to create shortcut codes to make it easier for non technical clients to include these features. This is how our Quoteboxes came about and our Facebook “like” buttons and Twitter “follow me” buttons. See our Social Media EZ Guide for more details on these new features, as you may not need to use Plug In codes at all.
Some code will not work at all, and you may only know that if and when you try it. Generally, however, if a very popular website feature says that "all you need to do is copy and paste this code into your website" then it usually will work, with one common adjustment you will need to make. This is that you need to switch to raw mode.
Switching to raw mode is very easy, however be aware that it affects the whole paragraph, so you can't mix raw mode and normal text or your normal text will come out wrong. The way to use raw mode is to dedicate a paragraph. If you aren't used to having multiple paragraphs on your page see our guide on the Paragraph Control Tool. If your page is enabled with the paragraph control tool, then simply add a new paragraph where you want your code to appear and start the paragraph with <span></span> as below. This is the code that switches your paragraph to raw mode. See the example below using a simple piece of javascript.
Do not include a sub heading and make sure nothing (not even a space) appears before or within the <span></span> code.
You may wish to include code not to display any kind of visual functionality but to add tracking tools by people like Google. You may be told that you need to put this code in the <HEAD> area, but with our raw mode system we recommend you put it into the final paragraph on your page. You will probably need to add it to every page too.
Although PhD Interactive Ltd does not provide eCommerce facilities directly, many clients have provided a means of payment very effectively using PayPal. Our PayPal guide was written to show how to do this.
As with many other suppliers providing "plug-in" HTML code, if you follow the process through, you'll find yourself copying some code (as per the image below) to paste into your own website.
Once the code is selected or highlighted, it's usually just a case of right-click your mouse over the text and left-click "Copy". Alternatively, from the menu of your web browser select Edit > Copy. Then log into the administration area of your website and go to the page and place within the page where you would like to display the feature, and from the menu of your website browser select Edit > Paste. You should find that the coding is pasted into your "text displayed" box something like this:
The final simple step is to insert <span></span> at the start as below.
It may very well be that your Plug In code doesn't work with our websites. If it hasn't been written well enough, it may make assumptions about the design of the website that it is getting pasted into and as a result it may:
In each case the best advice is to contact the support department for the supplier and show them the problem, so they can improve their programming.
Before doing this though, please double check that you have properly enabled raw mode using <span></span>. If for example you were trying to include AddThis tools and had a stray space between <span> and </span> then your tools would look like this instead of in a neat straight line.
Although the kinds of problems which can result from errors with plug in code are beyond what our support team can help with, we do have relationships with a number of business partners with a range of technical skills. These are people who we have rigorously vetted for their technical skills and quality of service as well as competitive pricing.
If you explain your problem to the support team, they will do their best to put you in touch with one of our business partners who has the necessary skills to help you with your particular problem.