• 0

How do I change the position of Facebook Likebox Plugin?


Question

Greetings,
I am just an employee of an e-shop here in Greece and we have limited backend access to our e-shop, we cannot even access it via FTP, backup databases, we cannot edit and we have access to a limited number of theme templates.
 
I'm trying to change the position of our Facebook Likebox because I would it to become more visible since we get some customers from Facebook and we would like our e-shop to grow more popular and I cannot figure how because I know so little HTML & CSS code and I really need your help with this
 
Our e-store webpage is this: 
 
Our Likebox is at the bottom of the sidebar and I would like it to be positioned below and right of the search box in our webpage (you can see exactly where on the image I have uploaded below)
 
The Likebox is loaded via the viarable content_for_sidebar
and the code is this
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FExtreme-Mobile%2F150675894968664&width=200&height=290&show_faces=true&colorscheme=light&stream=false&show_border=true&header=true" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:210px; height:300px;" allowTransparency="true"></iframe>
 
Also today the Facebook plugin code has Javascript and HTML and if it is possible I would like to user the newer one
Here's also our website template which uses Liquid
 
Thanks a lot for reading, your time and your help as well.
Link to comment
Share on other sites

11 answers to this question

Recommended Posts

  • 0

Lemme look into the template tommorow and I'll see if I can make these changes for you.

Link to comment
Share on other sites

  • 0

So I got it to work.. you need to make 3 changes.



1) Change the width of "Centered" to be 1200px

2) Add the following inline styles to the iframe: 

  float: right;
  padding-top: 20px;

3) Move the iFrame code out of the sidebar div and into the 'centered' div right before the 'content' div.

If you do this.. you end up with:

ckDPZ9M.png

Link to comment
Share on other sites

  • 0

So I got it to work.. you need to make 3 changes.

1) Change the width of "Centered" to be 1200px

2) Add the following inline styles to the iframe: 

  float: right;
  padding-top: 20px;

3) Move the iFrame code out of the sidebar div and into the 'centered' div right before the 'content' div.

If you do this.. you end up with:

ckDPZ9M.png

 

 

In which files?? Please tell me!!!

Thanks a lot!!

Link to comment
Share on other sites

  • 0

In which files?? Please tell me!!!

Thanks a lot!!

So centered width is in:

layout.css

Not sure exactly where your iFrame code is at.  But it would be moved into application.liquid instead of in the sidebar.liquid

Link to comment
Share on other sites

  • 0

I used the following css (hack) to move it to the right without any html changes:

iframe {/* Facebook iframe */
  position: absolute;
  top: 180px;
  left: 50%;
  margin-left: 500px;
}

Actually putting it inside the content container visually makes the content width too small in my opinion.

Link to comment
Share on other sites

  • 0

I used the following css (hack) to move it to the right without any html changes:

iframe {/* Facebook iframe */
  position: absolute;
  top: 180px;
  left: 50%;
  margin-left: 500px;
}

Actually putting it inside the content container visually makes the content width too small in my opinion.

I had done that too, but then it got kind of messed up with the resizing.  You would make the content container wider to accomidate the change.

Link to comment
Share on other sites

  • 0

I had done that too, but then it got kind of messed up with the resizing.  You would make the content container wider to accomidate the change.

Ah that expains the "1) Change the width of "Centered" to be 1200px" :p

Link to comment
Share on other sites

  • 0

Ah that expains the "1) Change the width of "Centered" to be 1200px" :p

Yep. I don't know if that's the best approach or not, but worked for me haha.

Link to comment
Share on other sites

  • 0

I used the following css (hack) to move it to the right without any html changes:

iframe {/* Facebook iframe */
  position: absolute;
  top: 180px;
  left: 50%;
  margin-left: 500px;
}

Actually putting it inside the content container visually makes the content width too small in my opinion.

 

I preferred this solution because the other one was more complicated and after I had done everything as suggested, the likebox would overlap with other conent of the webpage and also the product list would show only 2 products per row. All this happened if I tried to zoom out and zoom in the webpage

 

With this css method however on lower resolutions than 1080p scroll bars would be shown and the webpage will become a little ugly ( you can see in the picture)

 

I would like to move everything more  to the left because there is some white space and  in order to hide the scroll bars.

http://s11.postimg.org/63r71d87n/Untitled.png

 

 

 

Thanks for everything so far.  

Link to comment
Share on other sites

  • 0

I preferred this solution because the other one was more complicated and after I had done everything as suggested, the likebox would overlap with other conent of the webpage and also the product list would show only 2 products per row. All this happened if I tried to zoom out and zoom in the webpage

 

With this css method however on lower resolutions than 1080p scroll bars would be shown and the webpage will become a little ugly ( you can see in the picture)

 

I would like to move everything more  to the left because there is some white space and  in order to hide the scroll bars.

http://s11.postimg.org/63r71d87n/Untitled.png

 

 

 

Thanks for everything so far.  

@media screen and (min-width: 1040px) {
    iframe {/* Facebook iframe */
      position: absolute;
      top: 180px;
      left: 50%;
      margin-left: 500px;
    }
 }

Try above code instead, when there is the enough space it will be on the top right, otherwise it will be in the original sidebar position.

Link to comment
Share on other sites

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.