oEmbed
Action Network supports the oEmbed standard. You can use our oEmbed endpoint to retrieve embed code for actions using their direct links. The embed code retrieved is identical to the embed code given in our user interface (described in more detail here), and you can use URL arguments to customize the layout and styles and width, just as you can in the user interface.
Sections:
Endpoint
Endpoint and behavior:
https://actionnetwork.org/oembed/
Our oEmbed implementation lives exclusively at the above endpoint. Add URL arguments on to the end of that endpoint to retrieve the embed code from specific actions, as described below.
All oEmbed requests will return a 'rich' oEmbed type containing our embed code, which uses javascript. Invalid requests will use default arguments where applicable or will return 404 not found
when necessary.
Parameters and descriptions
Parameters are passed as standard URL arguments (?foo=bar&fizz=buzz
). All parameters must be URL encoded. The parameters we accept, whether they are required, and their behaviors are described in the table below.
Parameters:
Parameter | Required | Description |
---|---|---|
url | Yes |
A URL pointing to the Action Network action you would like embed code for, in URL encoded format. Must be a direct link to an Action Network action page (so it must start with https://actionnetwork.org). Invalid URLs will return 404 not found .
|
format | Indicates the format you would like to receive the oEmbed response in. One of 'json' or 'xml', which will return a JSON or XML response, respectively. If no format is given (or an invalid format is given), JSON will be returned by default. | |
maxwidth | The maximum width you would like for your returned embed code, in pixels. If no maxwidth is given (or an invalid maxwidth is given), the embed code returned will display with a width of 100% of its parent container. | |
maxheight | The maxheight parameter is not supported, and will be ignored. Embed code returned has height equal to what's necessary to display the content, which can vary based on many situations. | |
style | The styles you would like to use with your embed code. One of 'standard', 'layout-only', or 'none', which correspond to the similar options when copying embed code from our user interface. (You can read more about those options here.) If no style is given (or an invalid style is given), standard styles will be returned by default. | |
layout | The layout you would like to use with your embed code. One of 'standard' or 'full', which correspond to the similar options when copying embed code from our user interface. (You can read more about those options here.) If no layout is given (or an invalid layout is given), the standard layout will be returned by default. |
Response and descriptions
Assuming no errors and your action URL is found in our system, the oEmbed response we provide (in the format you request) will have the parameters described in the table below.
Response:
Parameter | Description |
---|---|
type | Always 'rich', indicating the rich oEmbed type. |
version | Always '1.0', according to the oEmbed specification. |
provider_name | Always 'Action Network'. |
provider_url | Always "https://actionnetwork.org". |
width |
The width of the returned embed code, in pixels. Only present if a valid maxwidth parameters was sent on the request, otherwise the embed code returned will display with a width of 100% of its parent container.
|
height | The height parameter is not supported, and will not be returned in the response. Embed code returned has height equal to what's necessary to display the content, which can vary based on many situations. |
html | The html of the embed code necessary to embed the action requested. If XML format is requested, the html response is also escaped. |
author_name | The name of the creator of this action, either the public sponsoring group name or the name of the organizer who created the action. |
author_url | The URL to the public profile page of the creator of this action on Action Network, either the sponsoring group or an organizer's profile. |
title | The title of the action, as defined by the action's Facebook share options. |
thumbnail_url | The URL to the share image of the action, as defined by the action's Facebook share options. |
description | The description of the action, as defined by the action's Facebook share options. NOTE: This parameter is not in line with the oEmbed specification. |
url | The URL of the action, as defined by the action's Facebook share options. NOTE: This parameter is not in line with the oEmbed specification. |
Examples
Below are a few examples of how to use Action Network's oEmbed endpoint to retrieve embed code.
Here's how you would retrieve embed code in JSON format:
Request
GET https://actionnetwork.org/oembed/?url=https%3A%2F%2F.actionnetwork.org%2Fpetitions%2Fyour-petition%3F
Response
200 OK Content-Type: application/json
{ "type": "rich", "version": "1.0", "provider_name": "Action Network", "provider_url": "https://actionnetwork.org", "html": "<link href='https://actionnetwork.org/css/style-embed-v3.css' rel='stylesheet' type='text/css' /><script src='https://actionnetwork.org/widgets/v5/petition/your-petition?format=js&source=widget'></script><div id='can-petition-area-your-petition' style='width: 100%'><!-- this div is the target for our HTML insertion --></div>", "author_name": "Progressive Action Now", "author_url": "https://actionnetwork.org/groups/progressive-action-now", "title": "Please take action today!", "thumbnail_url": "https://actionnetwork.org/uploads/take-action.jpg", "description": "Please take action today! It's very very important.", "url": "https://actionnetwork.org/petitions/your-petition" }
And in XML format:
Request
GET https://actionnetwork.org/oembed/?url=https%3A%2F%2F.actionnetwork.org%2Fpetitions%2Fyour-petition%3F&format=xml
Response
200 OK Content-Type: text/xml
<oembed> <type>rich</type> <version>1.0</version> <provider_name>Action Network</provider_name> <provider_url>https://actionnetwork.org</provider_url> <html> <link href='https://actionnetwork.org/css/style-embed-v3.css' rel='stylesheet' type='text/css' /><script src='https://actionnetwork.org/widgets/v5/petition/your-petition?format=js&source=widget&style=full'></script><div id='can-petition-area-your-petition' style='width: 100%'><!-- this div is the target for our HTML insertion --></div> </html> <author_name>Progressive Action Now</author_name> <author_url>https://actionnetwork.org/groups/progressive-action-now</author_url> <title>Please take action today!</title> <thumbnail_url>https://actionnetwork.org/uploads/take-action.jpg</thumbnail_url> <description>Please take action today! It's very very important.</description> <url>https://actionnetwork.org/petitions/your-petitionw</url> </oembed>
And finally, here's an example of how you'd use other available parameters like maxwidth, layout, and style:
Request
GET https://actionnetwork.org/oembed/?url=https%3A%2F%2F.actionnetwork.org%2Fpetitions%2Fyour-petition%3F&maxwidth=500&layout=full&style=layout-only
Response
Back To Top ↑200 OK Content-Type: application/json
{ "type": "rich", "version": "1.0", "provider_name": "Action Network", "provider_url": "https://actionnetwork.org", "width": 500, "html": "<link href='https://actionnetwork.org/css/style-embed-whitelabel-v3.css' rel='stylesheet' type='text/css' /><script src='https://actionnetwork.org/widgets/v5/petition/your-petition?format=js&source=widget&style=full'></script><div id='can-petition-area-your-petition' style='width: 500px'><!-- this div is the target for our HTML insertion --></div>", "author_name": "Progressive Action Now", "author_url": "https://actionnetwork.org/groups/progressive-action-now", "title": "Please take action today!", "thumbnail_url": "https://actionnetwork.org/uploads/take-action.jpg", "description": "Please take action today! It's very very important.", "url": "https://actionnetwork.org/petitions/your-petition" }