Add Facebook Open Graph tags to Phoenix Framework web page

Hi there,

This is very easy:

1. Create a function in LayoutView `web/views/layout_view.ex`:

    def ogtags(assigns) do
        if assigns[:ogtags] do
          for {key, value} <- assigns[:ogtags] do
              raw("\t\n")
          end
        else
          raw("\t\n")
        end
    end

Here I was using `content_tag` function but it created closed `</meta>` tag which I don’t really like.
In the else clause you can put some default OG tags, I put only `fb:app_id` fir the start.

2. Add this function to the app layout template `web/templates/layout/app.html.eex`:

<%= ogtags(assigns) %>

Where `assigns` is the map which contains almost everything you need to render the view.

3. Update your controller function with OG tags tuple and pass it to template like this:

  def show(conn, %{"token" => token}) do
    dream = Repo.get_by!(Dream, token: token)
    dream = Repo.preload dream, :user

    ogtags = %{
        "fb:app_id": "430839153628230",
        "og:type": "article",
        "og:site_name": "InstaDreams",
        "og:title": dream.title,
        "og:description": dream.body || dream.title,
        "og:audio": InstadreamsPhoenix.Router.Helpers.url(conn) <> "/uploads/dreams/#{dream.user.user_id}/#{dream.audio_filename}.mp3",
    }

    render(conn, "show.html", dream: dream, ogtags: ogtags)
  end

I guess the code here is self-explanatory (I used code from my pet-project www.instadreams.com).
If you have some thought how we can improve the code above feel free to post a comment here 🙂