Skip to content

Instantly share code, notes, and snippets.

@maier-stefan

maier-stefan/facebook_screenshot_template_mobile_feed_standard_single_video.html.erb

Last active September 22, 2022 17:46
Show Gist options
  • Save maier-stefan/d90ae7978f6ea7fd1da2f081c02a3228 to your computer and use it in GitHub Desktop.
Save maier-stefan/d90ae7978f6ea7fd1da2f081c02a3228 to your computer and use it in GitHub Desktop.
Download ZIP
Facebook Ad template rendering for single image and video
Raw
facebook_screenshot_template_mobile_feed_standard_single_video.html.erb
<html>
<head>
<style>
.container {
width: 320px;
display: flex;
flex-direction: column;
}
.header {
height: 40px;
display: flex;
flex-direction: row;
margin-bottom: 12px;
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
}
.header div:last-child {
margin-left: auto;
}
#brand-icon {
width: 40px;
height: 40px;
}
#brand-name {
line-height: 17px;
padding-top: 5px;
color: rgb(28, 30, 33);
font: 700 15px sans-serif;
padding-left: 10px;
}
#sponsor {
padding-left: 10px;
color: rgb(144, 148, 156);
font: 12px sans-serif;
line-height: 16px;
display: flex;
display: row;
}
#sponsor-icon {
height: 11px;
width: 10px;
padding-top: 2px;
padding-left: 5px;
}
#header-icons {
display: flex;
flex-direction: row;
}
#image-container {
height: 320px;
position: relative;
}
#primary-text {
padding-left: 10px;
padding-right: 10px;
font: 14px sans-serif;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
}
#cta-block {
height: 60px;
overflow: hidden;
padding: 12px;
display: flex;
background: rgb(247, 248, 250);
border-bottom: rgb(199, 200, 203) solid 1px;
}
#cta-block-left {
width: 180px;
}
#cta-block-right {
align-self: center;
height: 36px;
border-radius: 5px;
background: rgb(228, 230, 235);
margin-left: 20px;
width: 105px;
}
#cta-block-right span {
padding: 8px;
display: block;
max-width: 100%;
word-break: break-word;
color: rgb(5, 5, 5);
text-align: left;
line-height: 20px;
font-size: 15px;
font-weight: 600;
font-family: sans-serif;
}
#display-url {
font: 13px sans-serif;
color: #1c1e21;
direction: ltr;
-webkit-font-smoothing: subpixel-antialiased;
pointer-events: none;
text-align: left;
word-wrap: break-word;
display: block;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-transform: lowercase;
line-height: 16px;
}
#headline {
font: 700 15px sans-serif;
line-height: 20px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
overflow: hidden;
}
#description {
padding-top: 15px;
font: 13px sans-serif;
line-height: 16px;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
overflow: hidden;
}
#play-icon-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#play-icon {
block-size: 67.9972px;
cursor: pointer;
height: 67.9972px;
inline-size: 67.9972px;
perspective-origin: 33.9986px 33.9986px;
text-align: center;
transform-origin: 33.9986px 33.9986px;
user-select: none;
width: 67.9972px;
}
#share-icon {
background-position: 0px -174px;
block-size: 17.9972px;
border-block-end-color: rgb(255, 255, 255);
border-block-start-color: rgb(255, 255, 255);
border-inline-end-color: rgb(255, 255, 255);
border-inline-start-color: rgb(255, 255, 255);
caret-color: rgb(255, 255, 255);
color: rgb(255, 255, 255);
column-rule-color: rgb(255, 255, 255);
display: inline-block;
height: 17.9972px;
inline-size: 17.9972px;
perspective-origin: 8.99858px 8.99858px;
pointer-events: none;
text-align: left;
text-decoration: none solid rgb(255, 255, 255);
text-emphasis-color: rgb(255, 255, 255);
transform-origin: 8.99858px 8.99858px;
user-select: none;
width: 17.9972px;
background: rgba(0, 0, 0, 0) url("https://static.xx.fbcdn.net/rsrc.php/v3/yC/r/wdjMXy7QpPG.png") no-repeat scroll 0px -174px / 28px 338px padding-box border-box;
border: 0px none rgb(255, 255, 255);
font: italic 600 12px sans-serif;
outline: rgb(255, 255, 255) none 0px;
}
#comment-icon {
background-position: 0px -117px;
block-size: 17.9972px;
border-block-end-color: rgb(255, 255, 255);
border-block-start-color: rgb(255, 255, 255);
border-inline-end-color: rgb(255, 255, 255);
border-inline-start-color: rgb(255, 255, 255);
caret-color: rgb(255, 255, 255);
color: rgb(255, 255, 255);
column-rule-color: rgb(255, 255, 255);
display: inline-block;
height: 17.9972px;
inline-size: 17.9972px;
perspective-origin: 8.99858px 8.99858px;
pointer-events: none;
text-align: left;
text-decoration: none solid rgb(255, 255, 255);
text-emphasis-color: rgb(255, 255, 255);
transform-origin: 8.99858px 8.99858px;
user-select: none;
width: 17.9972px;
background: rgba(0, 0, 0, 0) url("https://static.xx.fbcdn.net/rsrc.php/v3/yC/r/wdjMXy7QpPG.png") no-repeat scroll 0px -117px / 28px 338px padding-box border-box;
border: 0px none rgb(255, 255, 255);
font: italic 600 12px sans-serif;
outline: rgb(255, 255, 255) none 0px;
}
#like-icon {
background-position: 0px -136px;
block-size: 17.9972px;
border-block-end-color: rgb(255, 255, 255);
border-block-start-color: rgb(255, 255, 255);
border-inline-end-color: rgb(255, 255, 255);
border-inline-start-color: rgb(255, 255, 255);
caret-color: rgb(255, 255, 255);
color: rgb(255, 255, 255);
column-rule-color: rgb(255, 255, 255);
display: inline-block;
height: 17.9972px;
inline-size: 17.9972px;
perspective-origin: 8.99858px 8.99858px;
pointer-events: none;
text-align: left;
text-decoration: none solid rgb(255, 255, 255);
text-emphasis-color: rgb(255, 255, 255);
transform-origin: 8.99858px 8.99858px;
user-select: none;
width: 17.9972px;
background: rgba(0, 0, 0, 0) url("https://static.xx.fbcdn.net/rsrc.php/v3/yC/r/wdjMXy7QpPG.png") no-repeat scroll 0px -136px / 28px 338px padding-box border-box;
border: 0px none rgb(255, 255, 255);
font: italic 600 12px sans-serif;
outline: rgb(255, 255, 255) none 0px;
}
#dots-icon {
align-self: center;
height: 23.9986px;
inline-size: 23.9986px;
width: 23.9986px;
background: rgba(0, 0, 0, 0) url("https://static.xx.fbcdn.net/rsrc.php/v3/yW/r/TqeN2xdWl9A.png") no-repeat scroll 0px -98px / 73px 289px padding-box border-box;
}
#x-icon {
align-self: center;
height: 20px;
inline-size: 20px;
width: 20px;
background: rgba(0, 0, 0, 0) url("https://static.xx.fbcdn.net/rsrc.php/v3/yW/r/TqeN2xdWl9A.png") no-repeat scroll -21px -123px / 73px 289px padding-box border-box;
margin: 0px 0px 0px 16px;
}
#seperator {
color: #1c1e21;
direction: ltr;
line-height: 1.34;
font-size: 12px;
-webkit-font-smoothing: subpixel-antialiased;
border-spacing: 0;
pointer-events: none;
text-align: left;
height: 1px;
margin-left: auto;
margin-right: auto;
width: 300px;
background-color: rgb(201, 204, 209);
font-family: inherit;
}
#footer {
padding-top: 20px;
}
#footer-actions {
padding-top: 8px;
display: flex;
flex-direction: row;
justify-content: space-between;
color: #616770;
font-weight: 600;
font-size: 12px;
line-height: 16px;
font-family: sans-serif;
}
#footer div {
align-self: center;
}
#footer-actions>div {
display: flex;
padding-left: 20px;
padding-right: 20px;
}
#footer-actions i {
align-self: center;
padding-right: 5px;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<div>
<img id="brand-icon"
src="<%= brand_icon %>"
alt="<%= brand_name %> Icon" />
</div>
<div>
<div id="brand-name"><%= brand_name %></div>
<div id="sponsor">
<div>Sponsored</div>
<img id="sponsor-icon" src="https://www.facebook.com/images/mobile/privacy/wordmark/everyone.png" alt="" />
</div>
</div>
<div id="header-icons">
<i id="dots-icon"></i>
<i id="x-icon"></i>
</div>
</div>
<div id="primary-text">
<%= primary_text %>
</div>
<div id="image-container">
<img height="320" src="<%= image_url%>" width="320" alt="" />
<div id="play-icon-container">
<img id="play-icon" src="https://www.facebook.com/images/mobile/angora/playButton.png" />
</div>
</div>
<div id="cta-block">
<div id="cta-block-left">
<div id="display-url"><%= display_url %></div>
<div id="headline"><%= headline %></div>
<div id="description"><%= description %></div>
</div>
<div id="cta-block-right">
<span><%= call_to_action %></span>
</div>
</div>
<div id="footer">
<div id="seperator"></div>
<div id="footer-actions">
<div>
<i id="like-icon"></i>
<div>
Like
</div>
</div>
<div>
<i id="comment-icon"></i>
<div>
Comment
</div>
</div>
<div>
<i id="share-icon"></i>
<div>
Share
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment