diff options
| author | Patryk Niedźwiedziński <pniedzwiedzinski19@gmail.com> | 2019-08-29 15:36:44 +0200 |
|---|---|---|
| committer | Patryk Niedźwiedziński <pniedzwiedzinski19@gmail.com> | 2019-08-29 15:36:44 +0200 |
| commit | 6e60a0fbacc58b07bc6a0487458ae2af6914fe95 (patch) | |
| tree | 5809da9e27f514684e832ecf3c99315b55f1d978 | |
| parent | 69512e87650730fe7668da80093aafb9eaf87468 (diff) | |
| download | puszcza-6e60a0fbacc58b07bc6a0487458ae2af6914fe95.tar.gz puszcza-6e60a0fbacc58b07bc6a0487458ae2af6914fe95.zip | |
Add FindUs button
| -rwxr-xr-x | public/assets/social/find_us_fb.png | bin | 0 -> 14732 bytes | |||
| -rw-r--r-- | public/index.html | 5 | ||||
| -rw-r--r-- | src/components/FacebookFeed.vue | 38 | ||||
| -rw-r--r-- | src/components/FacebookFindUsButton.vue | 35 |
4 files changed, 72 insertions, 6 deletions
diff --git a/public/assets/social/find_us_fb.png b/public/assets/social/find_us_fb.png new file mode 100755 index 0000000..98ad3c6 --- /dev/null +++ b/public/assets/social/find_us_fb.png Binary files differdiff --git a/public/index.html b/public/index.html index 32ae880..c52bd49 100644 --- a/public/index.html +++ b/public/index.html @@ -5,6 +5,11 @@ <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width,initial-scale=1.0" /> <link rel="icon" href="<%= BASE_URL %>favicon.ico" /> + <script + async + defer + src="https://connect.facebook.net/en_US/sdk.js" + ></script> <title>19 PDH Puszcza</title> </head> <body> diff --git a/src/components/FacebookFeed.vue b/src/components/FacebookFeed.vue index 7abf93f..e405270 100644 --- a/src/components/FacebookFeed.vue +++ b/src/components/FacebookFeed.vue @@ -1,15 +1,41 @@ <template> - <section> + <section class="feed"> <h1>Ostatnie wpisy</h1> + <FacebookFindUsButton /> </section> </template> <script> +import FacebookFindUsButton from "./FacebookFindUsButton.vue"; + export default { - mounted() { - fetch( - `http://fetchrss.com/rss/5d6675308a93f8773c8b45685d66750d8a93f8bb388b4567.xml` - ).then(console.log); + components: { + FacebookFindUsButton + }, + props: { + pageId: String + }, + created() { + window.fbAsyncInit = function() { + FB.init({ + appId: "702203580219306", + autoLogAppEvents: true, + xfbml: true, + version: "v4.0" + }); + + FB.api(`/${this.pageId}/feed`, function(response) { + if (response && !response.error) { + console.log(response); + } + }); + }; } }; -</script> \ No newline at end of file +</script> + +<style scoped> +.feed { + margin: 50px 0; +} +</style> \ No newline at end of file diff --git a/src/components/FacebookFindUsButton.vue b/src/components/FacebookFindUsButton.vue new file mode 100644 index 0000000..9a27c11 --- /dev/null +++ b/src/components/FacebookFindUsButton.vue @@ -0,0 +1,35 @@ +<template> + <a href="https://facebook.com/19pdhpuszcza" target="_blank" rel="noopener"> + <div class="button"> + <img class="image" src="/assets/social/find_us_fb.png" alt="Find us on Facebook" /> + </div> + </a> +</template> + +<style scoped> +.button { + border: 2px solid #c4c4c4; + border-radius: 4px; + + padding: 15px 40px; + margin: 10px; +} + +.button:hover { + background-color: #efefef; +} + +.image { + width: 200px; +} + +@media (max-width: 500px) { + a { + width: 100%; + } + + .image { + width: 150px; + } +} +</style> \ No newline at end of file |
