Georgia Lou Studios

Welcome to the Help Center!

Social Media Widgets | Piper + Paige

Follow

Included Widgets

This theme includes the following social media widgets

  • Pinterest board
  • Facebook Like Widget
  • Instagram sidebar widget
  • Instagram Footer widget

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.

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: 130
  6. For Board height enter: 350
  7. For Board width enter: 280
  8. pinterest1.png
  9. You are going to need to grab the code from both code boxes shown at the bottom of the screen.
  10. The bottom code box is the pinit.js code and it MUST be included or your widget won't work.pinterest2.png
  11. The top code box is your personal widget. This is also required.
  12. pinterest3.png

 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.adelle12.png
  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.
  8. pinterst4.png

 

Facebook Like Widget

Step-by-Step Directions

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

adelle10.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.fb2.png

3. On the Blogger Layout page, click the Add a Gadget link to add a new gadget. adelle12.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 Facebook Widget.txt file into the Content field.

8. In the code, look for the 2 (two) places where it says georgialoustudios. Replace this (2 times) with the ID for your Facebook page.

fb5.png

NOTE: You must have a Facebook PAGE, not a personal profile.

9. Click the orange 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.adelle11.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. adelle12.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.adelle9.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. if3.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?
1 out of 1 found this helpful

Comments

Powered by Zendesk