Adding Facebook Page Feed and your Twitter Timeline to your WordPress blog (updated for the Block Editor)

The following two tabs change content below.

Donncha Hughes

Sole Trader/ Proprietor
Donncha Hughes is a mentor, trainer and business advisor. I deliver group and one to one training on Wordpress. My background is assisting business with development of marketing, business plans, grant and finance applications. See www.startuphughes.com for more...

Facebook logo iconTwitter logo iconWould 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

Starting Point

Within WordPress you will be working with your Widgets. You will be adding ’embed code’ that will be provided by Twitter and Facebook respectively.

Twitter Timeline

Twitter Timeline as per Sidebar

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.

Steps:

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.

Twitter Publish Excerpt

3. There are two display options. Feel free to check both out – i selected the Embedded timeline option.

4. Copy the Code provided …

Twitter Publish Code

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.

Twitter Publish Widget

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).

Facebook Social Plugins

Via https://developers.facebook.com/docs/plugins/

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 ..

https://developers.facebook.com/docs/plugins/page-plugin

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.

Facebook Like Box Html code

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:

Facebook Like Box with Faces shown

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.

Facebook Like Box TidyI 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.

regards

donncha

Donncha Hughes is a mentor, trainer and business advisor. I deliver group and one to one training on Wordpress. My background is assisting business with development of marketing, business plans, grant and finance applications. See www.startuphughes.com for more...

Tagged with: , , , , , ,