How do I create an HTML embed code to publish WP posts on other non-WP websites?

2 Views

I would like to offer an embed code on my WP blog allowing users to re-publish recent posts on their websites using HTML/ Javascript code snippet that they can copy from my WP site and paste into their non-WP site.

Can you guys help?

Post Views: 2

Related posts

Leave a Reply

4 comments

  1. You basically need to create an area outside of your current theme in which to create some content that you can stick into an iframe.

    You just give your user something like this:

    <iframe src="http://yoursite.com/iframe/"></iframe>

    And they have your posts on their site!

    Step one is going to be creating a URL end point for your iframe. First you need to add a rewrite rule for the iframe, then filter the query variable to make sure WordPress recognized your new iframe query var and doesn’t strip it out.

    <?php
add_action( 'init', 'wpse32725_add_rewrite' );
/**
 * Adds the rewrite rule for our iframe
 * 
 * @uses add_rewrite_rule
 */
function wpse32725_add_rewrite()
{
    add_rewrite_rule(
        '^iframe$',
        'index.php?iframe=true',
        'top'
    );
}

add_filter( 'query_vars', 'wpse32725_filter_vars' );
/**
 * adds our iframe query variable so WP knows what it is and doesn't
 * just strip it out
 */
function wpse32725_filter_vars( $vars )
{
    $vars[] = 'iframe';
    return $vars;
}

    Next up, hook into template_redirect and “catch” whenever the iframe query variable is present. If it is, you can do whatever you want. Eg. get a list of posts and display them.

    <?php
add_action( 'template_redirect', 'wpse32725_catch_iframe' );
/**
 * Catches our iframe query variable.  If it's there, we'll stop the 
 * rest of WP from loading and do our thing.  If not, everything will
 * continue on its merry way.
 * 
 * @uses get_query_var
 * @uses get_posts
 */
function wpse32725_catch_iframe()
{
    // no iframe? bail
    if( ! get_query_var( 'iframe' ) ) return;

    // Here we can do whatever need to do to display our iframe.
    // this is a quick example, but maybe a better idea would be to include
    // a file that contains your template for this?
    $posts = get_posts( array( 'numberposts' => 5 ) );
    ?>
    <!doctype html>
    <html <?php language_attributes(); ?>>
    <head>
        <?php /* stylesheets and such here */ ?>
    </head>
    <body>
        <ul>
            <?php foreach( $posts as $p ): ?>
                <li>
                    <a href="<?php echo esc_url( get_permalink( $p ) ); ?>"><?php echo esc_html( $p->post_title ); ?></a>
                </li>
            <?php endforeach; ?>
        <ul>
    </body>
    </html>
    <?php
    // finally, call exit(); and stop wp from finishing (eg. loading the
    // templates
    exit();
}

    All that’s left is to create some place for your users to get the iframe code. You could use a shortcode to do that, or just create a function (like the one below) to stick into your theme some place.

    <?php
function wpse32725_iframe_code()
{
    return sprintf(
        '<code>&lt;iframe src="%s"&gt;&lt;/iframe&gt;</code>',
        esc_url( home_url('/iframe/') )
    );
}

    Here’s all that as a plugin.

  4. … this functionality already exists by default.

    Any WordPress site can publish an external RSS feed in a widget on their site. So long as you are producing an RSS feed of your content, other WP sites can re-publish that content through a widget.

    If you want to write a custom plugin to do this (i.e. create a single, installable system that doesn’t require end users to know or understand RSS), it’s actually pretty easy.

    I actually publish a plugin that allows WP site owners to re-publish content from a WordPress site in their sidebar. It’s a specific site, and I only publish the results of a specific search query.

    Here’s roughly what it does:

    1. Pull the RSS from the remote site
    2. Parse the RSS feed for the latest post (I’m only listing the most recent one).
    3. Output the latest post as a widget in the sidebar

    Widget Code:

    class My_Widget extends WP_Widget {
    function My_Widget() {
        $widget_ops = array(
            'classname' => 'my_widget',
            'description' => 'Add the latest post from My Blog to your sidebar.'
        );

        $this->WP_Widget( false, 'My Widget', $widget_ops );
    }

    function widget( $args, $instance ) {
        extract( $args );

        // Get the feed
        $feed = fetch_feed( "http://myblog.com&feed=rss2" );
        $post = array();

        if( is_wp_error( $feed ) )
            return;

        $latest = $feed->get_item();

        $post = array(
            'title' => esc_attr(strip_tags($latest->get_title())),
            'excerpt' => str_replace( array("n", "r"), ' ', esc_attr( strip_tags( @html_entity_decode( $latest->get_description(), ENT_QUOTES, get_option('blog_charset') ) ) ) ),
            'content' => str_replace( array("n", "r"), ' ', $latest->get_content() ),
            'link' => esc_url(strip_tags($latest->get_link()))
        );

        echo $before_widget;
        echo '<div class="inside">';
        echo '<div class="overflow">';
        echo '<span class="top"></span>';
        echo '<h2><a href="' . $post['link'] . '">' . $post['title'] . '</a></h2>';
        echo '<p>' . $post['content'] . '</p>';
        echo '<p class="credit">Powered by <a href="http://myblog.com">MyBlog.com</a></p>';
        echo '<span class="bottom"></span>';
        echo '</div>';
        echo '</div>';
        echo $after_widget;
    }
}

    The advantage here is that fetch_feed() will cache the feed with a transient, so I’m not hitting the remote site on every page load. It’s fast, efficient, and pretty easy to do. The plugin I linked to above pulls the latest post from a site that offers daily spiritual meditations, and I republish the latest meditation on my own site.

    You can see it in action on the sidebar of one of my blogs, Grounded Christianity.