Snippet Samples

From Documentation
Revision as of 22:44, 13 January 2015 by Adam (Talk | contribs) (Using the Web Snippet)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

The NetObjects Fusion Snippet Component is a Powerful new tool designed to dramatically improve the way you work with embedded HTML through the software. The Snippet Component takes the guesswork out of how your embedded code from third parties such as Twitter and Google Maps, will render.

Disclaimer
Some “snippets” require a remote publish to render due to safety precautions. This is not controlled by NetObjects Fusion. If your embedded component is not showing in the Page view, try publishing it remotely to see if it works.

Using the Web Snippet

The new NetObjects Snippet tool is exceptionally powerful. With the ability to embed services from a plethora of websites you can now provide music lists, maps, and feeds, all shown in real time through the NetObjects Fusion Page view.

To embed a snippet:

  1. In Page view, select the Snippet tool from the Standard Toolbar.

Snippet.png

  1. Draw a box to indicate where you want to position the snippet.

From the Snippet Properties pane:

Snippet.jpg

  • Snippet - Paste your code snippet here.
  • Editor - Some snippets require some code to be placed in between the <head> tags and another in the <body>. Use the editor to place these snippets accordingly.
  • Samples - Takes you to documentation and tutorials on the use of the Snippet tool.
  • Overflow - Indicates whether or not generated code will display beyond the boundary box. The Automatic setting let’s NetObjects Fusion choose the appropriate setting.

Using NetObjects Width and Height Variables

Some embed codes will be smart enough to recalculate sizes based on a variable used in place of fixed sizes. This will allow you to resize the Snippet component and have the rendered code automatically update it’s size.

You can replace the width and height of the embed code with the NetObjects Variables of $NOF_WIDTH and $NOF_HEIGHT. This will force smarter components to resize automatically to the dimensions of the Snippet component box in the Page view. Please see the example below.

Google Maps Embed Code:

<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d3105.150394151072!2d-77.03653!3d38.897676000000004!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89b7b7bcdecbb1df%3A0x715969d86d0b76bf!2sThe+White+House!5e0!3m2!1sen!2sus!4v1420912478503" width="600" height="450" frameborder="0" style="border:0"></iframe>

Replace width and height with:

  • $NOF_WIDTH
  • $NOF_HEIGHT

PayPal

Adding PayPal buttons to your website is one of the easiest ways to start selling your products or services online, especially for smaller online stores. With the NetObjects Fusion Snippet tool we’ve made it easier than ever to include them in your website.

Documentation
https://developer.paypal.com/webapps/developer/docs/classic/paypal-payments-standard/gs_PayPalPaymentsStandard/
Official Site http://www.paypal.com

PayPal offers a free button generator. Select from the following options:

  • Buy Now
  • Add to Cart
  • Donate
  • Subscribe
  • QR Codes


Once you have selected the type of button you would like to add, click the Customize & Preview option.

  1. The Customize & Preview dialog appears.
  2. Fill out the required fields.
  3. Click Preview.


You are now provided the code snippet and a preview of your button.

  1. Copy the code.
  2. Open NetObjects Fusion 2015 to the Page view.
  3. Select the Snippet component from the Standard toolbar and draw a box to indicate the Snippets location on the page.
  4. Paste the code from PayPal into the Snippet field.
  5. Click away to refresh the page.
  6. Adjust the snippet box as needed.


Google Maps

Engage with your visitors by offering a detailed map of your location, event or any other physical locale required. A map encourages interaction and important dialog with your customers.

Documentation
https://support.google.com/maps/answer/3544418?hl=en&rd=1
Official Site https://www.google.com/maps

From https://www.google.com/maps type in the address you wish to show on your website. Once you have located the address in the map, click the cog icon and select Share and embed map.

  1. Click the Embed map option.
  2. Select the size of the map you wish to display.
  3. Copy the embed code.


NetObjects Tip: You can replace the width and height of the embed code with the NetObjects Variables of $NOF_WIDTH and $NOF_HEIGHT. This will force the map to resize automatically to the size of the Snippet Component box in the Page view. Please see the example below.

Google Maps Embed Code:

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d193572.01817898045!2d-73.97967999999996!3d40.70562585!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c24fa5d33f083b%3A0xc80b8f06e177fe62!2sNew+York%2C+NY!5e0!3m2!1sen!2sus!4v1418245852612" width="600" height="450" frameborder="0" style="border:0"></iframe>

Replace width and height with:
$NOF_WIDTH
$NOF_HEIGHT

  1. Open NetObjects Fusion 2015 to the Page view.
  2. Select the Snippet component from the Standard toolbar and draw a box to indicate the Snippets location on the page.
  3. Paste the code from Google into the Snippet field.
  4. Click away to refresh the page.
  5. Adjust the snippet box as needed.


Bing Maps

Engage with your visitors by offering a detailed map of your location, event or any other physical locale required. A map encourages interaction and important dialog with your customers.

Documentation
http://www.microsoft.com/maps/choose-your-bing-maps-API.aspx
Official Site http://www.bing.com/maps/

From http://www.bing.com/maps type in the address you wish to show on your website. Once you have located the address in the map, click the Share link.

  1. Click the Customize and preview button.


The Customize embedded map dialog appears.

  1. Select the size of your map you wish to display.
  2. Select Map Options
  3. Select Map Styles
  4. Select Map Links
  5. Click the Generate code button.
  6. Copy the generated code.
  7. Open NetObjects Fusion 2015 to the Page view.
  8. Select the Snippet component from the Standard toolbar and draw a box to indicate the Snippets location on the page.
  9. Paste the code from Bing into the Snippet field.
  10. Click away to refresh the page.
  11. Adjust the snippet box as needed.


Twitter

Twitter is a great way to connect with your audience in bite size chunks. Use twitter to share information, gather intelligence, and engage your audience.

Documentation
https://dev.twitter.com/web/embedded-timelines
Official Site https://twitter.com

You can embed twitter timelines of any public account. This guide will use @twitterdev for examples.

  1. Navigate to https://twitter.com/twitterdev If you are not already logged in to Twitter, you will be prompted to, do so.
  2. Click the cog icon next to the Follow button.
  3. Select Embed this profile.


The Create a user widget dialog appears.

There are several options you can configure in the Twitter widget, for a complete list visit the documentation link above.

  1. Configure the Timeline widget as needed.
  2. Click the Create Widget button.
  3. Copy the generated code.
  4. Open NetObjects Fusion 2015 to the Page view.
  5. Select the Snippet component from the Standard toolbar and draw a box to indicate the Snippets location on the page.
  6. Paste the code from Twitter into the Snippet field.
  7. Click away to refresh the page.
  8. Adjust the snippet box as needed.


Skype

Add a Skype button to your website that let’s visitors contact you or your business by clicking the button. This works on desktop and mobile browsers.

Documentation
http://www.skype.com/en/features/skype-buttons/create-skype-buttons/
Official Site http://www.skype.com

Navigate to http://www.skype.com/en/features/skype-buttons/create-skype-buttons. Fill out the fields as needed. You have the option to enter your Skype Name, whether to Call, Chat or both, and color and dimensions of your button.

  1. Configure the Skype widget as needed.
  2. Copy the generated code.
  3. Open NetObjects Fusion 2015 to the Page view.
  4. Select the Snippet component from the Standard toolbar and draw a box to indicate the Snippets location on the page.
  5. Paste the code from Skype into the Snippet field.
  6. Click away to refresh the page.
  7. Adjust the snippet box as needed.


Spotify

Spotify is a commercial music streaming service providing digital rights management-restricted content from record labels including Sony, EMI, Warner Music Group, and Universal. (From Spotify)

Documentation
https://developer.spotify.com/technologies/widgets/
Official Site https://www.spotify.com

You can embed individual songs and follow buttons. You can use the same basic steps below for the web player.

NetObjects Tip: Spotify will prompt a user to login before being able to use the service.

To embed a song from the desktop player:

  1. Open the desktop player.
  2. Search for the song you would like to embed.
  3. Right click the song and select Copy Embed Code.
  4. Open NetObjects Fusion 2015.
  5. Add a Snippet Component to your page.
  6. Paste the code from Spotify into the Snippet field.
  7. Click away to refresh the page.
  8. Adjust the snippet box as needed.


To embed an Artist Follow Button from the desktop player:

  1. Open the desktop player.
  2. Search for the artist you would like to include a share button for.
  3. Click the ellipses next to the follow button (...)
  4. Select Copy Spotify URI.
  5. Navigate to https://developer.spotify.com/technologies/widgets/spotify-follow-button.
  6. Paste the URI code to the appropriate field.
  7. Configure the remaining options as needed.
  8. Copy the generated code.
  9. Open NetObjects Fusion 2015 to the Page view.
  10. Select the Snippet component from the Standard toolbar and draw a box to indicate the Snippets location on the page.
  11. Paste the code from Spotify into the Snippet field.
  12. Click away to refresh the page.
  13. Adjust the snippet box as needed.


Soundcloud

SoundCloud is a distribution platform for streaming content on the web. Share content with your site visitors with an easy to configure web app and NetObjects Fusion snippet widget.

Documentation
https://developers.soundcloud.com/docs/api/html5-widget#methods
Official Site https://soundcloud.com

To embed a stream from Soundcloud

  1. Navigate to https://soundcloud.com.
  2. Search for the song you would like to embed.
  3. Click the Share button.
  4. Select the Embed tab.
  5. Configure the embed code as needed.
  6. Copy the generated code.
  7. Open NetObjects Fusion 2015 to the Page view.
  8. Select the Snippet component from the Standard toolbar and draw a box to indicate the Snippets location on the page.
  9. Paste the code from Soundcloud into the Snippet field.
  10. Click away to refresh the page.
  11. Adjust the snippet box as needed.


To embed a channel from Soundcloud

  1. Navigate to https://soundcloud.com.
  2. Search for the channel you would like to embed.
  3. Click the Share button.
  4. Select the Embed tab.
  5. Configure the embed code as needed.
  6. Copy the generated code.
  7. Open NetObjects Fusion 2015 to the Page view.
  8. Select the Snippet component from the Standard toolbar and draw a box to indicate the Snippets location on the page.
  9. Paste the code from Soundcloud into the Snippet field.
  10. Click away to refresh the page.
  11. Adjust the snippet box as needed.


Vine

Vine allows users to record and edit looping video clips up to six seconds long, and share them with followers.

Documentation
https://github.com/starlock/vino/wiki/API-Reference
Official Site https://vine.co

From https://vine.co search for or locate a vine you wish to show on your website. Once you have located the video, click the vertical ellipses and select Embed.

The Embed page appears.

  1. Configure the options available to you.
  2. Copy the embed code.
  3. Open NetObjects Fusion 2015.
  4. Select the Snippet component from the Standard toolbar and draw a box to indicate the Snippets location on the page.
  5. Paste the code from Vine into the Snippet field.
  6. Click away to refresh the page.
  7. Adjust the snippet box as needed.


Snippets visible only after publishing to the web

The following embeds work on Publish but not in Page view.


Facebook

Add important Facebook posts to your website to keep your visitors in-the-know about your website and activities.

Documentation
https://developers.facebook.com/docs/plugins/embedded-posts
Official Site https://www.facebook.com

You can get the embed code directly from any public post.

  1. Click on the icon that appears in the top right corner of the post.
  2. Select Embed Post from the menu drop down
  3. Copy the embed code.


NetObjects Tip: You can replace the width of the embed code with the NetObjects Variables of $NOF_WIDTH. This will force the post to resize automatically to the width of the Snippet Component box in the Page view. Please see the example below.

Facebook Post Embed Code:

<div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-post" data-href="https://www.facebook.com/NetObjectsInc/posts/10151480210374482" data-width="466"><div class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/NetObjectsInc/posts/10151480210374482">Post</a> by <a href="https://www.facebook.com/NetObjectsInc">NetObjects Inc.</a></div></div>

Replace data-width value with $NOF_WIDTH

  1. Open NetObjects Fusion 2015 to the Page view.
  2. Select the Snippet component from the Standard toolbar and draw a box to indicate the Snippets location on the page.
  3. Paste the code from Facebook into the Snippet field.
  4. Click away to refresh the page.
  5. Adjust the snippet box as needed.


Google+

Add important Google+ posts to your website to keep your visitors in-the-know about your website and activities.

Documentation
https://developers.google.com/+/web/embedded-post/
Official Site https://plus.google.com/

You can get the embed code directly from any public post.

  1. Click on the icon that appears in the top right corner of the post (hover to see the icon).
  2. Select Embed Post from the menu drop down
  3. Copy the embed code.
  4. Open NetObjects Fusion 2015 to the Page view.
  5. Select the Snippet component from the Standard toolbar and draw a box to indicate the Snippets location on the page.
  6. Paste the code from Google+ into the Snippet field.
  7. Click away to refresh the page.
  8. Adjust the snippet box as needed.


NetObjects Tip: Google+ does not currently support width and height adjustments to your embedded posts.


Instagram

Instagram is a free photo and video sharing application and service. You can upload photos or videos to the service and share them with followers or with groups of friends. People can view, comment and like posts shared by their friends on Instagram.

Documentation
http://instagram.com/developer/embedding/
Official Site http://instagram.com

To embed Instagram content you need to first visit the post on the web and get the embed code.

  1. Go to the post URL or you can go to http://instagram.com/[username] and then click the post to expand it.
  2. Click the more [...] button and select Embed.
  3. The Embed dialog opens.


You have the option to include the caption or not.

  1. Click the Copy embed code button.
  2. Open NetObjects Fusion 2015 to the Page view.
  3. Select the Snippet component from the Standard toolbar and draw a box to indicate the Snippets location on the page.
  4. Paste the code from Vine into the Snippet field.
  5. Click away to refresh the page.
  6. Adjust the snippet box as needed.


NetObjects Tip: Embedded posts from Instagram are responsive and automatically resize if the embedding container becomes smaller or larger.


Pinterest

Find images and videos and pin them on your own personal bulletin board. Emphasis is placed on discovery and curation of other people’s content.

Documentation
https://business.pinterest.com/en/widget-builder#do_embed_board
Official Site https://pinterest.com

To embed a Pinterest board, first visit https://business.pinterest.com/en/widget-builder#do_embed_board.

  1. Type or paste in the Pinterest Board URL.
  2. Select the type of widget you would like to use.
  3. Click the Build It! button.
  4. Copy the code that is generated.


NetObjects Tip: You can replace the width of the embed code with the NetObjects Variables of $NOF_WIDTH. This will force the post to resize automatically to the width of the Snippet Component box in the Page view. Please see the example below.

Pinterest Board Embed Code:

<a data-pin-do="embedBoard" href="http://www.pinterest.com/pinterest/pin-pets/" data-pin-scale-width="80" data-pin-scale-height="320" data-pin-board-width="400">Follow Pinterest's board Pin pets on Pinterest.</a>
<!-- Please call pinit.js only once per page -->
<script type="text/javascript" async defer src="//assets.pinterest.com/js/pinit.js"></script>

Replace data-pin-board-width value with $NOF_WIDTH

  1. Open NetObjects Fusion 2015 to the Page view.
  2. Select the Snippet component from the Standard toolbar and draw a box to indicate the Snippets location on the page.
  3. Paste the code from Pinterest into the Snippet field.
  4. Click away to refresh the page.
  5. Adjust the snippet box as needed.


LinkedIn

LinkedIn is a business-oriented social networking service. Connect with professionals around the world and network for success and productivity.

Documentation
https://developer.linkedin.com/documents/profile-api
Official Site https://www.linkedin.com

To embed your LinkedIn profile, first visit:
https://developer.linkedin.com/plugins/member-profile-plugin-generator?button-type-inline=true

  1. Enter your public profile URL.
  2. Choose a display mode.
  3. Choose to show or hide connections.
  4. Click the Get Code button.
  5. Copy the embed code.


NetObjects Tip: You can add a variable for width to the embed code using $NOF_WIDTH. This will force the post to resize automatically to the width of the Snippet Component box in the Page view. Please see the example below.

LinkedIn Post Embed Code:

<script src="//platform.linkedin.com/in.js" type="text/javascript"></script>
<script type="IN/MemberProfile" data-id="www.linkedin.com/in/sraubenstine" data-format="inline"></script>


Add data-width=”$NOF_WIDTH” as follows:

<script src="//platform.linkedin.com/in.js" type="text/javascript"></script>
<script type="IN/MemberProfile" data-id="www.linkedin.com/in/sraubenstine" data-format="inline" data-width=”$NOF_WIDTH”></script>
  1. Open NetObjects Fusion 2015 to the Page view.
  2. Select the Snippet component from the Standard toolbar and draw a box to indicate the Snippets location on the page.
  3. Paste the code from LinkedIn into the Snippet field.
  4. Click away to refresh the page.
  5. Adjust the snippet box as needed.