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/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.

Theme

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.
  • font - Set the default font to any Google Font

You can also hide the "frame" from the iframe with the frameless=1 param.

<iframe
  src="https://graze.social/feeds/embed/123?bgColor=white&primaryTextColor=black&secondaryTextColor=gray"
></iframe>

Presentation Type

Using query string params you can modify the type of layout for the embed.

  • carousel - Present the post in a carousel
  • carousel-auto - A carousel that automatically scrolls to the next item
  • masonry - Lay the posts out pinterest style, users must click to load more posts
  • masonry-infinite - A masonry layout that loads more posts as the user scrolls

If you have a feed that consists mainly of images you can use the imageStyle=1 param and the images will be featured more prominently.

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>