Facebook Responsive Embed

This isn’t a Rails post, it’s not even a development post.

I wanted to embed a Facebook post, but I was having trouble making it responsive.  I could have made it responsive using CSS, but I didn’t really want to do that.

I looked at this Stack Overflow question, but I couldn’t get the solution work where you change the embed code to be width:100% and width:auto.  That worked for the width, but the height wasn’t adjusting for me.

What I figured out was if I click to embed and then I go to the advanced settings, I could get it to work by removing the ‘500’ for width (in the settings), and then getting the Javascript code (could not get the iFrame to work).

Advertisements

CSS Only Image Overlay

While this isn’t a Rails solution, it was one that was so helpful to me that I wanted to post about it.  I needed a tinted/filtered image overlay with text.  After Binging the internet, I found the solution courtesy of Koren Leslie Cohen.

You can read her post here to see a demo, but you wrap your image, like this:

  <div id=“outer-box”>
    <img src=“cartagena.jpg”>
    <div id=“inner-box”>
      <p>This is the overlay!</p>
    </div>
  </div>
and then add this CSS,
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
#outer-box {
  width: 300px;
  height: 194px;
  display: block;
  position: relative;
}
#outer-box img {
  width: 300px;
  height: auto;
}
#outer-box #inner-box {
  background: #FD8698;
  height: 100%;
  width: 100%;
  opacity: 0;
  top: 0;
  left: 0;
  position: absolute;
  padding: 0;
  transition: opacity .5s;
}
#outer-box #inner-box p {
  color: #fff;
  lineheight: 150px;
  fontfamily: ‘arial’;
  textalign: center;
}
#outer-box:hover #inner-box {
  opacity: .9;
  transition: opacity .5s;
}

This will show the overlay when the image is hovered over.  For me, I wanted to show the overlay without the hover, so I changed line 33 to be:

#outer-box #inner-box {

Facebook not Showing Open Graph Images

My image tags were right for Open Graph, but my images weren’t showing when when people tried to share on Facebook.

I found my answer on Stack Overflow here.

Apparently, if Facebook doesn’t already know of a page, it will not know about the image until after it is shared once (at which time it becomes aware of the page).

However, there’s a work around.  You have to specify additional attributes about the image – the height and the width (where the content value is the number of pixels for width and height, respectively):

<meta property=”og:image:width” content=”450″/>
<meta property=”og:image:height” content=”298″/>