Adding Facebook Page Feed, follow on Google+, and your Twitter Timeline to your WordPress blog

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 icon

Would you like to embed your tweets (twitter timeline) in the sidebar of your wordpress blog. This blogpost will provide instructions and then follow up with showing you how to add a Badge or Button that allows your visitors to Add you to Circles on Google+ or Like your Facebook page and see how many more 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 ‘HTML code’ that will be provided by Twitter, Google+ and Facebook respectively. For this to work, you need to download and activate the Black Studio TinyMCE Widget Plugin.  This plugin adds a WYSIWYG text widget based on the standard TinyMCE WordPress visual editor. This is intended to overcome the limitations of the default WordPress text widget, so that you can visually add rich text contents to your sidebars, with no knowledge of HTML required. [To install, Click on Plugins and Search for Black Studio and download, and activate]

 

Twitter Timeline

Twitter Timeline as per Sidebar

 

Are there Twitter WordPress Plugins?

Yes, I used to have a plugin that allowed me to add my tweets to the sidebar of my blog. Then it stopped working. I learned that Twitter have introduced a new technology called ‘Embedded Timelines’ which means that most of the WordPress plugins need to be updated (and some developers will charge). The good news is that Twitter now provide ‘HTML Code’ that you can add to any website  you can replicate the functionality. It seems to look fine on WordPress but is not easily customisable for other websites.

Steps:

1. Login into Twitter

2. Open >> Widgets by clicking on https://twitter.com/settings/widgets or clicking on >>Settings >> Edit Profile and >> Widgets

3. Create New Widget

4. Copy and Past the Code that is provided in the box on the bottom right ….

<a  href=”https://twitter.com/donnchadhh”  data-widget-id=”349071664107102208″>Tweets by @donnchadhh</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?’http’:’https’;if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+”://platform.twitter.com/widgets.js”;fjs.parentNode.insertBefore(js,fjs);}}(document,”script”,”twitter-wjs”);</script>

5. Back to WordPress

Create a new TinyMCE Text Widget. Add an appropriate title such as ‘Donncha’s Tweets’. Click on HTML (default Tab is Visual) and past in the Code. Save and Close.

6. The Twitter Widget should now be active on all selected pages and posts.

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

Instructions for Facebook Like Box

Again the instructions are very similar

1. Google ‘Facebook Page Plugin’ and go to 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.

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

Posted in Blog Startup Web Training, Social Media, Wordpress Tagged with: , , , , , ,