This template comes with several social media widgets. We will also cover setting up some outside social media widgets to help you get started. This article covers the following widgets:
- Social Icons widgets (see setup here)
- Twitter Feed
- Flickr Gallery
- Instagram (sidebar and footer)
- Pinterest feed
- Pinterest Hover button - already installed
Twitter Feed
- The Twitter Feed widget will automatically be added to your site when the template is uploaded.
- On the Blogger Dashboard, go to the Layout page.
- In the SIDEBAR-1 area, find the Twitter Feed widget.
- Click the Edit link to open the widget settings.
- Enter your Twitter code into the widget content area:
# of Tweets / Your Widget ID / twitter
-
Example : 2/706317576960258048/twitter
- Click the Save button to save your settings.
How to Find your Twitter ID
- Go to Twitter Widgets page and sign into Twitter normal.
- Click on the Create widget button to create a new widget.
- Select the List option.
- Enter your Twitter URL then create a User Timeline widget.
- Now go back to settings page, and then go back to widgets page and you should see the widget you just created. Click edit.
- Look at the web address in your in your web browser. In the address string, You will see a long number something like this:
706317576960258048
- Use this as your Twitter ID in the code above
Flickr Gallery
- The Flickr widget will automatically be installed when you upload the template.
- On the Blogger Dashboard, go to the Layout page
- In the SIDEBAR-1 section, find the Flickr Gallery widget.
- Click on the Edit link to open the widget settings.
- Enter your Flickr widget code into the widget content area:
# of Photos / Your Flickr ID / flickr
-
Example : 6/146374401@N05/flickr
- Click the Save button to save your widget settings
Find Flickr ID
- Go to IdGettr and paste your URL of your username like this "http://www.flickr.com/photos/username/".
- Click on find button! and copy the generated ID.
- Now go back to your flickr widget and you paste the generated ID as the example above.
Instagram Sidebar Widget
- On the Blogger Dashboard, go to the Layout page.
- In the SIDEBAR-1 section, click on the Add a Gadget link.
- Add a HTML/JavaScript gadget by clicking the + sign next to the widget.
- Give your widget a Title
- Copy and paste your Instagram widget code into the widget content area.
- Click the Save button to save your widget settings.
Where to get Instagram widget code
- Go to the Lightwidget site
- Click the big Log In button to log in to your Instagram account (REQUIRED)
- This will automatically add your Username in the ID box. You can also create a widget using a hashtag.
- Choose a type of widget. Options include grid, slideshow and Pinterest style
- Choose number of columns and rows for grid and Pinterest style widgets
- Choose and image hover effect
- Set the amount of space between pictures.
- Click the Preview button to preview your widget.
- Then click Get code!
- Highlight all the code in the code box that appears.
- Copy and paste this code into the HTML/JavaScript widget you created.
Instagram Footer Widget
- The Instagram Footer widget will be automatically installed when you upload the template.
- On the Blogger Dashboard, go to the Layout page.
- Locate the INSTAGRAM-WIDGET section.
- Click on the Edit link to open the widget settings.
- In the Title area, enter your widget title.
- Copy and paste the code below into the widget content area. Replace the User Id and Token with your own info:
userId: User_ID, accessToken: 'User_Token',
- NOTE: Make sure you copy and paste correctly. leave the single quotes intact on the accessToken line. DO NOT replace with double quotes and make sure there is a single quote before and after the User_Token without any extra spaces.LClick the Save button to save your widget settings.
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 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
- Paste this number into the User_ID spot in the code above
- Paste the ENTIRE code including the User ID into the User_Token space in the code above. Keep the quotes intact.
Pinterest Feed
- On the Blogger Dashboard, go to the Layout page.
- In the SIDEBAR-1 section, click on the Add a Gadget link.
- Create an HTML/JavaScript gadget.
- Give your widget a Title.
- Copy and pasted your Pinterest widget code into the widget content area.
- Click the Save button to save your widget settings.
How to get your Pinterest Widget code
- Go to the Pinterest Widget Builder Page
- Choose to create a pin, board or profile widget
- Enter your pin, board or profile URL (address)
- Choose the shape of your widget. For sidebar widgets, select Create your own option
- For image width enter: 135
- For Board height enter: 500
- For Board width enter: 330
- Copy and paste the code from the TOP code box. (The second line of code is already in place in the template.
- Paste the code into the HTML/JavaScript widget you created above.
Comments