Hi, im doing fashion website for my friend, and i have question about embeding instagram post. Instagram have options for embdeding posts with generate code, so when i embed post it looks something like this:



The problem is because it's very hard to editing content. I now that i have other options like editable region, but i dont always know where the post will be embeded in content. So if you have maybe better solution i will appreciate

Tnx for the help!

Hi,

Use a shortcode maybe ?

https://docs.couchcms.com/miscellaneous/shortcodes.html

How to use with instagram, do you have idea?

@misho86

You can use repeatable regions or mosaic to show embed Instagram links:

repeatable regions

Code: Select all

<cms:template>
    <cms:repeatable name='instagram_embed_code' >
       <cms:editable type='text' name='inst_emb_link' label='Insta Embed Code' />
   </cms:repeatable>
</cms:template>

<cms:show_repeatable 'instagram_embed_code' >
    <cms:show inst_emb_link /><script async defer src="//www.instagram.com/embed.js"></script>
</cms:show_repeatable>

mosaic

Code: Select all

<cms:template title='Blog Page' clonable='1'>
    <cms:mosaic name='content' label='Content'>
        <cms:tile name='embed_instagram' label='Instagram Embed'>
                  <cms:editable name='instagram_embed_code' label='Insta Embed Code' type='text' />
            </cms:tile>
   </cms:mosaic>
</cms:template>

<cms:show_mosaic 'content'>
     <cms:if k_tile_name='embed_instagram' >
        <div>
            <cms:show instagram_embed_code /><script async defer src="//www.instagram.com/embed.js"></script>
        </div>
    </cms:if>
</cms:show_mosaic>

!When you paste the embed code to an editable text region you can remove the last script part

Code: Select all

<script async defer src="//www.instagram.com/embed.js">

from the code and put into header or footer on your page.!

I hope its help.

@misho86

You can use repeatable regions or mosaic to show embed Instagram links:

repeatable regions

Code: Select all

<cms:template>
    <cms:repeatable name='instagram_embed_code' >
       <cms:editable type='text' name='inst_emb_link' label='Insta Embed Code' />
   </cms:repeatable>
</cms:template>

<cms:show_repeatable 'instagram_embed_code' >
    <cms:show inst_emb_link /><script async defer src="//www.instagram.com/embed.js"></script>
</cms:show_repeatable>

mosaic

Code: Select all

<cms:template title='Blog Page' clonable='1'>
    <cms:mosaic name='content' label='Content'>
        <cms:tile name='embed_instagram' label='Instagram Embed'>
                  <cms:editable name='instagram_embed_code' label='Insta Embed Code' type='text' />
            </cms:tile>
   </cms:mosaic>
</cms:template>

<cms:show_mosaic 'content'>
     <cms:if k_tile_name='embed_instagram' >
        <div>
            <cms:show instagram_embed_code /><script async defer src="//www.instagram.com/embed.js"></script>
        </div>
    </cms:if>
</cms:show_mosaic>

!When you paste the embed code to an editable text region you can remove the last script part

Code: Select all

<script async defer src="//www.instagram.com/embed.js">

from the code and put into header or footer on your page.!

I hope its help.

This is good solution but, how to embed code in content if i have some line of text:

Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
----------------------------------------------------------------------------------------------------------------
Then I want to embed some instagram

And again some content Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
----------------------------------------------------------------------------------------------------------------
Then I want to embed some instagram

I dont know where the embeded post will be in content, that's the problem.

[trendoman]

Somebody yet created a dedicated shortcode for insta, but likely you will be fine with all-purpose shortcode by @tim viewtopic.php?f=8&t=7950

Somebody yet created a dedicated shortcode for insta, but likely you will be fine with all-purpose shortcode by @tim viewtopic.php?f=8&t=7950

do you have this shortcode for insta or? tnx

[KK]

@misho86,
Please add the following code to your 'couch/addons/kfunctions.php' file -

Code: Select all

    // Instagram shortcode
    // Example usage:
    //  [instagram BoGOAK_gLYq]
    $FUNCS->register_shortcode( 'instagram', 'instagram_handler' );
    function instagram_handler( $params, $content=null ){
        global $FUNCS;

        extract( $FUNCS->get_named_vars(array(
            'id' => '',
        ), $params) );

        $html = '';
        $id = trim( $id );
        if( strlen($id) ){
            $url = 'https://api.instagram.com/oembed/?url='.urlencode( 'https://www.instagram.com/p/'.$id );
            $res = $FUNCS->file_get_contents( $url );
            if( strlen($res) ){
                $res = $FUNCS->json_decode( $res );
                if( isset($res['html']) ){
                    $html = $res['html'];
                }
            }
        }

        return $html;
    }

Now you should be able to embed a [instagram] shortcode anywhere in your content e.g. as follows -

Code: Select all

[instagram BoGkRY3FBYv]

The ID provided to the shortcode can be found in the URL of the instagram image to be embedded e.g.

https://www.instagram.com/p/BoGkRY3FBYv/

As explained in the docs (https://docs.couchcms.com/miscellaneous/shortcodes.html) don't forget to use <cms:do_shortcodes> tag around your original <cms:show /> tag in the template. For example, if the original statement was

Code: Select all

<cms:show my_content />

modify it to make it -

Code: Select all

<cms:do_shortcodes><cms:show my_content /></cms:do_shortcodes>

Please note - this shortcode has been tested only on Couch v2.2beta so if it does not work, you'll have to upgrade.

Hope this helps. Do let me know.

Hi KK,

it works great! It been tested on ver 2.1! Thanks a lot!

Hi KK,
I realise when I embed instagram post into my content, sometimes it works and other times it doesn't. Any help with that?