For one reason or another you might find yourself trying to load the amplifier widget (or another of our widgets for that matter) manually in a page. One reason you might do this is to test that the widget will actually load on your page without any problems. Another reason is maybe to troubleshoot a widget not loading. The latter case is clearly more problematic, but regardless, you may have need. So...how does one do this?
Follow 3 easy steps:
- Make sure jQuery will load on the page. If you don't have jQuery on the page or want to make sure that jQuery is loaded, the easiest way for the average Joe to do this is to use the jQuerify bookmarklet. It lets you inject jQuery into any page with no knowledge of javascirpt whatsoever. Get it here: http://www.learningjquery.com/2009/04/better-stronger-safer-jquerify-bookmarklet# When you run this bookmarklet's script, it will flash a message to you regarding the version of jQuery that is loaded, and if needed an alternate variable to use for $ if the page uses other javascrit libraries that conflict with jQuery (like prototype). If it tells you to use another variable, or that multiple versions are loaded you may have trouble with the rest of the steps. What you're looking for is a clean popup that indicates that jQuery was able to load successfully. Now refresh the page, and go on to the next step.
- Find an element in the page that you want to inject the widget into. Right-click said element and choose the "Inspect Element" option. Don't be afraid of the results. There are many ways to select items. For the purposes of this article we'll just focus on simple. Most modern browsers have helpful tools. In the gobbledy-gook (inspector output) that comes up, your element (even though you might not recognize it as such) will be highlighted. Right click the highlighted area and choose the menu option "Copy CSS Path" for Chrome or "Copy Unique Selector" in Firefox. Both will copy it to your clipboard to use in the next step.
- Inject the widget loader script into the page. In your browser, open the developer tools and navigate to the console (if you just finished step 2, the developer tools will already be open. Just look for and navigate to the console). In the console window, copy and paste:
newScript=document.createElement("script"); newScript.src = "//cdn.ingo.me/widgets-loader/0.9.0/js/ingo.loader.widget.js"; newScript.type = "text/javascript"; newScript.setAttributeNode(document.createAttribute("data-ingo-id")); newScript.setAttribute("data-ingo-id", "<<your widget id here>>"); newScript.setAttributeNode(document.createAttribute("async")); document.querySelector('<<paste your CSS path here>>').parentNode.appendChild(newScript);
When you pasted in that last set of javascript code, you should magically see your widget appear (maybe right where you expected).
See Who's-In?
You're done!
Thanks for reading this article.
Please Note: this works with the latest script-only approach for widgets and may or may not work for older version of the widgets. Notice that the code is using version 0.9.0 of the loader widget. You should be able to change this to the subsequent version #s as new versions are released, but that may or may not work as described since parameters and other syntax may change.