Facebook Preview Component

Component written in VueJs that replicates the facebook ad preview avoiding expensive facebook api calls.

Installation

Package mode

npm i facebook-preview-component

CDN mode

https://unpkg.com/facebook-preview-component@1.0.2/dist/facebook-preview.min.js

Usage

<!--Head-->
<script src=".../facebook-preview.min.js"></script>
<!--Body-->
<facebook-preview></facebook-preview>

let componentEl   = document.getElementsByTagName('facebook-preview')
let props = ''

if (componentEl.length) {
    props = 'title'
    componentEl[0].setAttribute(props, '[title]')
    
    props = 'is_debug'
    componentEl[0].setAttribute(props, '')
}

Props

show_empty (boolean)  ('true','false')
is_debug (boolean) ('true','false')
is_carousel (boolean)  ('true','false')
is_video (boolean)  ('true','false')
is_mobile (boolean) ('true','false')
show_no_images (boolean) ('true','false')
title ('abc')
primary ('abc')
message ('abc')
avatar (url) ('http://...')
body ('[{"headline":"abc","website":"https://example.com","description":"abc","learnBtnTxt":"Learn More"}]')

Next steps

• Link with input
• Video preview

License

MIT