If you are someone like me who is quite active on social media, you would probably want to embed your most popular social channels on your website too. This post will show you precisely how to do that.
Please note that we will focus just on embedding Twitter and Facebook feeds here. And this we will do on a simple no CMS-based website, like a simple Laravel Project.
Let’s start with embedding our Twitter Feed first.
How To Embed a Twitter Timeline?
Twitter allows us to embed two types of timelines:
- Profile – This allows us to bring in tweets from any public Twitter account and embed it on a webpage.
- Lists – This allows us to embed tweets that are public and are part of Twitter lists.
In order to embed tweets from a timeline to a webpage, we have to follow the following steps:
Steps to add an embedded timeline to your website
- Visit https://publish.twitter.com/.
- Enter the twitter profile URL here to bring in tweets from.
- Customize the look and feel as per your website’s look & feel.
- Copy the code from the website that is generated.
- Go to the webpage where you want to display the feed and save it.
- Open the webpage in a browser and you should see the twitter feed embedded on the webpage.
Now let’s expand on the above a bit.
Visit https://publish.twitter.com/ and enter the full profile URL you want to pull tweets from.
Customize the look & feel of the timeline. To do that, first click Embedded Timeline. Then, click on set customization options. This will expand a styling section as shown below. You can use it to customize the look and feel of the feed as per your website’s color scheme and styling.
Style the feed as per your taste
Once done, click the update button. This will collapse the section and you will see a small section showing a code snippet. This is your embed code that needs to go into your webpage.
Your embed code is ready to be copied.
Here, click Copy Code button and then open your webpage in your favorite text editor and paste it there. And then, save it. Then, open the same page you pasted the snippet in, in a browser and you should see the timeline embedded in the website.
And you are done!
**Please note that only accounts whose tweets are public can be embedded.
How To Embed a Facebook Timeline?
The procedure to embed a Facebook Page timeline is quite similar to that of embedding a Twitter timeline as explained above, only simpler.
Steps To Embed a Facebook Timeline
- Go to https://developers.facebook.com/docs/plugins/page-plugin/ .
- Customize the styling of the feed.
- Copy the embed code snippet.
- Paste it into your webpage and save it.
- Open the webpage in browser.
Now let’s expand on the above a bit as well
Navigate to the Facebook Page Plugin documentation page here – https://developers.facebook.com/docs/plugins/page-plugin/ and enter the URL of the Facebook page that you want to embed, style the page as per your taste.
Scroll down and find the blue button that says Get Code. This will give you a popup as shown below. In this popup, click the iframe tab. You will see a snippet here.
Copy the snippet above and paste it into the webpage you want to display the Facebook feed on. Save it and open the page in a browser and you should see the feed.
That’s it!
