Customizing the feed

Embedding Feeds

If you built your feed on Graze you can easily embed it in any webpage. This guide walks your though how to do get set up and even theme the feed.

Embedding your feed on your website is as easy as adding a single line of code.

<iframe src="https://graze-social.com/feeds/embed/123"></iframe>

With this you'll get your feed rendered just like it is on Graze Social.

Customizing the feed

The feed support light customization though query string parameters.

The following parameters are supported:

  • bgColor - The background color of a post.
  • primaryTextColor - The primary text color of a post.
  • secondaryTextColor - The secondary text color of a post.
  • replyHeaderBgColor - The background color of a reply header.
  • replyHeaderTextColor - The text color of a reply header.
<iframe
  src="https://graze-social.com/feeds/embed/123?bgColor=white&primaryTextColor=black&secondaryTextColor=gray"
></iframe>

Integrating the iframe

The default iframe is ugly and it is very obvious that it is an iframe.If you're embedding a feed on your website, you probably want it to feel like part of your website.

To enable this the `iframe` will post a message to the parent window when it resizes. The parent window can then adjust the height of the iframe to fit the content.

<div>
  <iframe
    src="http://localhost:4321/feeds/embed/1702"
    frameborder="0"
    style="width: 100%; border: none"
    id="myIframe"
  ></iframe>

  <script>
    window.addEventListener(
      "message",
      function ({ data }) {
        if (!data || !Array.isArray(data)) return;

        // We'll send an event with the name `setHeight` and the data will be a
        // object with the `id` of the iframe and the `height` of the iframe.
        const [eventName, eventData] = data;

        switch (eventName) {
          case "setHeight": {
            const iframes = document.getElementsByTagName("iframe");

            for (const iframe of iframes) {
              if (iframe.id === eventData.id) {
                iframe.style.height = eventData.height + "px";
                break;
              }
            }
          }
        }
      },
      false
    );
  </script>
</div>