Social Media Widgets | Marissa

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

1. The Twitter Feed widget will automatically be added to your site when the template is uploaded.
   
2. On the Blogger Dashboard, go to the Layout page.
3. In the SIDEBAR-1 area, find the Twitter Feed widget.
4. Click the Edit link to open the widget settings.
5. Enter your Twitter code into the widget content area:

   # of Tweets  /  Your Widget ID  /  twitter
    

6. Example :
   2/706317576960258048/twitter

7. 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

1. The Flickr widget will automatically be installed when you upload the template.
   
2. On the Blogger Dashboard, go to the Layout page
3. In the SIDEBAR-1 section, find the Flickr Gallery widget.
4. Click on the Edit link to open the widget settings.
5. Enter your Flickr widget code into the widget content area:

   # of Photos  /  Your Flickr ID  /  flickr

6.  Example :
   6/146374401@N05/flickr

7. 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

1. On the Blogger Dashboard, go to the Layout page.
   
2. In the SIDEBAR-1 section, click on the Add a Gadget link.
3. Add a HTML/JavaScript gadget by clicking the + sign next to the widget.
4. Give your widget a Title
5. Copy and paste your Instagram widget code into the widget content area.
6. 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

1. The Instagram Footer widget will be automatically installed when you upload the template.
2. On the Blogger Dashboard, go to the Layout page.
3. Locate the INSTAGRAM-WIDGET section.
4. Click on the Edit link to open the widget settings.
5. In the Title area, enter your widget title.
6. 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',

7. 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

1. On the Blogger Dashboard, go to the Layout page.
2. In the SIDEBAR-1 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. 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.