How to Add Social Buttons & Streams to Your Website with Google Fonts for WordPress

Posted OnFeb 5, 2015     CategoryPlugins     CommentsNo comment

In this guide to the Google Fonts for WordPress plugin, we’ll take you through the social settings, which are used to set up and show different social media icons throughout your website, and change their layouts throughout.

Step 1) Login to the WordPress Dashboard.

Step 2) On your Admin Panel, choose Google Fonts -> Social Settings.


Step 3) On the Social Settings page, there are four toolbars along the top of the page. The first one is Social Buttons. From here, you can enable them for all (or just some) posts, choose which social networks to include (out of Twitter, Facebook and Google+), give the buttons a title and choose the icon size (default is 32 x 32 px).


Step 4) The next step is to choose the colours for your chosen social networks. The defaults for the main three (as shown below) are blue for Facebook, green for Twitter and red for Google+. People in the know are likely to recognise these, so it might be better to choose these. You can choose to have transparent icons if you prefer though.


Step 5) If you want anything to display before or after the buttons, ie. text, add the HTML to the boxes shown below and then click Save Settings.


Step 6) The next step is to click on Facebook Slider on the toolbar at the top of the page. From here, you can enable your slider and put it in the horizontal (left or right) and vertical position (top, middle or bottom).


Step 7) Decide how you want your Facebook slider button to look by choosing one of the below icons. You can also expand the margin using the box underneath. Choose between a light or dark colour scheme, height and width of the button, and then save your changes.


Step 8) You can show the faces of your Facebook fans by ticking the box below. There are also options to show the Facebook header, and your Facebook activity stream.


Step 9) Add your Facebook page title to the URL box, then set your Facebook language. If you would like a border for the button, there are options for the colour of the border, the background of the border and the CSS parameter. You can also round off the corners by increasing the pixel number in the boxes provided.


Step 10) The next social setting is for the Twitter Slider. Click on the toolbar at the top of the page and then fill in the boxes provided for positioning and account name. You need to get a widget ID from Twitter itself and input it into the box. Follow this link to learn how to get one.


Step 11) Choose which icon you would like for your Twitter slider button from the 5 options shown below, and alter the colour scheme and extra margins as you see fit. You can also change the height, width and the language your slider button is in.


Step 12) Choose whether your want to show the header and footer, and add a border if you wish. The Tweet limit can be changed to as many or as few as you like. Keep this number quite small (between 5-10 is recommended).


Step 13) If you have decided to create a border, you can alter the border colours, link and background colours, and round them off accordingly by increasing the px in the boxes shown below.


Step 14) The final section on the Social Settings page is Ready Configs. Scroll through your options and activate the configurations that best suits your needs and the look of your website.


The next step of the guide will focus on How to Add Polls to Your Website with Google Fonts for WordPress.


Leave a Reply

Your email address will not be published. Required fields are marked *

Send this to friend