Open Graph Template

The Open Graph Template allows you to send a template message via an open graph URL plus an optional button. Currently we only support share songs via open graph template and the song will appear in a bubble that allows the users to see album art, preview the song, and click an optional button.

Implementation

This template message can be sent via beginShareFlow() in Messenger Extensions JS SDK and via Send API with template_type equal to open_graph.

The template relies on the developer providing a URL that contains Open Graph-formatted song details. Messenger will read the og:title, og:audio, music:musician, og:site_name, and og:image properties to populate the bubble.

Availability

In the webview, to check whether the user's version of Messenger supports music messages, call getSupportedFeatures() and check for the key "sharing_open_graph".

Sending Open Graph Template Message via Send API

curl -X POST -H "Content-Type: application/json" -d '{
  "recipient":{
    "id":"USER_ID"
  },
  "message":{
    "attachment":{
      "type":"template",
      "payload":{
        "template_type":"open_graph",
        "elements":[
           {
            "url":"https://open.spotify.com/track/7GhIk7Il098yCjg4BQjzvb",
            "buttons":[
              {
                "type":"web_url",
                "url":"https://en.wikipedia.org/wiki/Rickrolling",
                "title":"View More"
              }              
            ]      
          }
        ]
      }
    }
  }
}' "https://graph.facebook.com/v2.6/me/messages?access_token=PAGE_ACCESS_TOKEN"

Sharing Open Graph Template Message with beginShareFlow()

Using the beginShareFlow() functionality in Messenger Extensions, you can share a music bubble using the following code:

<script>
     var messageToShare = {
      "attachment":{
         "type":"template",
         "payload":{
             "template_type":"open_graph",
             "elements": [{
                "url":"https://open.spotify.com/track/7GhIk7Il098yCjg4BQjzvb",
                "buttons":[ // Buttons are optional
                    {"type":"web_url",
                    "title":"Learn More",
                    "url":"https://en.wikipedia.org/wiki/Rickrolling"}
                    ]
                 }]
             }]
         }
      }
    };
      
    MessengerExtensions.beginShareFlow(function success() {
  	    // Share successful
  
    }, function error(errorCode, errorMessage) {      
  	    // The user was not able to share
      
    },
    messageToShare,
    "broadcast");   // Can also be "current_thread"
</script>

Fields

attachment object

Property Name Description Required

type

Value must be template

Y

payload

payload of the template

Y

payload object

Property Name Description Type Required

template_type

Value must be open_graph

Enum

Y

elements

Only one element is allowed

Array of element

Y

element object

Property Name Description Type Required

url

Open graph URL for the element

String

Y

buttons

Maximum of 1 button and only url button type supported when sharing via beginShareFlow(). Maximum of 3 buttons are allowed when sending via Send API.

Array of button

N

button object

See the Message Buttons reference doc for more on the button object.