Embedding external photo galleries

You can add a photo gallery to your Wild Apricot site using a photo album gadget. The photo album gadget displays pictures stored in your Wild Apricot account. If you want to display photos stored on dedicated photo-sharing sites such as Instagram, Photobucket or Flickr, you can add custom HTML code to embed an external photo gallery in a page on your Wild Apricot site.

Instructions for third-party services like these are provided as a courtesy and may contain out of date information or screen clips. For the latest instructions, consult the third party's website.

You can insert code to embed a photo gallery into a custom HTML gadget or content gadget on a page or page template.

For an overview of the most popular photo-sharing sites, see our blog post on photo-sharing.

Embedding Instagram photos

You can embed photos from your Instagram account so that they appear on a page on your Wild Apricot site.

Using one of the third-party widgets available from SnapWidget, the photos can appear as:

• a grid
• a grid with user name and comments
• a map pinned with photo locations
• a slideshow
• a scrolling banner

You can use the free versions of these widgets, or pay for the Pro version which offers additional features and settings.

To add Instagram photos to a Wild Apricot site page using a SnapWidget widget, follow these steps:

1. Go to SnapWidget and click the Get Started Today button.
2. Sign up for a free SnapWidget account or log into your existing account.
3. From the SnapWidget dashboard, scroll down then click the Browse All Widgets button.
   
4. With all the widgets displayed, click the Instagram option towards the top.
5. With all the Instagram widgets now displayed, choose how you want to display your photos by clicking Create your widget below one of the following options:
   
   Grid
   Display photos as a grid
   
   Board
   Display photos as a grid with user name and comments
   
   Map
   Display a map pinned with photo locations
   Slideshow
   Display photos as a slideshow
   
   Scrolling
   Displays photos as a scrolling banner
6. Scroll down to the basic settings for your widget and click on the Username field. You will be prompted to sign into your Instagram account.
7. Adjust the rest of the settings as you wish. The description will not appear on your Wild Apricot page; it will just be used to identify your widget within your SnapWidget account.
8. After you're finished adjusting your settings, you can click the Preview button to preview your widget. Once you are satisfied with the results, click Get Widget to get the embed code.
9. Within the window that appears, click Copy to clipboard to copy the embed code to your clipboard.
10. Log in to your Wild Apricot site as an administrator.
11. In your Wild Apricot account, go to the Website module and click the Sites pages option.
12. Begin editing the site page or page template where you want your photos to appear.
13. Click the Gadgets icon to display the list of available gadgets.
14. Drag the custom HTML gadget from the Gadget list, and drop it in the desired location.
15. After you have inserted the gadget, hover over it and click the Settings icon.
16. Within the gadget settings on the left, click the Edit code button.
17. In the dialog that appears, paste the embed code then click the Save button.
18. Click Save to save the changes to your page.

Your Instagram photos should now appear on your page or template.

Instead of creating a custom HTML gadget, you can use the Snippet feature to embed the code within a content gadget. For more information on using the Snippet feature, see Inserting and modifying HTML or JavaScript.

Embedding PhotoBucket albums

PhotoBucket currently does not support https, so Photobucket albums cannot be embedded on pages accessed using https.

To embed a slideshow of photos from an album in your PhotoBucket account, follow these steps:

1. Sign into your Photobucket account (or create a new one) at photobucket.com.
2. Go to your library, and display the photo album you want to use.
3. In the Links to share this album panel along the right, copy the HTML Embed code.
   
4. Sign into your Wild Apricot site as an administrator then go to the Website module and click the Sites pages option.
5. Begin editing the site page or page template where you want the slideshow to appear.
6. Click the Gadgets icon to display the list of available gadgets.
7. Drag the custom HTML gadget from the Gadget list, and drop it on the desired location.
8. After you have inserted the gadget, hover over it and click the Settings icon.
9. Within the gadget settings on the left, click the Edit code button.
   
10. In the dialog that appears, paste the code you copied from the Photobucket site.
11. Click the Save button to exit the dialog and save your changes.
12. Click the Save button to save your changes to the page.

The slideshow should now appear on your page. If it does not, switch to public view.

Embedding other photo galleries

Embedding other photo galleries involves the same basic steps:

1. Finding and copying the embed code.
2. Pasting the embed code into a custom HTML gadget, or into a content gadget using the Snippet feature.

iOS devices – including iPads – do not provide native support for Flash, so avoid embedding any galleries that use Flash if you want your users to view your site on iOS devices.