Use an HTML widget to display content/text/links from another page?

  • 1
  • Question
  • Updated 4 years ago
  • Answered
I run a web directory of local wedding service providers in my area. At the bottom of each page, I have a column divider widget with a text box in each column featuring links to each other category page. I am finding I have to edit these text boxes and links on a semi regular basis, enough that it is a big time suck to make the changes on each page; I have 24 plus pages to change each time.

Is it possible for me to post these links on a separate page and have an HTML widget on each page, instead of the actual links, that would import that content and display them on each page? That way I could make one change to the list page and it would be implemented to all the directory pages?

Or something similar?
Photo of Kaleb Penner

Kaleb Penner

  • 17 Posts
  • 4 Reply Likes

Posted 4 years ago

  • 1
Photo of Laura Thomas

Laura Thomas, Social Media Coordinator

  • 4536 Posts
  • 211 Reply Likes
Hi Kaleb,

If you are a Yola Silver or Gold member, you can create an HTML document with all the links you need, upload it to your File Manager and use an iFrame code on each of your pages to embed your HTML page which means you would only have to edit your HTML document every time it changes.

Is that along the lines of what you had in mind?
Photo of Kaleb Penner

Kaleb Penner

  • 17 Posts
  • 4 Reply Likes
Okay good. Yes that is what I was wondering. I have virtually no experience with HTML but assumed something like that should be possible. Glad to hear it is!

Now I'll have to learn how to make this document you speak of, lol. Thanks for those links also, I'll experiment with it right now and see how I do!
Photo of Laura Thomas

Laura Thomas, Social Media Coordinator

  • 4536 Posts
  • 211 Reply Likes
Hopefully the links I shared above will make it easier. If you run into trouble, give us a shout here!
Photo of Kaleb Penner

Kaleb Penner

  • 17 Posts
  • 4 Reply Likes
Okay, I've made a short version of the html document as a test, and I've uploaded it to the file manager. How would I access that document then with the html widget? What would the code be?
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
Hi Kaleb

If you use an iframe to add your HTML file, this is the code you need to add to an HTML Widget:
<iframe src="http://mysite.com/resources/myfile.html"></iframe>

You will need to replace mysite.com and myfile.html by your custom information. If you put your html file into a subfolder, you must include the name of the subfolder in the URL path, too.

For more iframe properties, please see the HTML iframe tag page provided by w3schools.com.
Photo of Kaleb Penner

Kaleb Penner

  • 17 Posts
  • 4 Reply Likes
I keep getting a 404 error on the resource. I uploaded the html file to the main folder, it isn't in any sub folders. Here is where it is located:



so if my website is www.grandeprairieweddingdirectory.com then I should be able to display leftlinks.html by placing an html widget and inserting this code:

<iframe src="htp://grandeprairieweddingdirectory.com/resources/leftlinks.html"></iframe>

correct? Why might I be getting a 404, resource not available error?

I intentially left a "t" out of "http" so that the whole text would show up. Long links are truncated with a "..." on this forum apparently. So other than that correction, do I need to change anything else, or is there another problem?
Photo of rose marie

rose marie

  • 72 Posts
  • 23 Reply Likes
Hi Kaleb
Try adding the code without the quotation marks in the code and it should work for you.

I just tested this in my teaching site with and without the quotation marks; with the quotation marks I also got the 404 error, without the quotation marks it worked.

Good luck, and let us know how this goes for you!
Photo of Kaleb Penner

Kaleb Penner

  • 17 Posts
  • 4 Reply Likes
so my code now, (except for the intentional absence of a t from http) looks like this:

<iframe src=htp://mysite.com/resources/myfile.html></iframe>

That is the only thing I have in my widget, but still I get a 404. I've double and triple checked the filenames and so on. I've even checked to make sure I'm not accessing one of my "site forwarding" urls by accident. I've got the original.

Any other ideas? Am I missing some code somewhere?

I suppose I could try placing the html elsewhere on the web and linking to it there also.
Photo of rose marie

rose marie

  • 72 Posts
  • 23 Reply Likes
This is quite perplexing - it really should work for you, everything appears to be in order.
if your site name includes www, I think you should try using http://www.mysite.com/resources/myfil...>

Or perhaps you could try to delete the file and reload it, or use a different copy of the file?
Photo of Laura Thomas

Laura Thomas, Social Media Coordinator

  • 4536 Posts
  • 211 Reply Likes
Hi Kaleb,

I have also shared this with a member of our HTML team for their input.
Photo of Kaleb Penner

Kaleb Penner

  • 17 Posts
  • 4 Reply Likes
Okay Okay I got it.

I have some significant changes I am working through on the site, so I haven't published anything, I've just been saving. So I uploaded the HTML docs to another site I've got going on yola and referenced that site in my iframe src. It didn't work at first. But when I went back and published the other site, they started showing up on the wedding directory.

So it seems that HTML's uploaded into the file manager can't be accessed until the site they are on is published. At least in my case. Makes sense.

Thanks everyone for all your help, seems this one is resolved for good now.
Photo of Laura Thomas

Laura Thomas, Social Media Coordinator

  • 4536 Posts
  • 211 Reply Likes
Oh that makes sense!
Photo of rose marie

rose marie

  • 72 Posts
  • 23 Reply Likes
That makes sense! Glad you figured it out, there is always some seemingly small step that is so easy to overlook.
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
Hi Kaleb,

You have a nice site! Yes, the other site would need to be published for the iFrame code to work. An iFrame (inline frame) is basically an embedded web page within another web page. One thing to be careful of with iFrames is that the content and links within iFrames are not typically crawled and index by search engines. The content within the iFrame will likely be attributed to the source URL and not your own page.

Another way to do this would be to use normal HTML and then convert it to JavaScript. There are a number of HTML to JavaScript convertors on the internet. Here's one for example.

Once you've converged your HTML, save it as a text file and rename it to have a .js extension (instead of the normal .txt). Upload the file to your File Manager and then link to it.

The way to do this would be to place the following code in an HTML Widget where you want it to appear:

<script type="text/javascript" src="http://YourSite/resources/YourJavascriptFile.js"></script>

Edit the YourSite and the YourJavascriptFile.js to match your URL and filename.

I took the liberty of viewing your page source to get the links and came up with the following code for you. You can also paste this code into a normal HTML Widget on your site as well.

<table style="text-align:center; width:100%; font-weight:bold;"><tr><td style="width:50%;">

<!-- START LEFT COLUMN -->
<p><a href="accessories.php">Accessories</a></p>
<p><a href="beauty-hair-and-makeup.php">Beauty, Hair & Makeup</a></p>
<p><a href="bridal-or-wedding-lingerie.php">Bridal or Wedding Lingerie</a></p>
<p><a href="catering-and-caterers.php">Catering & Caterers</a></p>
<p><a href="dance-instructors.php">Dance Instructors</a></p>
<p><a href="djs-sound-and-music.php">DJ's, Sound and Music</a></p>
<p><a href="fitness-and-nutrition.php">Fitness & Nutrition</a></p>
<p><a href="invitations-and-stationary.php">Invitations & Stationary</a></p>
<p><a href="limousines-and-transportation.php">Limousines & Transportation</a></p>
<p><a href="marriage-officiants.php">Marriage Officiants</a></p>
<p><a href="travel-destination-weddings-honeymoons.php">Travel, Destination Weddings, Honeymoons</a></p>
<p><a href="videographers-and-slideshows.php">Videographers and Slideshows</a></p>
<!-- END LEFT COLUMN -->

</td><td style="width:50%;">

<!-- START RIGHT COLUMN -->
<p><a href="bachelor--stagettes.php">Bachelor & Stagettes</a></p>
<p><a href="bridal-shops-and-formal-wear.php">Bridal Shops & Formal Wear</a></p>
<p><a href="cakes-and-candy.php">Cakes & Candy</a></p>
<p><a href="ceremony-locations.php">Ceremony Locations</a></p>
<p><a href="decor-and-rentals.php">Decor & Rentals</a></p>
<p><a href="favors-and-gifts.php">Favors & Gifts</a></p>
<p><a href="flowers.php">Flowers</a></p>
<p><a href="jewellers.php">Jewellers</a></p>
<p><a href="live-bands-and-musicians.php">Live Bands & Musicians</a></p>
<p><a href="photographers.php">Photographers</a></p>
<p><a href="venues.php">Venues</a></p>
<p><a href="wedding-planners.php">Wedding Planners</a></p>
<!-- END RIGHT COLUMN -->

</td></tr></table>

I also explained how to do this in another thread a few years back. Wow, checking out that link again, I actually used the phrase "Yes you can" before Barack ;)
Photo of Kaleb Penner

Kaleb Penner

  • 17 Posts
  • 4 Reply Likes
Boomer, thanks a bunch for your reply. I didn't notice it until now, I was just returning to this page to ask how to ad a 'hover color change' element to the those links. I've looked all over the web and saw some suggestions but couldn't seem to implement them myself. Doesn't seem like there is an option in the html file, but couldn't get anything to work in the html widget either.

Your javascript solution is appealing. I've wondered about web crawlers' ability to read iframe content in my situation.

The reason I was using iframe in the first place is because in the event I need to change the links, it is WAY faster to just upload new html files than it is to manually change the links on each of the 26 or so pages.

If this javascript solution will allow the content to be indexed and I can make changes to all pages just by uploading a new javascript file, I'll definitely go for it.