Add scripts/iframes to Sharepoint 2013 blog posts.

If you add code for an iframe or a script to a Sharepoint blog post, you’ll be greeted with an annoying alert that warns you that: “some of your html may have been modified”. In effect, filters in the text editor strip out your code as a result of one of Microsoft’s odder design decisions: to allow iframe and script codes in a page but strip them out from the rich text “body” field in their blog post template. This inconsistency is annoying andnot getting any attention from Microsoft, so we need to workaround it.One option to get around this odd restriction is to add another field to the post list view web part that will dodge the rich text field filters, and render iframes and scripts right below the body field. This article will show you how to do that in 4 steps:

1/ Add an html field to the post list
2/ Rig it so it renders as html not text
3/ Add the field to the list’s views
4/ Add a simple script via a jslink file so it shows up in the post.

Add an html field to the post list
Navigate to your blog post list’s settings and add a single line text column called”html” to the list.

Rig it so it renders as html not text
Add a calculated column with this formula:=html.
Name the field”Calc” – if you use a different name make sure you update the field name in the jslink file referenced below.
Important:SELECT “NUMBER” AS THE OUTPUT. This little trick ensures the code you enter in the html field will render as code and not plain text. Keep in mind the character limit of a single line text field is 255, so your code will have to be below that!

Add the field to the list’s views
Adding a field to the post list view and then updating the view on the post.aspx page will break the connections and scripts that make the blog work. So you will have to open the post.aspx page in Sharepoint Designer, click into the appropriate list view web part and use the”add fields” tool in the ribbon.
MAKE SURE YOU MAKE A BACK UP COPY OF THE PAGE FIRST!

Because of a bug and Msft’s lack of quality control, the list view tools may not be visible, in which case use this trick:
Right click the list view web part.
Click”tag properties” which will open the properties dialog and then OK.

Now the tools should show up, and you can add the”Calc” field to the list view web part. You will need to repeat this for the other blog pages if you want your html to show on them: date.aspx, default.aspx, category.aspx.

NOTE: If your html field returns “undefined”, go back to post.aspx in SPD and make sure the field ref name of your field (“html”) is included in the query of the list view web part.

After editing these pages, you’ll notice the”blog tools” web part now displays an error and the page may not look right. This is another bug in SP that you can easily repair by adding the blog tools web part again and deleting the original.

Add a simple script via a jslink file so it shows up in the post.
If you’re not familiar with jslink, you can download the file below and upload it to a root library, such as site assets.

To connect it to your list view web parts, open up the web part properties and under”Miscellaneous>jslink” add the path to the file formatted with the appropriate site token. For example, for domain.sharepoint.com/siteassets/blog-html.js, use ~sitecollection/siteassets/blog-html.js. The token MUST be used for jslink to work.

Download jslink file here

Add your code
To test, edit a post and add a simple iframe code to the new”html” field. As mentioned, you cannot exceed 255 characters. I wrapped the html field in a span with a class of “post-html”, so you can adjust the styling as needed.

Questions?

Visit my forum » if you have any questions. For development work, you can contact me here ». And if you think this would be useful to others, feel free to share it by clicking one of the share buttons up top!