Autor wpisu: Athlan, dodany: 06.12.2010 16:17, tagi: xhtml, internet
Ostatnimi czasy tworząc projekty coraz częściej zwracam uwagę na usability, poprawiając przy tym grafików. Dziś krótko, bo o tym, jak dostosować nagłówki <meta>, aby jak najlepiej były przeklejane do okienka udostępniania linków na Facebook’u.
Czasem cennymi danymi są te, które widzi Google oraz użytkownik (meta description i bezpośrednio w pasku przeglądarki title), czasem zależy nam na dostosowaniu prezentacji danych agregatorów, w naszym przypadku Facebook’a, aby użytkownik wklejając linka nie musiał się dodatkowo w nic angażować.
- Wykryj, czy odwiedza Cię Facebook
if(preg_match('/^facebookexternalhit/', $_SERVER['HTTP_USER_AGENT']))
- Dostosuj swój meta description. Pamiętaj, że Facebook ucina spore części tekstów, dlatego sprecyzuj najbardziej chwytliwe fragmenty contentu, które mogą przyciągnąć użytkownika. Dodatkowo możesz zmodyfikować title dodając do niego dziwne znaczki (encje), które na pewno przyciągną wzrok.
- Przygotuj odpowiedni obraz o odpowiedniej rozdzielczości, a następnie zaserwuj go w tagu:
<link rel="image_src" href=" ... " />
Gdy tego nie zrobisz, użytkownik, który przekleja linka będzie sam musiał zdecydować o obrazie, który zostanie mu zaproponowany z puli dostępnych na stronie. Ta praktyka na szczęście jest często wykorzystywana przez programistów, wydaje się być trywialna. - Jeżeli chcesz wyeksponować ramkę Facebook’a na swoją stronę www, ustaw transparentność na iframe. Wbuduj ją w diva i nie zapominaj o możliwościach CSS takich jak position: absolute; position: relative; top: -1px; left: -1px; overflow: hidden; aby ukryć czasem kłopotliwe obramowanie iframe’a.
Efekt? Sprawdź sam na Nowiny365.pl.