If you manage a website or blog, then it can be challenging to consistently create engaging content through writing articles; however, social media posting has become pretty natural. Luckily, we can leverage all the work put into your social media channels by embedding that content on your Demosphere website. This two-part guide will show you all you need to know to integrate your Facebook page and Twitter account with your website. Let’s get started!
Social Media Tip 1: Facebook Pages
You can share all kinds of social media content between Facebook and your website including: timelines, messages, and events. Embedding your Facebook page on your site is an easy way increase your online presence. This section will cover how to connect different pieces of your Facebook page with your site.
1) Navigate to the Facebook Developer Page Plugin page.
2) Scroll down until you see an input for, “Facebook Page URL,” and enter the url for the page from where you want to use content. In this guide we will be using Demosphere’s Facebook page as an example.
3) Choose the tabs you want to include in the input labeled, “Tabs”. Available options are: timeline, messages, and events. You may include as many tabs as you wish by separating each tab with a comma (example input “timeline, events”). In our example, we’ll use all 3.
4) Configure the appearance of your page plugin. The nice people at Facebook have made this process very simple by exposing common configurations as checkboxes and text inputs. You can experiment with the look and feel of your plugin by previewing the content underneath the configuration settings. It is best to leave width and height empty, as well as leaving the checkbox for “Adapt to plugin container width” checked to ensure your plugin looks great on all device screens. For the guide’s example we are going to use the settings below:
6) Add the code to your page. Add the snippets to your Demosphere website as “Rawcode” (shown below). If your site is not hosted by Demosphere, then you can add your code snippets to the source code of the page in the order shown above.
7) Check your public page:
Social Media Tip 2: Showcasing Specific Posts
Sometimes you will want to highlight a specific post from Facebook. You can accomplish this using Facebook’s Embedded Posts Plugin. We’ll walk through how to accomplish that below.
1) Start by logging into Facebook and navigating to the post that you would like everyone to see. In this example, we will use one of the posts from Demosphere’s Facebook page. Click the arrow at the top right of the post and choose the “Embed” option, then “Advanced Settings”.
2) Configure the post plugin. Facebook Embedded Post Plugin page should look familiar to the Facebook Page Plugin page. Set the pixel width option to “auto” as shown below.
3) Get the code. Click the button “Get Code”. If you’re following along from the last section and are not using the Demosphere platform, then you don’t need to copy the first snippet.
4) Add the code to your page. Like the previous section, you can add the code to a Demosphere page using “Rawcode”. If you are not using the Demosphere platform, then you can add the code snippets to your page’s source code.
5) Check your public page
If you’ve been following along, then you have successfully integrated different elements from your organization’s Facebook page. Take some time to experiment with what you have learned in Part 1 of this guide and explore the various plugins that Facebook has to offer. Most of them can be implemented by simply embedding the code they provide into your site.
Having trouble? Did you setup an awesome social media steam? Leave a comment below and be on the lookout for Social Media: Supercharge Your Sites Part 2, where we will go over how to integrate Twitter with your site.