How to embed Tumblr and Twitter in Squarespace [revised]

I had to work this out for another site of mine, Foldie Me, so posted a solution in the Squarespace forum as I could see others looking for the same solution.

See the answer at http://answers.squarespace.com/questions/17969/can-i-embed-my-tumblr-as-a-page-on-my-website/106175


I quickly grew annoyed at the forced tumblr follow tag that this solution included (comes from code injected from tumblr), so I wrote a new solution using the one of the tumblr APIs. You can see this working on the first page of Foldie Me and below the code at the end of this post.

  1. add an embed block
  2. edit code block and add the code below after clicking the "<>" in the code block to open the second editing window. Make sure you change the tumbr blog address to be your own tumblr blog or you'll be infested with pictures of awesome folding bikes; you can find the blog address in the second script block in the middle of the code.
  3. the code is hard coded to 5 entries, to add more or reduce you can just add additional lines in the code.

This code is also hard coded to only show image posts, but could be changed to use any post type, or another single post type, you get the idea. Documentation for the API is at https://www.tumblr.com/docs/en/api/v1

<div class='tumblrInjection'>
    <div class='tumblrInjectionLine'><a id='tumblrInjection1' href=''><img id='tumblrInjectionPhoto1' border='0' style='margin:3px' src='' alt='' /></a><p id='tumblrInjectionText1'></p><hr><br></div>
    <div class='tumblrInjectionLine'><a id='tumblrInjection2' href=''><img id='tumblrInjectionPhoto2' border='0' style='margin:3px' src='' alt='' /></a><p id='tumblrInjectionText2'></p><hr><br></div>
    <div class='tumblrInjectionLine'><a id='tumblrInjection3' href=''><img id='tumblrInjectionPhoto3' border='0' style='margin:3px' src='' alt='' /></a><p id='tumblrInjectionText3'></p><hr><br></div>
    <div class='tumblrInjectionLine'><a id='tumblrInjection4' href=''><img id='tumblrInjectionPhoto4' border='0' style='margin:3px' src='' alt='' /></a><p id='tumblrInjectionText4'></p><hr><br></div>
    <div class='tumblrInjectionLine'><a id='tumblrInjection5' href=''><img id='tumblrInjectionPhoto5' border='0' style='margin:3px' src='' alt='' /></a><p id='tumblrInjectionText5'></p></div>
</div>

<script type='text/javascript' src='http://foldieme.tumblr.com/api/read/json?number=5&type=photo'></script>

<script type='text/javascript'>
    document.getElementById('tumblrInjectionPhoto1').setAttribute('src', tumblr_api_read.posts[0]['photo-url-500']);
    document.getElementById('tumblrInjection1').setAttribute('href', tumblr_api_read.posts[0]['url-with-slug']);
    document.getElementById('tumblrInjectionText1').innerHTML = tumblr_api_read.posts[0]['photo-caption'];
    document.getElementById('tumblrInjectionPhoto2').setAttribute('src', tumblr_api_read.posts[1]['photo-url-500']);
    document.getElementById('tumblrInjection2').setAttribute('href', tumblr_api_read.posts[1]['url-with-slug']);
    document.getElementById('tumblrInjectionText2').innerHTML = tumblr_api_read.posts[1]['photo-caption'];
    document.getElementById('tumblrInjectionPhoto3').setAttribute('src', tumblr_api_read.posts[2]['photo-url-500']);
    document.getElementById('tumblrInjection3').setAttribute('href', tumblr_api_read.posts[2]['url-with-slug']);
    document.getElementById('tumblrInjectionText3').innerHTML = tumblr_api_read.posts[2]['photo-caption'];
    document.getElementById('tumblrInjectionPhoto4').setAttribute('src', tumblr_api_read.posts[3]['photo-url-500']);
    document.getElementById('tumblrInjection4').setAttribute('href', tumblr_api_read.posts[3]['url-with-slug']);
    document.getElementById('tumblrInjectionText4').innerHTML = tumblr_api_read.posts[3]['photo-caption'];
    document.getElementById('tumblrInjectionPhoto5').setAttribute('src', tumblr_api_read.posts[4]['photo-url-500']);
    document.getElementById('tumblrInjection5').setAttribute('href', tumblr_api_read.posts[4]['url-with-slug']);
    document.getElementById('tumblrInjectionText5').innerHTML = tumblr_api_read.posts[4]['photo-caption'];
</script>