Mam dwa pytanka o okienko fb i opacity na okienku

Mam dwa pytanka do was pierwsze brzmi czy da się usunąć opacity ze w oknie jest a poza nim już nie ?

drugie to czy dobry kod podałem do okna i czy działa może ktoś na hostingu swoim sprawdzić? link do tej strony co generowałem kod https://developers.facebook.com/docs/plugins/page-plugin

html

<!DOCTYPE HTML>
<html lang="pl">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
     
    <title>stronawww</title>
     
    <meta name="description" content="Serwery minecraft tworzone z jakością" />
    <meta name="keywords" content="gry, minecraft, skyblock, minigry, EasyHc" />
     
    <link href="style.css" rel="stylesheet" type="text/css"/>
     
</head>
 
<body>

<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/pl_PL/sdk.js#xfbml=1&version=v2.7";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

    <div class="wrapper">
        <nav class="nav">
         
                <ol>
                    <li><a href="#">Sklep SMS</a></li>
                    <li><a href="#">Forum</a></li>
                    <li><a href="#">Serwery</a></li>
                    <li><a href="#">Launcher</a></li>
                    <li><a href="#">Regulamin</a></li>
                </ol>
         
        </nav>
        </div>
         
    <div class="content">
         
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mollis, odio ac posuere tempus, nisi orci luctus ipsum, sit amet pharetra ipsum erat ut nulla. Aliquam scelerisque magna a dui volutpat, sit amet condimentum lacus pretium. Quisque viverra odio orci, sit amet aliquet turpis finibus sit amet. Nullam ut hendrerit est. Aenean sed varius nunc, in convallis ipsum. Nunc eget justo vulputate, volutpat nisi at, elementum est. Sed quis rutrum elit. Morbi nec eleifend ante, vitae consequat felis. Etiam interdum nibh at lorem fringilla, sit amet pellentesque ligula lobortis. Fusce commodo, sapien non blandit pretium, libero enim efficitur leo, sed auctor sem ex at metus. In feugiat nisi ut orci tristique malesuada. Maecenas pellentesque sem finibus rutrum aliquam. Maecenas non odio tristique, eleifend ante ut, mattis justo. Proin a sem posuere ex lacinia ornare. Nullam auctor sit amet sapien at vestibulum.</p>
         
        <p>Aenean in metus vulputate mauris finibus venenatis. Duis posuere molestie massa, at ultricies turpis. Mauris rhoncus, mi sit amet mattis maximus, felis metus ultricies lorem, nec pharetra arcu nibh eget erat. Aliquam dictum semper commodo. Fusce aliquet eros est, at interdum nunc finibus eu. Praesent sodales dolor quis dolor ullamcorper, nec vulputate velit lobortis. Duis luctus velit ut congue condimentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam congue volutpat sodales.</p>
        Morbi quis lectus venenatis, dictum libero eget, finibus tellus. Duis nec vestibulum velit, at iaculis nisl. Aenean sed ante finibus, ultricies dolor eget, vestibulum diam. Fusce congue ultricies justo eget rutrum. Praesent quis fringilla justo. Quisque efficitur ligula non elit facilisis, quis sollicitudin nibh mattis. Nam dapibus ligula tincidunt velit varius, sit amet consectetur odio condimentum. Duis vitae libero quam. Sed eu dui vel augue lobortis scelerisque ut semper lacus. Donec sit amet arcu vestibulum, varius quam a, fringilla eros. Mauris at nisl arcu. Proin gravida malesuada augue vitae blandit. Duis elementum est vel mi tempor convallis.</p>
 
        <p>Ut eget nisl odio. Proin non hendrerit magna. Nam sagittis, augue eu maximus lobortis, urna nibh accumsan est, sit amet condimentum augue libero sit amet nibh. Sed sit amet ex sit amet risus accumsan vehicula nec ut odio. Etiam vel dictum dui. Praesent aliquet, diam a interdum faucibus, turpis eros tincidunt est, eu consectetur nibh est a ex. Fusce hendrerit sodales est nec fringilla. Praesent imperdiet ex ante, in finibus odio imperdiet luctus.</p>
 
 
 
 
 
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mollis, odio ac posuere tempus, nisi orci luctus ipsum, sit amet pharetra ipsum erat ut nulla. Aliquam scelerisque magna a dui volutpat, sit amet condimentum lacus pretium. Quisque viverra odio orci, sit amet aliquet turpis finibus sit amet. Nullam ut hendrerit est. Aenean sed varius nunc, in convallis ipsum. Nunc eget justo vulputate, volutpat nisi at, elementum est. Sed quis rutrum elit. Morbi nec eleifend ante, vitae consequat felis. Etiam interdum nibh at lorem fringilla, sit amet pellentesque ligula lobortis. Fusce commodo, sapien non blandit pretium, libero enim efficitur leo, sed auctor sem ex at metus. In feugiat nisi ut orci tristique malesuada. Maecenas pellentesque sem finibus rutrum aliquam. Maecenas non odio tristique, eleifend ante ut, mattis justo. Proin a sem posuere ex lacinia ornare. Nullam auctor sit amet sapien at vestibulum.</p>
         
        <p>Aenean in metus vulputate mauris finibus venenatis. Duis posuere molestie massa, at ultricies turpis. Mauris rhoncus, mi sit amet mattis maximus, felis metus ultricies lorem, nec pharetra arcu nibh eget erat. Aliquam dictum semper commodo. Fusce aliquet eros est, at interdum nunc finibus eu. Praesent sodales dolor quis dolor ullamcorper, nec vulputate velit lobortis. Duis luctus velit ut congue condimentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam congue volutpat sodales.</p>
        Morbi quis lectus venenatis, dictum libero eget, finibus tellus. Duis nec vestibulum velit, at iaculis nisl. Aenean sed ante finibus, ultricies dolor eget, vestibulum diam. Fusce congue ultricies justo eget rutrum. Praesent quis fringilla justo. Quisque efficitur ligula non elit facilisis, quis sollicitudin nibh mattis. Nam dapibus ligula tincidunt velit varius, sit amet consectetur odio condimentum. Duis vitae libero quam. Sed eu dui vel augue lobortis scelerisque ut semper lacus. Donec sit amet arcu vestibulum, varius quam a, fringilla eros. Mauris at nisl arcu. Proin gravida malesuada augue vitae blandit. Duis elementum est vel mi tempor convallis.</p>
 
        <p>Ut eget nisl odio. Proin non hendrerit magna. Nam sagittis, augue eu maximus lobortis, urna nibh accumsan est, sit amet condimentum augue libero sit amet nibh. Sed sit amet ex sit amet risus accumsan vehicula nec ut odio. Etiam vel dictum dui. Praesent aliquet, diam a interdum faucibus, turpis eros tincidunt est, eu consectetur nibh est a ex. Fusce hendrerit sodales est nec fringilla. Praesent imperdiet ex ante, in finibus odio imperdiet luctus.</p>
                
                
                </div>
            </div>
        </div>
    </div>

<section>
  <div class="contact"> 
    <div class="title">Kontakt</div>
                    <p>TEL: 000 000 000</p>
                    <p>coś tu będzie</p>
  </div>
  <div class="pay"> 
    <div class="title">Płatności</div>
    <div class="paycont">
      <p>Płatności obsługuje:</p>
      <p>Homepay Sp. z o.o.</p>
      <p>ul. Grzybowska 87</p>
      <p>00-844 Warszawa</p>
      
            <div class="Formularz"><a href="https://ssl.homepay.pl/reklamacje/">Formularz Reklamacyjny</a></div>
    </div>
  </div>
  <div class="fb"> 
    <div class="title">Fanpage na Facebooku</div>
    <div class="fb-page" data-href="https://www.facebook.com/facebook" data-width="300" data-height="200" data-small-header="true" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="false"><blockquote cite="https://www.facebook.com/facebook" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/facebook">Facebook</a></blockquote></div>
  </div>
</section>
<footer>Zakaz naruszania stopki © - wszelkie prawa zastrzezone 2016</footer>

css

body
{
    color: #ffffff;
    background: url('img/tło1.jpg');
    background-size: cover;
    margin: 0 !important;
	//background: url('img/tło1.jpg');
    //background-size: 100px 100px;
	//background-repeat:no-repeat;
	//background-position;
	background-attachment: fixed;   //daje ze tło jest nieruchome
}
 
.wrapper
{
    width: 100%;
}
.nav
{
    line-height: 40px;
    width: 100%;
    background-color: #ffffff;
    text-align: center;
    border-top: 1px solid #751b1b;
    border-bottom: 1px solid #751b1b;
    opacity: 0.3;
}
 
ol
{
    padding: 0px;
    margin: 0;
    list-style-type: none;
    font-size: 18px;
    height: 40px;
}
ol a 
{
    color: #451717;
    text-decoration: none;
    display: block;
    line-height: 40px;
}
ol > li
{
    float: left;
    width: 150px;
    height: 40px;
}
ol > li:hover
{
    background-color: #cf6969;
}
 
.content
{
    width: 1000px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
    padding-top: 10px;
}




section {
  background: #444;
  width: 1000px;
  height: 150px;
  display: flex;
  margin: 0 auto;
  opacity: 0.6;
  line-height: 5px;
  padding: 10px;
}
section .contact,
section .pay,
section .fb {
  flex: 1;
  padding: 10px 20px;
}
section .contact .title,
section .pay .title,
section .fb .title {
  color: #fff;
  padding-bottom: 10px;
  border-bottom: 1px solid #fff;
}
section .fb {
  flex: 2;
}
section .contact {
}
section .pay {
}
footer {
  color: #fff;
  text-align: center;
  padding: 5px 0;
  opacity: 0.8;
}




.Formularz
{
	padding-top: 10px;
	font-size: 15px;
}
.Formularz a
{
    text-decoration: none;
	color: #FF0033;
}
.Formularz a:hover
{
	color: #FF3366;
}

Zaczynamy debugowanie!

A) HTML

1. meta tag "keywords" nic nie wnosi, roboty google już po nim nie wyszukują, za to brakuje meta tag'ów od FaceBook'a które są przez niego wymagane

2. JS inline code proszę na dole strony jak w body by nie obciążać strony na początku, albo w sekcji <head> bo u Ciebie jest on... w środku - polecam artykuł

3. Jeżeli zamierzasz i tak wyświetlać listę inline, to nie kłopocz się listą uprządkowaną, tylko zamiast <ol> daj <ul>

4. Nie ustalaj nowych div jako header - html proponuje Ci całą gamę h(1-n) :)

5. Linie 63-65 do wyrzucenia, junk

6. W programowaniu web używamy języka angielskiego do nazewnictwa bądź komentarzy - drobny pedantyzm, wybacz

7. Nie wiem czy po prostu nie wkleiłeś całego kodu, czy zapomniałeś, ale zwracam uwagę na brak znaczników zamykających </body> i </html>

B) CSS

1. Kochanie ty moje, komentarze w CSS ustawia się następująco: "/* some comment */"

2. Zdecyduj się jak umiejscawiasz klamry od funkcji, by ułatwić czytanie kodu (tak, nawet jak jest skopiowany trzeba zachowywać pozory i dbać o reputację)

3. Znaczniki "!important" są mocno niezalecane zwłaszcza dla początkujących, ponieważ potrafią wyczyniać różne dziwne rzeczy z kodem więc odradzam używanie. Postarał bym się pobawić z background img na twoim miejscu.

4. Pozbywając się ">" w "ol > li" nic się nie stanie, a zaoszczędzisz czas i kilka bitów ;)

C) JavaScript

1. Masz bardzo pięknie wygenerowany ten skrypcik od facebooka, ale niestety nigdzie go nie wywołałeś ;)

**EDIT**

I. Co to są meta tagi - link

II. Jak facebook proponuje je wykorzystać - link

A tu masz przykładzik:

<!------------FACEBOOK------------>
<meta property="og:url"              content="http://www.path.to/your/website.html" />
<meta property="og:type"           content="article" />
<meta property="og:title"            content="Title of sharing article" />
<meta property="og:description" content="Some words in sharing article description" />
<meta property="og:image"         content="path.to/the/image.jpg" />

III. Jak chcesz pop-up'a to chociaż nad nim panuj ;) tu masz przykład z działającym JS'em i dokumentacją do przekształcenia

HTML:

<div class="socials">
	<a href="https://twitter.com/" class="fa fa-twitter"></a>
							
	<a href="https://www.facebook.com/" class="fa fa-facebook"></a>
							
	<a href="https://www.google.com/" class="fa fa-google-plus"></a>
							
	<a href="https://www.linkedin.com/" class="fa fa-linked-in"></a>
</div>

JS:

$(document).ready(function()  //when the document is ready load the function
{
	$('.socials .fa').click(function(event) //when the object with both classes "fa" and "socials" is clicked
	{ 
		event.preventDefault(); //don't follow the fucking URL as normal link! ;)
		window.open(this.href, "popupWindow", "width=600,height=600,scrollbars=yes"); //create pop up 600x600 with href of the link
	});
});

Tutaj - masz codepen'a z większością poprawek na które miałem czas. Nie widzi Twojej ikonki facebookowej

Mam nadzieję że pomogłem i będziesz w stanie sklecić coś na podstawie moich chaotycznych tłumaczeń.

Pozdrawiam

Jakub Stefko