How to center a facebook iframe like button

Question

I need a global solution to center a facebook iframe like button which can have different like urls and different locales (and languages - in my case 40+). So the button will have different widths in the end.

According to that I removed the width attribute and added the locale param. The iframe gets 300px wide and its not possible to center it.

See the problem in this example:

.mydiv {
  padding: 30px 0;
  background: red;
  text-align: center;
}
.mydiv span {
  font-family: sans-serif;
  text-decoration: underline;
  display: block;
  margin-bottom: 10px;
}
.mydiv iframe {
  background: green;
}

<div class="mydiv">
  <span>locale en_US</span>
  <iframe src="https://www.facebook.com/plugins/like.php?locale=en_US&href=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&layout=button_count&action=like&size=small&show_faces=true&share=false&height=21&appId=848263035268773" height="21" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>

  <span>locale de_DE</span>
  <iframe src="https://www.facebook.com/plugins/like.php?locale=de_DE&href=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&layout=button_count&action=like&size=small&show_faces=true&share=false&height=21&appId=848263035268773" height="21" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
</div>

Important here: I have to use the iframe soultion of the facebook like button, not the js sdk version.

Same domain policies will prevent you from styling content in an iframe that is rendered from another server. http://stackoverflow.com/questions/217776/how-to-apply-css-to-iframe — UncaughtTypeError, Sep 09 '16 at 15:52
Are you willing to consider javascript? You could explore the postMessage() method: http://www.dyn-web.com/tutorials/iframes/postmessage/ | http://www.onlineaspect.com/2010/01/15/backwards-compatible-postmessage/ — UncaughtTypeError, Sep 09 '16 at 16:37

score 0 · Answer 1 · answered Sep 08 '16 at 16:19

0

.mydiv {
  padding: 30px 0;
  background: red;
  text-align:center;
}

Add text-align:center to your containing div.

answered Sep 08 '16 at 16:19

Rachel S

3,360
2
19
33

It'll help if you use the property inspector in the browser :) – Rachel S Sep 08 '16 at 16:23
the edit makes my problem more clear. Any suggestions? – herrh Sep 09 '16 at 14:57
Can I know why this was downvoted an unaccepted as answer? – Rachel S Sep 29 '16 at 15:43
Ok well it did work before your edit. No need to downvote for that. And you should clearly show which part of your original post was edited. – Rachel S Sep 29 '16 at 17:05

How to center a facebook iframe like button

1 Answers1