Adding Facebook Page Feed and your Twitter Timeline to your WordPress blog (updated for the Block Editor)
Latest posts by Donncha Hughes (see all)
- How to get an email address to match your website URL? - March 31, 2020
- Phlox Theme Instructions Part 2 Configuring the Blog - October 16, 2019
- Phlox Theme Instructions Part 1 Adding a Menu - October 16, 2019
Would you like to embed your tweets (twitter timeline) in the sidebar of your WordPress blog. This blogpost will provide instructions and also explain how to add a Badge or Button that allows your visitors to Like your Facebook page and see how many people like your facebook business page. See the Twitter widget end result in my sidebar.
Instructions for adding Twitter Feed
Within WordPress you will be working with your Widgets. You will be adding ’embed code’ that will be provided by Twitter and Facebook respectively.
Are there Twitter WordPress Plugins?
Yes, as a search of Google will testify, but you dont need them as you can add your timeline easily via the Publish Twitter site.
1.Go to publish.twitter.com
2. The site asks you immediately what you would like to embed with the prompt to enter a Twitter URL – the web address of your Twitter profile page.
3. There are two display options. Feel free to check both out – i selected the Embedded timeline option.
4. Copy the Code provided …
5. Back to WordPress From the Dashboard, >>> Appearance >>> Widgets … go to Sidebar widget area and add a Text Widget. Click on the Text Tab and paste in the Twitter Embed Code. Save.
6. The Twitter Widget should now be active on your blog and any pages with a Sidebar. You might like to put a Twitter Button in the Footer area. You can also put onto any page using the Block Editor – simply select the ‘Embed Block’
Instructions for Google+
The instructions for Google+ are very similar.
1. Google ‘Google+ Badge’ and go to the Google Developers Site .. https://developers.google.com/+/web/badge/
2. Follow the instructions to get the HTML
3. Create a new Widget in WordPress and paste in the Code
Google+ is being phased out in 2019… really won’t be missed!!
Instructions for Facebook Page Plugin
Facebook has a range of Social Plugins allowing you to add a Follow Button, A Share Button and also to embed a Feed (as per image below).
What we want to do is Embed a full facebook feed into a Sidebar area of the Blog, as follows:
1. Go to ‘Facebook Page Plugin’ within the Facebook Developers Site ..
2. Follow the instructions to get the HTML i.e add your facebook business page URL into the Box…. facebook.com/startuphughes in my case. You can also set the width and select whether or not to show Faces. When you click on get code, this screen appears.
You will notice four TABS in the Screen. The first option is to take the HTML5 code and create a new WIDGET and paste in both sets of code (ie the code presented in Box 1 and 2 above). The output is a large box that looks like:
If you click on the 3rd TAB – IFRAME, you get slightly less code which you could paste into a different widget. The output is a smaller badge that looks like this.
I think that these Social Plugins are a super way to integrate Social Media into your website and keep your website up to date and interactive. Comments welcome – particularly feedback on the usefulness of the instructions.