Inserting HTML Code into your Website

You can easily add content, like videos and status updates, from external services like YouTube, Vimeo, Facebook, Twitter, and many others to your Small Farm Central website. Most of the time you will want to imbed external content to one of your Farmer Defined Pages, however you can add HTML code to anywhere there is a Rich Text Editor toolbar, like into a Widget. (Read the Using Widgets article to learn more.)

HTML code is the markup language of the web, meaning that a web browser will read this code and translate it into a visual webpage. HTML code is hidden to the the web page viewer, but you can access your website's HTML code through the Control Panel. This article will teach you how to insert HTML code into a Rich Text Editor toolbar.

Follow these steps to imbed external content into your website:

  1. First go to the location of the content you wish to add (YouTube, Facebook, etc.). Within the site, locate the HTML code of the content you wish to add. The location of this code will vary based on the service you are getting your content from.

    For example: to get code for a video from YouTube.com, find the video and click on the Share button underneath it. A URL will show up. Next to it, click on the Embed button to get the code. Unclick the checkbox next to "Show suggested videos when this video finished" unless you would like that to happen. The code you need will then be displayed in the box. Below is a screenshot of getting the code from YouTube.com:

    YouTube_html_code.PNG    Figure 1. Locating Code for a Video on YouTube.com

  2. Copy the code into your clipboard (Ctl + c) so you can easily paste it in to the Rich Text Editor. You can also leave the window open on your browser so that the code is available to you if you make a mistake.

  3. Login to your Control Panel and navigate to the place where you wish to add your content. Remember, anywhere you can find the Rich Text Editor toolbar, you can insert this code. Here are two options:

       Create Content > Farmer Defined Pages
       Display > Widgets

  4. Click on the HTML (also called "Source Code") tool in the Rich Text Editor toolbar. It is simply the a set of brackets like this < >. See circled in red below:

source_code.png

   Figure 2. The HTML/Source Code Tool in the Rich Text Editor Toolbar

  1. The editor will bring up a window with the raw HTML code of your page. This represents all of the content that you have added to your FDP. This may look a bit confusing to you at first, but look closely and try to find some of the text on your page. THis is the easiest to spot since it appears the same in code as it does on your page. It will most likely be flanked by these identifiers: <p>, </p>

    Find the spot within the code that corresponds to the spot where you would like your content to appear on your page or in your widget. Then, paste in the code that you copied from the external source. Finally, click the OK button on the bottom right corner of the HTML editor.

  2. Your new content will likely not show up correctly in the Rich Text Editor. Click on the Save Changes button on the bottom of the page and click on the "open Public Site" link at the top of the Control Panel. Navigate to the page with the inserted content to see what it will look like on your website You may need to refresh the page to ensure that everything is working correctly and looks right.

Remember: If you are having trouble and need assistance, contact our Farmer Support Team by calling: 412-567-3864, send us an email at: support@smallfarmcentral.org, or start a discussion on this support site.

Ready to move on? Click on another article below: