Posted on
by

One of the things that I thought it’d be cool to be able to do with Idno, is to be able to embed a post into a blog post, rather like you can with a tweet or public Facebook posting.

Embedding posts mean that you can take a posting that you or someone else has written on their Idno site, and then build up a conversation around it.


So, I wrote a quick plugin that provides this functionality!

This current version uses an iframe to display an embed view of the selected object, using code inserted using the JSONP api, which gives you a live view of the object complete with latest comment count and using your site’s theme choices. Future versions of the plugin may make more use of the raw data returned via the JSONP endpoint.

All links will open in a new tab, so if you want to see the comments (or comment directly, if the site in question uses my in place comments plugin), then you can follow links without causing problems.

Have fun!

» Visit the project on Github…

8 thoughts on “Embeddable posts in Idno”

  7. I’ve previously talked about the embed plugin I wrote for Idno.
    The previous version made use of JQuery to call a JSONP endpoint, which was done because I was planning to construct the embed by manipulating the DOM tree.
    This proved rather complicated (although there are reasons for doing this, so I may swing back to it), especially if you wanted to preserve the individual Idno site’s custom skinning, so I opted for an IFRAME approach.
    I’ve now tidied the code to remove this JQuery requirement, and now the embed code produces an IFrame directly, rather like the related wordpress plugin.

    Share this:EmailLinkedInTwitterGoogleFacebookReddit

  8. oEmbed, as the wikipedia page puts it, is an open format for obtaining an embeddable representation of an object. As suggested in the comments in an earlier post, I’ve now extended my Idno Embedded post plugin to support oEmbed.
    It works by providing an endpoint that other sites can query, passing the permalink of the thing they’re wanting to embed, a format parameter (currently only json is supported), and any other content specific parameters (e.g. maxwidth and maxheight).
    You can pass a permalink of an idno post to this endpoint, and you’ll be returned a JSON data structure containing some details about it. Additionally, if you pass a callback parameter, you’ll get this data as JSONP, which may be more useful.
    Here’s some example code, using jQuery for convenience:



    <div class=”oembed” data-url=”https://mapkyca.com/2014/finishing-the-week-by-adding-a-bunch-of-time-saving”></div>

    <script>
    $(document).ready(function() {
    $(‘div.oembed’).each(function(index) {
    var url = $(this).attr(‘data-url’);
    var div = $(this);

    $.getJSON(‘//mapkyca.com/oembed/?callback=?’,
    {
    format: ‘json’,
    url: url
    },
    function(data) {
    div.html(data[‘html’]);
    }
    );
    });
    });
    </script>


    1234567891011121314151617181920

    <div class=“oembed” data–url=“https://mapkyca.com/2014/finishing-the-week-by-adding-a-bunch-of-time-saving”></div> <script>    $(document).ready(function() {        $(‘div.oembed’).each(function(index) {            var url = $(this).attr(‘data-url’);            var div = $(this);             $.getJSON(‘//mapkyca.com/oembed/?callback=?’,                    {                        format: ‘json’,                        url: url                    },                function(data) {                    div.html(data[‘html’]);                }            );        });    });</script>


    This example makes use of the JSONP callback to update all div elements of class oembed, with the URL from the data-url parameter.
    Because of this bug, at the moment you’ll need to use my branch of the bonita template library, which applies this fix, in order for the oEmbed functionality to work.
    Currently, all posts will default to the 'rich' data type, however you can extend this by providing your own entity class templates and provide specific details for your own custom types.
    » Visit the project on Github…

    Share this:EmailLinkedInTwitterGoogleFacebookReddit

Leave a Reply