So after spending a bit of time figuring out how to do just that, I decided to write a post about it, in the hopes that somebody else would find this useful. This article teaches you how to add an HTML embed box, which is especially useful for powerpoint presentations, infographics and related media such as images that you want other people to share, re-embed and more.

In the case of the infographics posts, I use the following code:
To copy this infographic to your own site, please use the share box below:


See how easy that is? I hope this saves a few people time – my blog is designed to collect my own thoughts, share them, and ultimately help people along the way.

There are a few steps to ensure your javascript file will work inside of your wordpress post. This is a crucial set to get right in order to add the onClick handler to your personalized, “Sharing box,” which is demonstrated above.

Step 1. Add your javascript file

There are a couple ways to do this one is using nano and then typing:

nano sharing.js
Then I copy the script:
function SelectAll(id)<br /> {<br /> document.getElementById(id).focus();<br /> document.getElementById(id).select();<br /> }
It’s a fairly straightforward tidbit of javascript.

Once you copy that in, all you do is:
Control+x, Y, Enter to Exit

After that, the file is saved – you can also ftp the file, etc. I use Coda (which I love).

To insert this function into my page, I use:

<script type="text/javascript" src="/wp-content/themes/sharing.js"></script />

Saving this in my header file, header.php, and stored here between the meta tags and the style sheet link.

After that, copy the following to the individual post:

<script type="text/javascript"> <!-- SelectAll(id); //--></script>

Then use the following:

<br /> <form name="mydemo" id="demoform"/><textarea id="txtarea" onClick="SelectAll('txtarea');" rows="9" cols="50"> <p>Content about my infographic, including an attribution link, goes here.</p> <p></textarea></form> <p>

Modify to fit the requirements for your webpage, as I did here in this infographic post.

Tagged with:  
Share →