Facebook Like Button in Top Left Corner of Screen

[ctp2120]

Hi Everyone,

I've followed the steps to insert a Facebook widget. Created a rectangle, Utilities, Wed Properties, Placeholder, HTML code (body) and (head) with the following codes respectively (copied directly from Facebook's developer):

<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.4";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div class="fb-like" data-href="https://www.facebook.com/ctpetersinc" data-width="70" data-layout="button" data-action="like" data-show-faces="false" data-share="false"></div>


When I preview the website, the button is in the top left corner of the screen. The same thing when I preview in IE or Firefox.

How do I correct this problem?


A preemptive thanks to all who are willing to help!

[gwpriester]

Welcome to TalkGraphics

Where are you placing the placeholder?

I just used your code in a placeholder (see attached) and it worked exactly as I would expect it to.

My illustration is not very clear however. The top area shows where I added the placeholders on the page and outside the page. Both placeholders are Sticky. The bottom is a portion of the screen display when I previewed the page.

[ctp2120]

I'm confused by your question. I created the rectangle in the mouseoff later and put the two codes in the html code section of the placeholder tab. The picture I attached shows the button in the correct location on the left in the edit screen and the button in the top left corner of the screen, on the right in the preview screen. Why does it move when in preview mode?

[Acorn]

Place the DIV lines in the Placeholder body.

You can try the SCRIPT lines in the Head but it seems to work all in the Body.

In passing, you should never have anything other than SCRIPT or STYLE in the Head.
The DIV in the head forces the Placeholder to appear as the first item in the DOM body, which happens to be top left.

Acorn

[jamesd]

Hi Everyone,

I've followed the steps to insert a Facebook widget. Created a rectangle, Utilities, Wed Properties, Placeholder, HTML code (body) and (head) with the following codes respectively (copied directly from Facebook's developer):

<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.4";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div class="fb-like" data-href="https://www.facebook.com/ctpetersinc" data-width="70" data-layout="button" data-action="like" data-show-faces="false" data-share="false"></div>


When I preview the website, the button is in the top left corner of the screen. The same thing when I preview in IE or Firefox.

How do I correct this problem?


A preemptive thanks to all who are willing to help!

All code should go into placeholder >> HTML code (body) only

[ctp2120]

Thank you! I must have misread the directions that said to place the div line in the head. Thank you all for the feedback.