Move / Position Facebook Like Button Comment Popup

I need to move the popup comment box associated with a facebook like button. I understand this question has been asked and resolved a myriad of times.

Previously asked: Facebook Like Widget on Fan page, Comment area out of visible area

Screenshot of same issue as mine:

The difference here is that I believe Facebook has changed the implementation within the past several months so that both the Like Button and the comment popup are contained within a single iframe. I would expect they likely did this because it would be the only reliable way to guard against malicious websites taking advantage of users by auto-liking content. However, it means that I can't apply CSS to reposition the comment box.

I am using the HTML5 like button implementation, which is the same used on the official facebook reference for like buttons To see an example, click the like button on the facebook reference page again and then inspect the comment popup element. You'll see that both the like button and comment popup are contained within the same iframe.


This has worked for me in the past.

.fb-like.fb_edge_widget_with_comment.fb_iframe_widget span iframe {
    /* Now you can apply css here */

You can't change the CSS of the comment box inside the iframe because it's an violation of the same origin policy:

The policy permits scripts running on pages originating from the same site to access each other's methods and properties with no specific restrictions, but prevents access to most methods and properties across pages on different sites.

The send message to box can be changed with CSS because it doesn't reside in the iframe.

this works for me, here is a fiddle example. All I do was a simple modification with css:

.fb_edge_widget_with_comment span.fb_send_button_form_widget {
  top:100px!important;  /*for example*/
  left:100px!important;        /*for example*/

‚Äč hope this helps.

I checked out the Facebook example and I am seeing this comment box:

I inspected, and applied stylings to this class:

.-cx-PRIVATE-pluginCommentFlyout__full {
    top: 100px!important;
    left: 100px!important;

And that moved the comment box. However, I did this directly in the inspector, so when you are using it in your CSS, you may need to include the parent selectors as well to be really specific.

Hope this helps!

Need Your Help

MySQL stored procedures use them or not to use them

mysql database performance database-design stored-procedures

We are at the beginning of a new project, and we are really wondering if we should use stored procedures in MySQL or not.

Trie complexity and searching

algorithm data-structures time-complexity hashtable trie

What is the complexity of creating a trie of a list of words and what is complexity of searching other set of word in that trie?