Forum
Embed Tweets (Raw HTML) in the Blog
I searched on here for quite a bit looking for a means to be able to stick raw HTML into a blog post with the hopes of being able to copy the "Embed" link from a Tweet and paste it into a field on the blog post creation page on the Dashboard and have it magically work.
I could not find anything so I am posting what I did to get this to work, either in the hopes of helping others or exposing a better alternative than what I am currently doing, which honestly feels clever, but a bit 'hacky'.
- This will provide a single field on the blog post creation form where you just paste the entire embed link off of twitter.
- The Tweet is not required but will post if populated and will do nothing if not
- This code should be place in your /perch/template/blog/post.html file. If this file exists, it is loaded instead of the default post.html, which you can copy here, and then edit all you like with out having to worry about destroying the original. (/perch/addons/apps/perch_blog/templates/blog/post.html)
- Where you paste this code will determine where on the form it appears and where in the post it appears
My code
<perch:if exists="twitter">
<div id="embed-twitter">
</div>
<script>
document.getElementById("embed-twitter").innerHTML = '<perch:blog id="twitter" type="code" label="Twitter" required="false" help="Paste the embed text from the tweets 'share' option" />';
document.getElementById("embed-twitter").innerHTML = document.getElementById("embed-twitter").innerText;
</script>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</perch:if>
Hello Dustin,
You need to set the
html
attribute to include raw HTML in a field.You can use the following:
The default template
templates/content/code_block.html
is a good reference for this.Or if you use the Twitter app, it has a shortcode you can use in your content:
Thank you both. Both suggestions have been incredibly useful.