Přišel mi zajímavý dotaz od Martina R., který se ptá, jak to je s právy a přebíráním referencí z firemní Facebook stránky a prezentací těchto komentářů na vlastním webu.
Mohlo by se zdát, že nejsnadnější cestou je komentáře oskenovat a vložit je jako obrázek do webu, nebo prostě zkopírovat text a přidat jméno fanouška.
Tou nejčistší variantou, která nekoliduje s žádným porušením Facebook práv je tzv. “embeddování“, které je možné pouze v případě, že u svého komentáře fanoušek nenastavil nějakou úroveň soukromí.
1. způsob: Postup pro embeddování Facebook příspěvků (referencí)
První postup, který vám ukážu je uživatelsky nenáročný na programování a zvládne ho každý s minimem znalostí kódu. Nevýhodou je, že takto vložená reference začne zpomalovat načítání web stránky.
Pokud má uživatel nastaveno veřejné použití na svém příspěvku, lze jej embeddovat.
Zkopírujete tento iframe kód a vložíte na svůj web.
Zde je přímo odkaz, kde lze embedovat i jiné příspěvky přímo vložením odkazu na příspěvek: http://bit.ly/fb-embedded
2. způsob: Jak vložit Facebook referenci v HTML a CSS kódu?
Druhý způsob je odlehčený a díky tomu není náročný na načítání webové stránky. Ukážu vám expertní řešení v prostředí HTML a CSS kódování. Je zde nutná nějaká znalost HTML a CSS, ale stojí to za to.
Po několika pokusech optimalizovat a napodobit vzhled okénka s Facebook referencí jsem vytvořil HTML a CSS tak, že vše vypadá stejně. Výhodou je, že díky této technice ušetříte až 1 sekundu načítání stránky, kterou by Facebook API způsobila vašemu webu.
Legenda k HTML části:
XXXlink – Odkaz na Fb příspěvek, výskyt 3x, např. https://www.facebook.com/andrea.zatloukalova.9/posts/2339417776178959
XXXname – Jméno referujícího, výskyt 3x, např. Andrea Zatloukalová.
XXXimg – Malá čtvercová fotka 50x50px referující osoby, výskyt 1x.
XXXdate1 – Delší datum příspěvku, např. Úterý 13. srpna 2019 v 13:03.
XXXdate2 – Kratší datum příspěvku, např. 13. srpna 2019
XXXtext – Text hodnocení, např. Zavolala jsem Filipovi, abych jej oslovila ohledně lektorování v rámci jednoho projektu. Nakonec z toho byl cca hodinový hovor, kdy jsme prokonzultovali pro a proti plánovaného projektu a vnesl do něj velmi zajímavé postřehy. Věřím, že navážeme nadále spolupráci a dostaneme se k tomu lektorování v rámci projektu, který čeká na schválení:-) Díky moc Andrea Z.
HTML:
<div class=”fb-main”>
<a href=”XXXlink” title=”XXXname” class=”fb-person” target=”_blank”>
<img class=”fb-person-img” src=”XXXimg” alt=”XXXname“>
</a>
<div class=”fb-icon”><span><a href=”XXXlink” target=”_blank”><i class=”fb-icon-app”></i></a></span></div>
<div class=”fb-person-name-in”>
<div class=”fb-person-name-vert”>
<div class=”fb-person-name-typo”>XXXname</div><a href=” XXXlink” target=”_blank” class=”fb-abb”><abbr title=”XXXdata1“><span class=”fb-datum”>XXXdata2</span></abbr></a></div>
</div>
<div class=”fb-message-style”>
<p>XXXtext</p>
</div>
</div>
CSS:
.fb-main {
padding: 12px 12px 0;
border: 1px solid #dddfe2;
font-size: 12px;
line-height: 16px;
}
.fb-person {
margin-right: 8px;
float: left;
}
.fb-person-img {
display: block;
}
.fb-icon {
float: right;
}
.fb-icon-app {
width: 24px;
height: 24px;
background-position: 0 0;
background-image: url(https://iform.cz/wp-content/uploads/2019/12/facebook-import.svg);
background-size: auto;
background-repeat: no-repeat;
display: inline-block;
}
.fb-person-name-in {
display: inline-block;
}
.fb-person-name-vert {
vertical-align: middle;
display: inline-block;
}
.fb-person-name-typo {
font-weight: 600;
font-size: 14px;
margin-top:6px;
line-height: 18px;
letter-spacing: .15px;
}
.fb-person-name-typo a {
cursor: pointer;
color: #90949c;
text-decoration: none;
}
.fb-person-name-typo a:hover {
text-decoration:underline;
}
.fb-datum {
color: #90949c;
text-decoration:none;
}
.fb-message-style {
margin-top: 6px;
font-size: 14px;
font-weight: normal;
line-height: 1.38;
}
.fb-message-style p {
margin: 6px 0;
}
abbr[title], dfn[title], acronym {
border-bottom: none;
cursor: pointer;
}
fb-abb {
color: #90949c;
}
Ukázka HTML kódu:
<div class=”fb-main”>
<a href=”https://www.facebook.com/andrea.zatloukalova.9/posts/2339417776178959” title=”Andrea Zatloukalová” class=”fb-person” target=”_blank”>
<img class=”fb-person-img” src=”https://zsf.cz/obrazek/2019/12/andrea-zatloukalova.jpg” alt=”Andrea Zatloukalová“>
</a>
<div class=”fb-icon”><span><a href=”https://www.facebook.com/andrea.zatloukalova.9/posts/2339417776178959” target=”_blank”><i class=”fb-icon-app”></i></a></span></div>
<div class=”fb-person-name-in”>
<div class=”fb-person-name-vert”>
<div class=”fb-person-name-typo”>Andrea Zatloukalová</div><a href=”https://www.facebook.com/andrea.zatloukalova.9/posts/2339417776178959” target=”_blank” class=”fb-abb”><abbr title=”Úterý 13. srpna 2019 v 13:03“><span class=”fb-datum”>13. srpna 2019</span></abbr></a></div>
</div>
<div class=”fb-message-style”>
<p>Zavolala jsem Filipovi, abych jej oslovila ohledně lektorování v rámci jednoho projektu. Nakonec z toho byl cca hodinový hovor, kdy jsme prokonzultovali pro a proti plánovaného projektu a vnesl do něj velmi zajímavé postřehy. Věřím, že navážeme nadále spolupráci a dostaneme se k tomu lektorování v rámci projektu, který čeká na schválení:-) Díky moc Andrea Z</p>
</div>
</div>
Výsledné reference z Facebooku předělané do HTML a CSS
