Guides and Sample Code


Apple News Format: Design Tutorial

On This Page

Tweet Components

You can use tweet components to embed tweets in an article. A tweet component lets readers interact with social media content from inside an article.

image: ../Art/tweet-closeup_2x.png
image: ../Art/anatomy3_2x.png

You’ll place a tweet component in the article’s components array. For any tweet component, the value of the role property is "tweet", and the value of the URL property is the URL of the tweet that you want to embed.

For information on customizing tweet components, see Tweet in the Apple News Format Reference.

JSON Example: Tweet Component

Create a tweet component that is preceded by a heading.

The fullMarginAboveHalfBelowLayout and noMarginLayout component layout objects were defined earlier in the tutorial.

Example Code

Ellipses (...) indicate lines of code that have been omitted from this example.

  1. {
  2. ...
  3. "components": [
  4. ...
  5. {
  6. "role": "heading2",
  7. "layout": "fullMarginAboveHalfBelowLayout",
  8. "text": "TWEET HEADING"
  9. },
  10. {
  11. "role": "tweet",
  12. "layout": "noMarginLayout",
  13. "URL": ""
  14. }
  15. ],
  16. ...
  17. }

Further Exploration

At any time, you can try changing property values in your article.json file, and then use News Preview to see how these changes impact the look of your article.

For example, try changing which tweet appears in your article:

  1. In your code, find the tweet component.

  2. Replace the value of the component’s URL property, "", with the URL to another tweet of your choice.

  3. Preview your article.json file in News Preview. See also: Updating Your Article Preview.

    The article now shows the tweet that you chose.