How to create Share button for Facebook Messenger Bot ?

[ambrishverma]

Hi There, I am using Node.js botFramework to create a bot for Facebook Messenger platform. I am not able to figure out how to I create a "Share" button (as explained here: https://developers.facebook.com/docs/messenger-platform/send-api-reference/share-button ) .

I tried to pass the button type "element_share" as following but it didn't work:

                .attachments([
                    new builder.HeroCard(session)
                        .title("Title")
                        .text("A simple text")
                        .images([
                            builder.CardImage.create(session, "sample.jpg")
                        ])
                        .buttons([
                            builder.CardAction.dialogAction(session, **"element_share"**, "Share this")
                        ])
                ]);

I'd appreciate if any suggestions on this.

[craigjensen]

Try sending a native Facebook message via .sourceEvent()

[ambrishverma]

Thanks @craigjensen . I replaced the above code with SourceEvent() as shown below but it does not seem to send anything to FB Messenger. Any suggestions what might be wrong here:

msg = new builder.Message(session) msg.sourceEvent({ facebook: { "type":"template", "payload":{ "template_type":"generic", "elements":[{ "title": titleStr, "subtitle": contentStr, "image_url":"https://thechangreport.com/img/lightning.png", "buttons":[{ "type":"element_share" }] }] } } session.send(msg);

[scibol]

1604

[craigjensen]

Try changing "facebook" to "attachment" as follows:

msg = new builder.Message(session) msg.sourceEvent({ "attachment": { "type":"template", "payload":{ "template_type":"generic", "elements":[{ "title": titleStr, "subtitle": contentStr, "image_url":"https://thechangreport.com/img/lightning.png", "buttons":[{ "type":"element_share" }] }] } }}); session.send(msg);

[ambrishverma]

Thanks again @craigjensen . I still don't get any message. I think I might be missing something basic here as I tried many different messages via .SourceEvent() but none of them showed up.

[ambrishverma]

got this to work. It needed both "facebook" and then "attachment" Here is the working code:

           msg = new builder.Message(session);
           msg.sourceEvent({
                facebook: {
                    attachment:{
                      type:"template",
                      payload:{
                        template_type:"generic",
                        elements:[{
                            title:"title",
                            subtitle:"context",
                            image_url:"https://en.wikipedia.org/wiki/Space_Needle.jpg",
                            item_url: "http://m.me",
                            buttons:[{
                                type:"element_share"
                              }]
                            }]
                        }
                    }
                }
            });

[KIBASSA]

Hello, I have the same concern but with c#. How I can make to add 'Share Button' in CardAction ? Thanks for your help. Junior

[ambrishverma]

I guess you can follow the same, Try sending a native Facebook message via .sourceEvent() . Sample code above.

[fercom]

@ambrishverma I do also want to make this working on C# but I cannot find the .sourceEvent() method

[craigjensen]

Look for ChannelData in c#

[fercom]

Ok, this works:

  dynamic messageData = new JObject();
                    messageData.attachment = new JObject();
                    messageData.attachment.type = "template";
                    messageData.attachment.payload = new JObject();
                    messageData.attachment.payload.template_type = "generic";

                    messageData.attachment.payload.elements
                        = new JArray(
                            new JObject(
                                new JProperty("title", "hola"),
                                new JProperty("subtitle", "Mundo"),
                                new JProperty("buttons",
                                    new JArray(
                                        new JObject(
                                            new JProperty("type", "element_share")
                                        )
                                    )
                                )
                            )
                        );

                    replyToConversation.ChannelData = messageData;
                    ConnectorClient connector = new ConnectorClient(new Uri(activity.ServiceUrl));
                    await connector.Conversations.ReplyToActivityAsync(replyToConversation);

[chetanmekha]

@ambrishverma Hello Ambrish, I want add share button in Thumbnail card in how can i achieve it? please check see the attachment.

[slidenerd]

How do you add a share button on plain text or a quick reply? Not interested for hero cards and carousels

[fercom]

@slidenerd have you tried with a quick reply button with the type set to "type:"element_share"" ?

[slidenerd]

@fercom cannot find anything about it HERE Is this official?

[chetanmekha]

@fercom I have posted answer for above question on stack overflow please refer below link for more details, https://stackoverflow.com/questions/44195271/share-button-in-facebook-chatbot-in-node-js/44968612#44968612