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 🙂

Deps issue: (Mix) Hex dependency resolution failed, relax the version requirements or unlock dependencies

(Mix) Hex dependency resolution failed, relax the version requirements or unlock dependencies

I have faced the issue when you add new dependancy to your Elixir project and appeared it used different version of some deps (because developer fixed deps version).
Continue reading “Deps issue: (Mix) Hex dependency resolution failed, relax the version requirements or unlock dependencies”