Skip to main content

Social play and sharing

note

If you are using our JavaScript embed code or WordPress plugin, then social sharing and social play is automatically handled for you. You can skip this section.

The problem​

Major browsers such as Safari, Chrome, and Firefox have been tightening their security policies recently. These security updates disallow a third party iframe (such as the PuzzleMe iframe) from reading the complete URL of the host page where the iframe is embedded. PuzzleMe needs the host page URL when users share a game on social media from within the iframe, or invite friends to join them in a game. It also needs this URL to open a deep link to a game. A deep link is a link that bypasses the games picker and directly opens a specific game.

To fix this problem, the host page needs to provide the URL of the puzzle page to the PuzzleMe iframe, along with the deep link parameters (which are typically a puzzle id to identify a specific puzzle, or a play id for an invitee to join a specific session). This can be done using some modifications to the embed code using JavaScript.

The solution​

The following parameters need to be appended to the iframe URL at the time of loading the puzzle. These parameters are case sensitive.

src​

The src parameter takes the URL encoded version of the full URL of your puzzle page. For example, if the puzzle is embedded on the page

https://www.newyorker.com/puzzles-and-games-dept/mini-crossword/2024/04/11

then the encoded value of the URL becomes

https%3A%2F%2Fwww.newyorker.com%2Fpuzzles-and-games-dept%2Fmini-crossword%2F2024%2F04%2F11

Please include only the full URL path, and do not include any query parameters (such as UTM parameters), or fragments (internal links denoted using #) in the value of the src parameter.

Here is an example embed code, where the src parameter is properly implemented. Note that the fully formed URL is a part of the iframe element's src.

<iframe src="https://cdn3.amuselabs.com/tny/crossword?id=35b6026b&set=tny-weekly&embed=1&compact=1&maxCols=2&src=http%3A%2F%2Fwww.newyorker.com%2Fpuzzles-and-games-dept%2Fmini-crossword%2F2024%2F04%2F11" style="height: 666px;"></iframe>

playId​

The playId parameter should be appended only if your puzzle page is loaded, with a playId parameter present in the URL query parameters. An example URL is

http://www.newyorker.com/puzzles-and-games-dept/mini-crossword/2024/04/11?id=35b6026b&set=tny-weekly&puzzleType=crossword&playId=01856353-5c38-4739-b803-c2c8df8e585d

id​

note

The id parameter should be embedded only if you are embedding a picker. If you are embedding a single puzzle, then you do not not need to explicitly check for the id parameter in the URL. It is already present in the original puzzle embed code.

The id parameter should be appended only if your puzzle page is loaded, with a id parameter present in the URL query parameters. An example URL is

https://www.washingtonpost.com/crossword-puzzles/daily/?id=tca240410&set=wapo-daily&puzzleType=crossword

Points to remember​

  1. Your JavaScript should fully construct the iframe URL, with the src, playId and id (wherever applicable), before loading the puzzle iframe. The HTML on the page for the PuzzleMe iframe should not contain a src attribute before this JavaScript is run, and no other JavaScript code should set it. Otherwise, it will cause a double load of the iframe, slowing down the page and causing issues with accurate billing.
  2. You can use JavaScript to check if the playId or id parameter is present in the URL, by reading the contents of window.location.href (MDN documentation) .
  3. If the id or playId parameter is absent in the URL or contains an empty value, then do not append it to the iframe URL.