2022-05-14 00:37:40 +02:00
<!DOCTYPE html>
< html class = "" >
< head >
< meta charset = "utf-8" >
< title > Post Widget< / title >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< meta property = "description" content = "You can embed messages from public groups and channels anywhere. Here’ >
< meta property = "og:title" content = "Post Widget" >
< meta property = "og:image" content = "https://blogfork.telegram.org/file/811140747/166d/MNEJA3BlETo.107862/6fe98d36f382b03091" >
< meta property = "og:description" content = "You can embed messages from public groups and channels anywhere. Here’ >
< link rel = "icon" type = "image/svg+xml" href = "/img/website_icon.svg?4" >
< link rel = "apple-touch-icon" sizes = "180x180" href = "/img/apple-touch-icon.png" >
< link rel = "icon" type = "image/png" sizes = "32x32" href = "/img/favicon-32x32.png" >
< link rel = "icon" type = "image/png" sizes = "16x16" href = "/img/favicon-16x16.png" >
< link rel = "alternate icon" href = "/img/favicon.ico" type = "image/x-icon" / >
< link href = "/css/bootstrap.min.css?3" rel = "stylesheet" >
< link href = "/css/bootstrap-extra.css?2" rel = "stylesheet" >
< link href = "/css/core-widgets.css?1" rel = "stylesheet" >
2022-09-13 18:10:01 +02:00
< link href = "/css/telegram.css?232" rel = "stylesheet" media = "screen" >
2022-05-14 00:37:40 +02:00
< style >
< / style >
< / head >
< body class = "preload" >
< div class = "dev_page_wrap" >
< div class = "dev_page_head navbar navbar-static-top navbar-tg" >
< div class = "navbar-inner" >
< div class = "container clearfix" >
< ul class = "nav navbar-nav navbar-right hidden-xs" > < li class = "navbar-twitter" > < a href = "https://twitter.com/telegram" target = "_blank" data-track = "Follow/Twitter" onclick = "trackDlClick(this, event)" > < i class = "icon icon-twitter" > < / i > < span > Twitter< / span > < / a > < / li > < / ul >
< ul class = "nav navbar-nav" >
< li > < a href = "//telegram.org/" > Home< / a > < / li >
< li class = "hidden-xs" > < a href = "//telegram.org/faq" > FAQ< / a > < / li >
< li class = "hidden-xs" > < a href = "//telegram.org/apps" > Apps< / a > < / li >
< li class = "" > < a href = "/api" > API< / a > < / li >
< li class = "" > < a href = "/mtproto" > Protocol< / a > < / li >
< li class = "" > < a href = "/schema" > Schema< / a > < / li >
< / ul >
< / div >
< / div >
< / div >
< div class = "container clearfix" >
< div class = "dev_page" >
< div id = "dev_page_content_wrap" class = " " >
< div class = "dev_page_bread_crumbs" > < ul class = "breadcrumb clearfix" > < li > < a href = "/widgets" > Widgets< / a > < / li > < i class = "icon icon-breadcrumb-divider" > < / i > < li > < a href = "/widgets/post" > Post Widget< / a > < / li > < / ul > < / div >
< h1 id = "dev_page_title" > Post Widget< / h1 >
< div id = "dev_page_content" > < p > You can < strong > embed messages from public groups and channels< / strong > anywhere. Here’ < / p >
< div > < br >
< script async src = "https://telegram.org/js/telegram-widget.js?1" data-telegram-post = "durov/68" data-width = "100%" > < / script >
< br > < br >
< / div >
< p > To get the HTML-code for embedding a message, just < strong > open its t.me link< / strong > (e.g., < a href = "https://t.me/durov/43" > t.me/durov/43< / a > ) in a web browser and click < strong > < > EMBED< / strong > :< / p >
< div class = "blog_image_wrap" >
< a href = "/file/811140747/166d/MNEJA3BlETo.107862/6fe98d36f382b03091" target = "_blank" > < img src = "/file/811140747/166d/MNEJA3BlETo.107862/6fe98d36f382b03091" title = "Login on external website" / > < / a >
< / div >
< h3 > < a class = "anchor" name = "configure-widget" href = "#configure-widget" > < i class = "anchor-icon" > < / i > < / a > Configure widget< / h3 >
< p > You can choose more options using the form below.< / p >
< p > < form class = "form-horizontal form-telegram clearfix" id = "post_widget_config" >
< div class = "form-group" >
< label class = "col-md-3 control-label" > Link to post:< / label >
< div class = "col-md-6" >
< div class = "textfield-item" >
< input id = "post_link" name = "post_link" type = "text" class = "form-control" placeholder = "link to a public post, e.g. https://t.me/telegram/83" >
< div class = "textfield-item-underline" > < / div >
< span class = "textfield-item-error" id = "post_link_error" > < / span >
< / div >
< / div >
< / div >
< div class = "form-group" >
< label class = "col-md-3 control-label" > Width:< / label >
< div class = "col-md-6" >
< div class = "textfield-item" style = "width: 50px;" >
< input id = "width" name = "width" type = "text" class = "form-control" placeholder = "100%" maxlength = "4" >
< div class = "textfield-item-underline" > < / div >
< / div >
< / div >
< / div >
< div class = "form-group" >
< label class = "col-md-3 control-label" > Author Photo:< / label >
< div class = "col-md-6" >
< label class = "radio-item radio-item-block" >
< input type = "radio" class = "radio" name = "author_photo" value = "" checked / >
< span class = "radio-input ripple-handler" > < span class = "ripple-mask" > < span class = "ripple" > < / span > < / span > < span class = "radio-input-icon" > < / span > < / span > < span class = "radio-label" > Auto< / span >
< / label >
< label class = "radio-item radio-item-block" >
< input type = "radio" class = "radio" name = "author_photo" value = "true" / >
< span class = "radio-input ripple-handler" > < span class = "ripple-mask" > < span class = "ripple" > < / span > < / span > < span class = "radio-input-icon" > < / span > < / span > < span class = "radio-label" > Always show< / span >
< / label >
< label class = "radio-item radio-item-block" >
< input type = "radio" class = "radio" name = "author_photo" value = "false" / >
< span class = "radio-input ripple-handler" > < span class = "ripple-mask" > < span class = "ripple" > < / span > < / span > < span class = "radio-input-icon" > < / span > < / span > < span class = "radio-label" > Always hide< / span >
< / label >
< / div >
< / div >
< div class = "form-group" >
< label class = "col-md-3 control-label" > Accent color:< / label >
< div class = "col-md-6" >
< div class = "widget-accent-colors" >
< label class = "widget-accent-color-item" >
< input type = "radio" class = "radio" name = "color" value = "default" checked / >
< div class = "widget-color-circle" > < / div >
< div class = "widget-color-label" > Default< / div >
< / label >
< label class = "widget-accent-color-item" data-color = "13B4C6" data-bg-color = "13C5D9" data-dark-color = "39C4E8" >
< input type = "radio" class = "radio" name = "color" value = "13B4C6" / >
< div class = "widget-color-circle" style = "background-color: #13C5D9;" > < / div >
< div class = "widget-color-label" > Cyan< / div >
< / label >
< label class = "widget-accent-color-item" data-color = "29B127" data-bg-color = "4CB94E" data-dark-color = "72E350" >
< input type = "radio" class = "radio" name = "color" value = "29B127" / >
< div class = "widget-color-circle" style = "background-color: #4CB94E;" > < / div >
< div class = "widget-color-label" > Green< / div >
< / label >
< label class = "widget-accent-color-item" data-color = "CA9C0E" data-bg-color = "E8B824" data-dark-color = "F0B138" >
< input type = "radio" class = "radio" name = "color" value = "CA9C0E" / >
< div class = "widget-color-circle" style = "background-color: #E8B824;" > < / div >
< div class = "widget-color-label" > Yellow< / div >
< / label >
< label class = "widget-accent-color-item" data-color = "E22F38" data-bg-color = "F34750" data-dark-color = "F95C54" >
< input type = "radio" class = "radio" name = "color" value = "E22F38" / >
< div class = "widget-color-circle" style = "background-color: #F34750;" > < / div >
< div class = "widget-color-label" > Red< / div >
< / label >
< label class = "widget-accent-color-item" data-color = "343638" data-bg-color = "343638" data-dark-color = "FFFFFF" data-text = "Black" data-dark-text = "White" >
< input type = "radio" class = "radio" name = "color" value = "343638" / >
< div class = "widget-color-circle" style = "background-color: #343638;" > < / div >
< div class = "widget-color-label" > Black< / div >
< / label >
< label class = "widget-accent-color-item" >
< input type = "radio" class = "radio" name = "color" value = "custom" >
< div class = "widget-color-circle widget-color-circle-custom" style = "color: #F646A4;" > < / div >
< div class = "widget-color-label widget-color-label-custom" > Custom< / div >
< div class = "textfield-item widget-accent-color-field-item" >
< input class = "form-control widget-accent-color-field" name = "customcolor" type = "text" autocomplete = "off" value = "F646A4" maxlength = "6" >
< div class = "textfield-item-underline" > < / div >
< / div >
< / label >
< / div >
< label class = "checkbox-item checkbox-item-block" >
< input type = "checkbox" class = "checkbox" name = "dark" value = "1" / >
< span class = "checkbox-input ripple-handler" > < span class = "ripple-mask" > < span class = "ripple" > < / span > < / span > < span class = "checkbox-input-icon" > < / span > < / span > < span class = "checkbox-label" > Dark theme< / span >
< / label >
< / div >
< / div >
< div class = "form-group" >
< label for = "embed_code" class = "col-md-3 control-label" > Embed Code:< / label >
< div class = "col-md-6" >
< textarea id = "embed_code" class = "form-control embed_code" rows = "5" readonly onclick = "this.select();" > < / textarea >
< / div >
< / div >
< div class = "form-group" >
< div class = "col-md-offset-1 col-md-10" >
< div class = "widget_container row" id = "widget_container" > < / div >
< / div >
< / div >
< / form > < / p >
< / div >
< / div >
< / div >
< / div >
< div class = "footer_wrap" >
< div class = "footer_columns_wrap footer_desktop" >
< div class = "footer_column footer_column_telegram" >
< h5 > Telegram< / h5 >
< div class = "footer_telegram_description" > < / div >
Telegram is a cloud-based mobile and desktop messaging app with a focus on security and speed.
< / div >
< div class = "footer_column" >
< h5 > < a href = "//telegram.org/faq" > About< / a > < / h5 >
< ul >
< li > < a href = "//telegram.org/faq" > FAQ< / a > < / li >
2022-09-09 12:10:24 +02:00
< li > < a href = "//telegram.org/privacy" > Privacy< / a > < / li >
2022-09-09 23:58:59 +02:00
< li > < a href = "//telegram.org/press" > Press< / a > < / li >
2022-05-14 00:37:40 +02:00
< / ul >
< / div >
< div class = "footer_column" >
< h5 > < a href = "//telegram.org/apps#mobile-apps" > Mobile Apps< / a > < / h5 >
< ul >
< li > < a href = "//telegram.org/dl/ios" > iPhone/iPad< / a > < / li >
2022-09-09 23:58:59 +02:00
< li > < a href = "//telegram.org/android" > Android< / a > < / li >
< li > < a href = "//telegram.org/dl/web" > Mobile Web< / a > < / li >
2022-05-14 00:37:40 +02:00
< / ul >
< / div >
< div class = "footer_column" >
< h5 > < a href = "//telegram.org/apps#desktop-apps" > Desktop Apps< / a > < / h5 >
< ul >
< li > < a href = "//desktop.telegram.org/" > PC/Mac/Linux< / a > < / li >
< li > < a href = "//macos.telegram.org/" > macOS< / a > < / li >
< li > < a href = "//telegram.org/dl/web" > Web-browser< / a > < / li >
< / ul >
< / div >
< div class = "footer_column footer_column_platform" >
< h5 > < a href = "/" > Platform< / a > < / h5 >
< ul >
< li > < a href = "/api" > API< / a > < / li >
< li > < a href = "//translations.telegram.org/" > Translations< / a > < / li >
< li > < a href = "//instantview.telegram.org/" > Instant View< / a > < / li >
< / ul >
< / div >
< / div >
< div class = "footer_columns_wrap footer_mobile" >
< div class = "footer_column" >
< h5 > < a href = "//telegram.org/faq" > About< / a > < / h5 >
< / div >
< div class = "footer_column" >
< h5 > < a href = "//telegram.org/blog" > Blog< / a > < / h5 >
< / div >
< div class = "footer_column" >
< h5 > < a href = "//telegram.org/apps" > Apps< / a > < / h5 >
< / div >
< div class = "footer_column" >
< h5 > < a href = "/" > Platform< / a > < / h5 >
< / div >
< div class = "footer_column" >
< h5 > < a href = "https://twitter.com/telegram" target = "_blank" data-track = "Follow/Twitter" onclick = "trackDlClick(this, event)" > Twitter< / a > < / h5 >
< / div >
< / div >
< / div >
< / div >
< script src = "/js/main.js?46" > < / script >
< script src = "/js/jquery.min.js?1" > < / script >
< script src = "/js/jquery-ui.min.js?1" > < / script >
< script src = "/js/bootstrap.min.js?1" > < / script >
< script src = "/js/core-widgets.js?1" > < / script >
< script > P o s t W i d g e t . i n i t ( { " d e f a u l t _ l i n k " : " h t t p s : \ / \ / t . m e \ / t e l e g r a m \ / 8 3 " , " l i n k _ e r r o r " : " I n v a l i d p o s t l i n k " , " w i d g e t _ s c r i p t " : " h t t p s : \ / \ / t e l e g r a m . o r g \ / j s \ / t e l e g r a m - w i d g e t . j s ? 1 9 " } ) ;
backToTopInit("Go up");
removePreloadInit();
< / script >
< / body >
< / html >
