Add FindUs button

2 files changed, 67 insertions, 6 deletions

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