Help:Installing Widgets

Search WikiTree's help pages:

Categories: WikiTree Help | WikiTree Love

Contents

How to Use Family Tree Widgets on Your Blog

Family Tree Widgets work best when embedded in blog posts rather than in the sidebar of your blog, due to the width needed to properly display your WikiTree content. For sidebar widgets that let you show off your WikiTree contributions, see Contributions Widgets.

Blogger

1. Go to the Tree & Tools page for any WikiTree profile with a Privacy Level of "Private with a Public Family Tree" or higher and scroll down to the "Family Tree Widgets" link.

2. Scroll down to where the HTML code is displayed in the box labeled Copy-and-paste this HTML code.

3. Highlight the text in the box, right-click with your mouse and select Copy.

4. In Blogger, under the Posting tab, click New Post.

5. Click on the Edit HTML tab[1] and then in the Content area, right-click with your mouse and select Paste.

6. Click the Compose tab to see how your widget will appear in the blog post.

7. Click Publish.

See an example of a Family Tree Widget on Tami Glatz's blog Relatively Curious. (Scroll down to the bottom.)

WordPress

1. Go to the Tree & Tools page for any WikiTree profile with a Privacy Level of "Private with a Public Family Tree" or higher and scroll down to the "Family Tree Widgets" link.

2. Scroll down to where the HTML code is displayed in the box labeled Copy-and-paste this HTML code.

3. Highlight the text in the box, right-click with your mouse and select Copy.

4. In WordPress, login and go to the Dashboard.

5. Scroll down to the Posts section in the left sidebar, expand the list and select New Post.

6. Click on the HTML tab and then in the Content area, right-click with your mouse and select Paste.

7. Click the Visual tab to see how your widget will appear in the blog post.

8. Click Publish. 

See examples of the Family Tree Widgets on our WikiTree blog:

How to Use Contributions Widgets on Your Blog

For the selection of Contributions Widgets, click the link near the top of your Contributions page.

These work best when embedded in a blog sidebar rather than in a blog post since they were created to always be displayed on your blog to let your visitors know about your WikiTree contributions. For widgets that let you show off a family tree, see Family Tree Widgets.

Blogger

1. Click the Contributions Widgets link on your Contributions page to see the variety of widgets available.

2. Scroll down to where the HTML code is displayed in any box labeled Copy-and-paste this HTML code.

3. Highlight the text in the box, right-click with your mouse and select Copy.

4. In Blogger, under the Design tab, click Add a Gadget.

5. Scroll through the Basics gadgets and select HTML/JavaScript. The Configure HTML/JavaScript dialog appears.

6. In the Title field, enter a title if desired. In the Content area, right-click with your mouse and select Paste.

7. Click Save. Click View Blog tab to see how your widget will appear in the sidebar of your blog.

See an example of a Contribution Widget on the sidebar of Sheri Bush's blog Twig Talk.

WordPress

1. Click the Contributions Widgets link. For the selection of Contributions Widgets, click the link near the top of your Contributions page.

2. Scroll down to where the HTML code is displayed in any box labeled Copy-and-paste this HTML code.

3. Highlight the text in the box, right-click with your mouse and select Copy.

4. In WordPress, login and go to the Dashboard. Scroll down to the Appearance section in the left sidebar, expand the list and select Widgets.

5. Locate Text and “drag” it to your Sidebar, placing it in the desired location on your sidebar.

6. In the Title field, enter a title if desired. In the Content area, right-click with your mouse and select Paste.

7. Click Save. Click your blog name in the Dashboard to view your blog and see how your widget appears in the sidebar of your blog.

See an example of a Contribution Widget on the sidebar of our WikiTree blog.

How to Use Widgets on Joomla

Thank you to Edison Williams for posting the following in G2G.

On any recent version of Joomal! 3.x or newer, you can easily use WikiTree widgets in articles or modules. Note that installations may differ in the editing permissions some Joomla! groups may have, so it's always best log-in with an account that has Super User privileges. This will assure that no HTML code is stripped away when you save your work.

To use in an article:

  1. Open the Joomla! Administrator backend.
  2. Go to Content -> Articles.
  3. Select and open an existing article, or create a new one.
  4. Copy the WikiTree widget code and paste it into the article.
  5. Check the Status, Category, and Options for your article.
  6. Click Save & Close.

To use in a module:

  1. Open the Joomla! Administrator backend.
  2. Go to Extensions -> Modules.
  3. Select New, and choose Custom as the module type.
  4. Copy the WikiTree widget code and paste it into the body of the module.
  5. Enter a title for the module, choose whether to display or hide the title, and check that the Status is set to Published.
  6. Select a module position for the module. Available positions are determined by the template you are using.
  7. Click on the tab labeled Menu Assignment and choose on which page(s) you want the module to appear.
  8. Click Save & Close.

How to Use Widgets on Google Sites

1. Edit the page where you want to add the widget.

2. Select Insert -> More Gadget.

3. Search for 'iframe'.

4. Select the Include Gadget (iframe) by Scott Johnston.

5. Enter the URL in the widget code (the src field in the <iframe> tag) in the URL to content entry field.

6. Set the Width and Height so that the content fits (550x520 for the Family Tree widget).

7. Enter a title in the Display title on gadget entry field or disable the title.

8. Click the OK button.

Notes

If you need more help, don't hesitate to post a question on our G2G Forum.

  1. If you do not see the Edit HTML and Compose tabs, you may not be using the Updated Editor in Blogger. On the Settings tab, click on Basic and scroll down to the Global Settings section. Under Select post editor, select Updated editor and then click Save Settings.


This page was last modified 07:25, 25 August 2017. This page has been accessed 987 times.