Как да вградим Twitter в iframe

Въведение

Twitter предлага вградени уиджети, които се зареждат чрез JavaScript и създават iframe в страницата ви. Пряко вграждане на Twitter страница в iframe е блокирано от защитните политики, затова уиджетите се създават от вашия акаунт и се вграждат като скрипт.

Какво е iframe

Елементът <iframe> в HTML позволява да включите съдържание от друг уеб сайт в текущата страница. Той създава отделен контекст, който се зарежда независимо от основната страница.

Уиджети на Twitter

Twitter предоставя няколко вида уиджети, контролирани от самата платформа: лента на потребител, любими, списък и търсене. Уиджетите се създават от вашия профил, след което Twitter генерира JavaScript код, който вмъквате в уеб сайта. Самото съдържание се хоства на Twitter и се показва в iframe.

Създаване на уиджет

1. Влезте в профила си в Twitter.
2. Кликнете върху иконата със зъбно колело и изберете Settings (Настройки).
3. От лявото меню изберете Widgets (Уиджети) и натиснете Create new (Създай нов).
4. Изберете тип – User timeline, Favorites, List или Search.
5. Попълнете необходимите данни (потребителско име, име на списъка или хаштаг) и натиснете Create widget.
6. Twitter ще генерира код, който копирате и поставяте в HTML на вашия сайт.

Вграждане на уиджета

Кодът, предоставен от Twitter, съдържа скрипт, който автоматично създава iframe с уиджета. Поставете целия код в желаното място на вашата страница – например в <div> или директно в тялото на документа.

Вграждане на отделен туит

За да вградите конкретен туит:

1. Отворете профила, където се намира туитът.
2. Посочете туита, задръжте курсора над него и кликнете върху трите точки More.
3. Изберете Embed Tweet. Появява се прозорец с HTML код.
4. Копирайте кода и го поставете в сайта си – туитът ще се покаже в собствен iframe.

Най-чести въпроси

• Мога ли да вграждам целия профил? Не – Twitter блокира директно вграждане на целия профил. Използвайте уиджет за лента или списък.
• Как да променя стила? В уиджет настройките можете да зададете ширина, височина, тема (тъмна/светла) и цветове.
• Работи ли на мобилни устройства? Да – уиджетите са responsive и се адаптират към различни екрани.