Latest posts by Donncha Hughes (see all)
- Configuring Contact Form 7 WordPress - March 13, 2017
- Instructions to set up ‘Pay with a Tweet’ in WordPress - March 6, 2017
- How to embed an individual tweet in a WordPress blog or post? - March 6, 2017
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
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]
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.
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>
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 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.