Blog

Jak vložit Facebook reference na svůj web

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/wp-content/uploads/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

Andrea Zatloukalová
Andrea Zatloukalová
13. srpna 2019

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

Renata Kulichová
Renata Kulichová
15. června 2019

Doporučuji místo sledování televize! V každém videu si najdete něco přínosného. Nejvíc mě baví forma, která je zábavná, velmi osobitá a přesto hodnotná. Široký záběr znalostí, jasný pohled na věc, žádné kecy a omáčky, kterých jsou dnes na internetu mraky od pseudo-odborníků zahlcujíc vás spamy s neodolatelnou nabídkou a nudnými webináři. Za mě je ZSF prostě super práce!

Richard Kastner
Richard Kastner
17. dubna 2019

Ahoj Filipe, i když se říká, komu se platí není potřeba děkovat.

Přesto moc děkuji za včerejší kritiku webu. Na webu stále pracují a tento krok byl pro mě přínosem, kam to více zacílit. Určitě po úpravách zažádám o další kopanec tím správným směrem.