Georgia Lou Studios

Welcome to the Help Center!

Social Media Widgets (Updated)

Follow

This tutorial applies to all templates (versions 3.1.0 +) purchased on or after November 1, 2017. See the "Social Media Widgets (Old)" if you purchased prior to November 1, 2017.

Included Widgets

All of our premium templates include various social media widgets including:

  • Sidebar icons
  • Top bar icons
  • Pinterest board
  • Instagram widgets

Two other social media widgets/gadgets are included that require no setup: Pin It Hover Buttons and Post Social Share icons. These widgets will appear automatically and require no setup.

Social Media Icons (Sidebar)

View the video setup directions or see Step-by-Step written directions below.

 

Step-by-Step Directions

  1. To begin configuring your social media icons, on the Blogger Dashboard, navigate to the Layout configuration page.
  2. Click on the Edit link at the bottom right-hand corner of the Social Media Icons gadget.
  3. NOTE: Occasionally, the gadget might show up under the Blog Post box. Grab and drag it to your sidebar if this happens.
  4. This template includes 24 social media icon links:Behance, Facebook, Twitter, Bloglovin, Dribbble, Flickr, Google plus, Instagram, Linkedin, Pinterest, Vimeo, Youtube, Vine, Soundcloud, Goodreads (as a book icon), Deviantart, Foursquare, Reddit, Tumblr, VK, Twitch, Spotify, Snapchat, Etsy PLUS e-mail, RSS, and a shop icon.

    You can control which icons you add to your template and what order they display in.

  5. When you click on the Edit link for the Social Media Icons box, the Configure Link List window will open.  NOTE: Initially there will be no links displayed. You will need to add your own links for the gadget to show up on the front end of your template.
  6. The gadget Title field is optional. If you leave this field blank, nothing will display.
  7. To start adding icons, type the name of the icon link from the list of included links above in the New Site Name field. i.e. “Facebook” or “Dribbble” – no quotation marks.
  8. In the New Site URL field, enter the social media site web address INCLUDING YOUR ID. You can generally find this by navigating to your homepage and copying the address at the top. Google for specific sites.  You must include the http:// at the beginning of the web address.
  9. NOTE: To show the correct icon, the template looks at the URL. Example: to show a Twitter icon, the URL must include “twitter.com” somewhere in the URL you paste into the field.
  10. SNAPCHAT: Your Snapchat URL will look like this http://snapchat.com/add/Your-USER-ID
  11. SHOP ICON: The template will show the shopping cart shop icon for any URL with “shop” or "Store" (TPT) anywhere in the link.
  12. EMAIL ICON: To show the email icon, add the following text to the beginning of your email address: mailto:  So, an example would be mailto:someone@gmail.com
  13. RSS ICON: The RSS icon will appear for any URL entered with any of the following in the URL: feed/posts/default, feeds/comments/default and feeds/feedburner.com.
  14. OPEN IN NEW WINDOW: If you prefer your links to open in a new window, add this to the end of your URLs: ?target=_blank . Example: http://www.facebook.com/someone?target=_blank
  15. After you have entered the New Site Name and New Site URL, click the Add Link link.  The link will add to the list of links to be displayed.
  16. You can use the links in the gray box to edit, delete or rearrange your icons. You can also choose to sort your icons alphabetically or reverse alphabetically using the Sorting field.
  17. Click the orange Save button to save your Social Icons gadget settings.

 

Top Bar & Footer Social Media Icons

This video tutorials covers setup of both the top bar and footer social icons widgets. See below for Step-by-Step written directions as well.

Top bar Social Media Icons

Some themes include a top bar social media icons gadget. This gadget displays the social network icons in the top menu bar.

  1. In the Layout configuration page, the TOP MENU SOCIAL ICONS gadget appears at the top of the layout on the top or right side of the nav bar.
  2. Configure the Top Menu Gadget as described above for the sidebar gadget.
  3. NOTE: Sometimes there are layout issues on the Layout page due to the way Blogger displays sticky elements. You may need to drag a gadget out of the way to reach a gadget that is hidden beneath it (like the header widget). Just drag the widget into the sidebar. Once you are done configuring your widgets make sure you click on the Clear button at the top. DO NOT save the arrangement until the widgets are back in their proper place. If you do this, you will need to re-upload the template to restore their proper places.

 

Footer Social Media Icons (Felicity, Justine, Sophie)

This gadget displays the social network icons in the top menu bar.
  1. In the Layout configuration page, the FOOTER SOCIAL ICONS gadget appears at the top of the layout on the top or right side of the nav bar.
  2. Configure the Top Menu Gadget as described above for the sidebar gadget.

 

Footer Social Icons (Ashleigh, Peyton, Kiersten, Heyden, Victoria, Natasha, Jolie, Phoebe)

The Footer Social Icons for these templates are different than the Top Bar and Sidebar icons.

  1. Go to the Blogger Dashboard > Layout page.
  2. Scroll to the bottom of the page where you will find the yellow Footer section.
  3. The footer social gadget should have been automatically installed.
  4. Open the text file called footer_social_icons.txt found in the Widgets folder inside  the template folder that you downloaded.new1.pngnew2.png
  5. Replace the # in each section with your full Social Network URL.
  6. Example: <a href=’#’ target=’_blank’>
    <i class=’fa fa-facebook’> </i>
    <span>Facebook</span>
    </a>
  7. In the example above, you would replace the # with your Facebook URL, i.e. http://www.facebook.com/mypage
  8. If you would like to add different social media icons, you can visit the FontAwesome site to find the correct icon code.
  9. EXAMPLE: Add a YouTube icon instead of a Tumblr icon.
  10. Search the FontAwesome site for YouTube. You will find 3 icons to pick from. We will choose the YouTube Play icon.
  11. Click on the icon of your choice to get the icon code. Our icon code is fa-youtube-play.
  12. To use this code in our social icons gadget, we will replace the Tumblr code which is fa-tumblr with the YouTube code so it looks like this:  <i class=’fa fa-youtube-play’></i>
  13. Then we will change the name of the link below from Tumblr to YouTube. i.e. <span>YouTube</span>
  14. Using this trick you can replace any of the icons with a different icon.
  15. To remove a particular icon, make sure you remove the whole icon section from the <a href=’#’ target=’_blank’> to the next </a>. You can add an extra icon by cutting and pasting the same section beneath the final icon section. Then changing the icon code and link name. Max number of icons should be around 8 to look good.
  16. Click the  Edit link at the right hand side of the footer socialgadget box. TheConfigure HTML/JavaScript window will open. Copy and paste ALL of the text from the footer_social_icons.txtfile into the Configure HTML/JavaScript window.
  17. Click the orange Save button to put your changes into effect.

Add a Pinterest Feed Widget

I. Get your code

  1. Go to the Pinterest Widget Builder Page
  2. Choose to create a pin, board or profile widget
  3. Enter your pin, board or profile URL (address)
  4. Choose the shape of your widget. For sidebar widgets, select Create your own option
  5. For image width enter: 135
  6. For Board height enter: 500
  7. For Board width enter: 300
  8. You are going to need to grab the code from both code boxes shown at the bottom of the screen.
  9. The bottom code box is the pinit.js code and it MUST be included or your widget won't work.
  10. The top code box is your personal widget. This is also required.

 Add Widget to your Blog

  1. On the Blogger Dashboard, go to the Layout page.
  2. In the SIDEBAR section, click on the Add a Gadget link.
  3. Create an HTML/JavaScript gadget.
  4. Give your widget a Title.
  5. Copy and pasted your Pinterest widget code into the widget content area.
  6. Paste the pinit.js code on top then your personal widget code below. See image.
  7. Click the Save button to save your widget.

 

 

Instagram Sidebar Widget

Step-by-Step Directions

STEP 1: Get your Instagram User ID and Token

  • Go to This Website and click on Generate Access Token button.
  • Sign in to Instagram as normal, and give the site the access to generate your Access Token, (Don't worry it is a safe method!).
  • The code generated will look something like this: '1720536514.1677ed0.7de82de9a39e4d898da1d9891b3810c1'
  • Your USER ID is the first set of numbers before the first period (.). i.e. 1720536514
  • Your ACCESS TOKEN is the whole string: 1720536514.1677ed0.7de82de9a39e4d898da1d9891b3810c1

STEP 2: Setup the Widget

1. In your original theme download folder, inside the Widgets folder, you will find a file called Instagram Widget.txt.is1.png

2. Open the file using a plain text editor program like Note Pad or Text Edit. DO NOT use a word processing program like Microsoft Word.is2.png

3. On the Blogger Layout page, click the Add a Gadget link to add a new gadget. is2.png

4. Add an HTML/JavaScript widget.fb4.png

5. The Configure HTML/JavaScript box will open.

6. Give your widget a Title.

7. Copy and paste all the code from the Instagram Widget.txt file into the Content field.

8. At the top of the script, find the code: userId:1720536514,is3.png

9. Replace 1720536514 with your USER ID.

10. Next, find the code: accessToken:'1720536514.1677ed0.7de82de9a39e4d898da1d9891b3810c1',is4.png

11. Replace 1720536514.1677ed0.7de82de9a39e4d898da1d9891b3810c1 with your ACCESS TOKEN. Leave the quotes intact.

12. To change the number of images displayed, find the code: limit:4,is5.png

13. Change the number 4 to another number. Even numbers look best.

14. Click the orange Save button to save your widget settings.

 

Instagram Footer Widget

Step-by-Step Directions

STEP 1: Get your Instagram User ID and Token

NOTE: If you already grabbed these for your sidebar widget, use the same #s.

  • Go to This Website and click on Generate Access Token button.
  • Sign in to Instagram as normal, and give the site the access to generate your Access Token, (Don't worry it is a safe method!).
  • The code generated will look something like this: '1720536514.1677ed0.7de82de9a39e4d898da1d9891b3810c1'
  • Your USER ID is the first set of numbers before the first period (.). i.e. 1720536514
  • Your ACCESS TOKEN is the whole string: 1720536514.1677ed0.7de82de9a39e4d898da1d9891b3810c1

STEP 2: Setup the Widget

1. In your original theme download folder, in the Widgets folder you will find a file called Instagram Footer Widget.txt.if1.png

2. Open the file using a plain text editor program like Note Pad or Text Edit. DO NOT use a word processing program like Microsoft Word.if2.png

3. On the Blogger Layout page, find the Footer and Instagram Social widget area click the Add a Gadget link to add a new gadget. mc4.png

4. Add an HTML/JavaScript widget.fb4.png

5. The Configure HTML/JavaScript box will open.

6. Give your widget a Title.

7. Copy and paste all the code from the Instagram Widget.txt file into the Content field.

8. At the top of the script, find the code: userId:1720536514,if5.png

9. Replace 1720536514 with your USER ID.

10. Next, find the code: accessToken:'1720536514.1677ed0.7de82de9a39e4d898da1d9891b3810c1',if6.png

11. Replace 1720536514.1677ed0.7de82de9a39e4d898da1d9891b3810c1 with your ACCESS TOKEN. Leave the quotes intact.

12. Click the orange Save button to save your widget settings.

Was this article helpful?
0 out of 0 found this helpful

Comments

Powered by Zendesk