How to display a canvas as a chatter feed item?

Question

I am using the Heroku sample canvas app as given in the documentation and try to set it as a chatter feed item as per the documentation. Once after the setup, i am trying to see the canvas in the chatter feed item but it did not display. Am i missing something?

Also, the canvas framework api documentation here does not provide any clear directions to achieve this. Also, this Youtube video just demonstrate it but did not go to the implementation (atleast some overview)

Any link to documentation or code samples or videos to achieve this would be very helpful.

Questions:

1. How can i see the canvas app as a chatter feed item?
2. Do i need to write any APEX for the canvas to display as a chatter feed item? Any suggestions please.
3. What settings i need to do to bring or display the canvas as a chatter feed item?

App setting for the canvas app:

Answer 1

Finally, i have found a solution on how to create a feed item post with canvas as a feed item. The following code snippet explains the details in the comment on each part.

The procedure is,

1. Create feed item input
2. Create text segment to hold the message body
3. Create the canvas attachment
4. Create FeedItemPost

Once the Heroku web application is created and the Canvas application is defined in Salesforce, the Canvas application can be put in the Chatter feed item from the Apex method using the ConnectAPI.CanvasAttachmentInput class to set the Canvas application parameters. These parameters include setting the Canvas API name, a title for the Canvas application, an optional description to put in the Chatter post, an optional thumbnail to put in the Chatter post, an optional parameter string, and an optional height setting.

// Create feed item input
ConnectApi.FeedItemInput feedItemInput = new ConnectApi.FeedItemInput();
feedItemInput.body = new ConnectApi.MessageBodyInput();

// Create text segment to hold the message body
List<ConnectApi.MessageSegmentInput> segments = new List<ConnectApi.MessageSegmentInput>();
ConnectApi.TextSegmentInput textSegment = new ConnectApi.TextSegmentInput();
textSegment.text = comment;
segments.add(textSegment);
feedItemInput.body.messageSegments = segments;

// Create the canvas attachment
ConnectApi.CanvasAttachmentInput attachmentInput = new ConnectApi.CanvasAttachmentInput();
attachmentInput.developerName = 'Case_Example';
attachmentInput.title = 'Check Inventory';
attachmentInput.description = 'This is the details for for Case - ' + c.Subject + 
                              '.  Click the link to open the Canvas App.';
attachmentInput.thumbnailUrl = 'https://check-inventory.herokuapp.com/images/telescope32.png';
attachmentInput.parameters = '{"caseId":"'+caseId+'","view":"case"}';    
attachmentInput.height = '400px';
feedItemInput.attachment = attachmentInput;

//Create FeedItemPost//
ConnectApi.FeedItem feedItem = ConnectApi.ChatterFeeds.postFeedItem(null, 
                                                                    ConnectApi.FeedType.RECORD, 
                                                                    c.Account.Customer_Chatter_Group_Id__c, 
                                                                    feedItemInput, 
                                                                    null);