Typepad Master Class: Styling TypeLists

April 02, 2014

Welcome to the Typepad Master Class! If you've ever wanted to delve into more advanced trickery with your blog's design, the Master Class is for you. Topics covered in this series are for the adventurous or advanced blogger, so an intermediate to advanced level of knowledge of HTML and CSS will come in handy. Additionally, these guides will often require Custom CSS or Advanced Templates, so a Pro Unlimited account is necessary to access those areas and achieve the look and effects we cover. Interested in upgrading? Just head over to the Account link in your Dashboard and click on Billing Info to get started.

Features like TypeLists allow you to showcase a wide variety of content in your sidebar for readers to enjoy. Gone are the days when all TypeLists shared the same style, making custom styles complicated. Today, custom IDs are generated based on the title given to the TypeList, making styling a (relative) snap. Pretty genius, right?

With the unique identifier, you can use CSS to style each TypeList, and nearly all modules, using their custom ID or Class selector. It's easy to get started, easy to implement, and the only real difficulty you may face is coming up with the CSS for the styles you want.

Here are a couple of simple style options to get you started. Once you're comfortable with them, you can root around in your favorite design inspirations for ideas, use our tips and tricks articles in the Archives or in the Knowledge Base for CSS you can use, and so on. If there's anything you can't work out, just open a ticket at Help > New Ticket and we'll get you sorted.

Simple Header Changes

Font and Background Color

Style TypeList HeaderIn this example, we've changed the background color, font color, and font style, of a Links TypeList called "& You May Enjoy..." It originally looked like the two modules above it, but we really want to make this list pop to show them as featured items on the blog.

To make this change, we first had to locate the ID of the TypeList. As we mentioned earlier, every TypeList will have a custom ID assigned to it based on its title. To find exactly what the ID is, we simply use our browser to view the source of the blog (this is typically at View > Source or Page Source). Use your find command (Command+F or Alt+F) and search for the title of the Typelist. When we did this for the above TypeList in our example, our result looked like this:

image from content.screencast.com
We highlighted the ID so it's easier for you to take note of. Yours will look similar, except it will use your TypeList title (e.g. A TypeList called "Bloggers Unite" will appear as "bloggers_unite" or similar).

With this information in hand, we then scooted over to Design > Custom CSS and typed the following:

#_you_may_enjoy .module-header {
    color: #D9826E;
    background: #E5E5E5;
    font-style: italic;
    }

The above CSS indicates that we want to select the TypeList we found the ID for, then target specifically the header area, not its content. We then set a font and background color to match the style of the post titles. We also made sure to set the font style to italic so it stood out a bit more but kept with the style of the blog design. When doing something similar, you can choose your own font and background colors, not use a font style, add a border, background image--whatever you choose.

Simple Border Change

Continuing with the simple changes, but wanting to make the TypeList fit the design of the theme we've set, this next example mimics the navigation bar by implementing borders.

Simple Border Change

Back at Design > Custom CSS, we added the following:

#_you_may_enjoy .module-header {
    border-top: solid 5px #6B6662;
    border-bottom: solid 1px #C6C1BD;
    padding-top: 9px;
    padding-bottom: 9px;
    }

We again focused on the header of the TypeList, using the custom ID and Class selector to pinpoint where the style changes should be reflected. With a thick top border, a thinner bottom border, and some padding above and below the header title to make things vertically centered to match the navigation bar, we've got a slick, perhaps more subtle emphasis on the TypeList we want to feature.

Come up with a design boost for your sidebar content, then repeat the steps to locate the unique identifier for your TypeList, and work out the CSS you'll need to get to look the way you want. You can do quite a lot with a little inspiration, ambition enough to push your design to that next step, and some CSS. Don't try to make it more complex than it has to be, but if you find yourself in over your head, don't hesitate to reach out to us.

Typepad 101: Making SEO Work For Your Blog

March 19, 2014

You've heard of SEO (Search Engine Optimization) but maybe you're not sure how to apply it in your blog posts. We all want to connect with new readers and SEO is a way for others to discover your latest posts.

In addition to your SEO blog settings, we have some more tips and tools to keep in mind when putting your post together on the Compose page.

Blog Post Title

Screen Shot 2014-03-01 at 2.13.29 PM

Search engines look at your post title and its URL for keywords.  Your Permalink is generated either by what is written in the Title bar so choose your words wisely.   "SEO In Your Blog" may work better in a search than "Get Seen By A Lot Of People".

Your Permalink

Screen Shot 2014-03-01 at 2.13.40 PMWe know sometimes you can't think of a title right away so you start writing your post and the title will come to you later.  When saving your draft this way, your permalink will be the first several word of your posts so remember to go back and edit your Permalink!  The keywords in your link are also scanned in searches so avoid using vague link names to your post (ie: Monday_jan142014.html)

Body Content

Screen Shot 2014-03-01 at 2.14.00 PM

Think about your topic and what type of search one would use to find your blog.   How you begin your blog post is important because the first 100 words will be used as your post excerpt if you do not write one separately in the Excerpt field.

Keywords

Screen Shot 2014-03-01 at 2.15.25 PMDon't pass this up!  Your keywords should reflect the overall subject of your blog posts plus a little extra that can still be related to your topic.  To best utilize your keyword, it should appear throughout your post.   Keywords and excerpt text are saved as meta data which help categorize your post and is what search engines use when seeking results.

Excerpt

Screen Shot 2014-03-02 at 5.07.01 PMThe Excerpt field is optional but as mentioned previously, this is generated automatically using the first 100 words in your blog post unless you have your settings changed under Settings > Posts, under Auto-Generated Excerpt Length.

We hope this gives you a better understanding of how SEO works and how you can apply it to draw traffic to your blog.

Settings > Posts & Pages, under Auto-Generated Excerpt Length. - See more at: http://help.typepad.com/compose_overview.html#sthash.jvyCINj8.dpuf
or the number of words you have set in Settings > Posts & Pages, under Auto-Generated Excerpt Length. - See more at: http://help.typepad.com/compose_overview.html#sthash.jvyCINj8.dpuf
or the number of words you have set in Settings > Posts & Pages, under Auto-Generated Excerpt Length. - See more at: http://help.typepad.com/compose_overview.html#sthash.jvyCINj8.dpuf

Typepad Master Class: Highlight the blogside search

February 18, 2014

Welcome to the Typepad Master Class! If you've ever wanted to delve into more advanced trickery with your blog's design, the Master Class is for you. Topics covered in this series are for the adventurous or advanced blogger, so an intermediate to advanced level of knowledge of HTML and CSS will come in handy. Additionally, these guides will often require Custom CSS or Advanced Templates, so a Pro Unlimited account is necessary to access those areas and achieve the look and effects we cover. Interested in upgrading? Just head over to the Account link in your Dashboard and click on Billing Info to get started.

blogside searchTypepad offers great built-in features for helping readers navigate your blog. One of those is the blogside search form, which you can enable in Blogs > Design > Content. We recommend placing it near the top of the sidebar so it's easy to find.

A great way to draw attention to the search form is to make it a color that stands out. You can then take that code one step further and use a fancy background image to really draw focus to the search form. It's also a nice way to add visual interest to your sidebar.

This tutorial uses the Custom CSS feature, so it's geared toward our Pro Unlimited and Premium subscribers. Let's get to the code!

First, let's remove the "search" header:

.module-search .module-header { display: none; }

Next, we'll set a background color, a font color, and a font size.

.module-search input[type="search"],
.module-search input[type="submit"] {
background-color: #ffcccc;
color: #000;
font-size: 10px;
}

The #ffcccc is light pink with #000 for black text. You can set those colors to anything you wish. Here's how that code should look in action:

Search1

Looking better but it's not there yet. Let's set a narrower width so the search field and button are closer together, remove the border around each element, add some padding so everything looks nice and make the "search" button text uppercase just for fun.

Continue reading "Typepad Master Class: Highlight the blogside search" »

Typepad 101: Make Facebook Really Pop(Up) On Your Blog

January 20, 2014

Just about everyone now uses Facebook.  They use it to keep up with friends, relatives, and - importantly for you - the blogs they read and the products they love.

If you have a Facebook Page, you can add a pop-up box to your blog so that your readers can Like your Facebook Page, allowing them to get updates on Facebook about anthing you post to your Page.  This can include blog posts, promotions, and more.

Facebook_overlay
Your New Pop-Up!

This is what we're going to teach you to add to your blog using the steps below.

First, you need to go to Design > Content and create a new "Embed your own HTML" widget. 

Then, you can click (left click to view, right click and save as to save to your hard drive) this link to view and copy the necessary code, or copy it from the box below - just make sure to copy all of it or your overlay will not work.

Remember, make sure to copy the entire thing! Click in the box and key Cmd+A on a Mac or Ctrl+A on a Windows computer.

Next, paste the code into the pop up area of the Embed your own HTML module as we mentioned just above.

Towards the bottom of the code, you'll want to look for this block of code:

<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Ftypepad&amp;width=300&amp;
colorscheme=light&amp;show_faces=true&amp;border_color=%23ffffff&amp;
stream=false&amp;header=false&amp;height=258" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:258px;" allowtransparency="true"></iframe>

and replace typepad with the trailing name (the bit from the very end) from the URL of your own Facebook Page.

As an example, if your Facebook Page was Sony's - https://www.facebook.com/Sony - you would replace typepad with sony in the code.

You can also look for the code to change the pop-up's wording to something more you. To do that, look for this line:

Get our updates on Facebook! Just click the Like button below

and simply change the text there to whatever you'd like.

Once you're happy with the message and you've got your own Facebook URL in place, click OK and drag the module into place on your Sidebar - the best place for it is at the very top. Scroll down to save your changes, and click View Blog to see your very own Facebook Like Box overlay!

Now when a reader visits your blog, they'll see a pop-up with the option to like your Facebook Page. So as to not annoy your readers, this will only appear on their first visit to your blog.

Important! If you're already using jQuery script elsewhere on your sidebar, remove this line from the code (shown in red in the file linked above):

< script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js' >

After your readers sign up to get these updates, they're more likely to share them on Facebook for even more people to see, garnering more readers for your blog.

Remember before when we mentioned sharing your Typepad posts to your Facebook Page?  If you're not already doing this, you can learn how to automatically cross post from Typepad to Facebook here.

We hope you found this a useful tool to increase readership of your blog!

Typepad 101: Three Simple Ways to Make Money with your Blog

January 14, 2014

Not everyone can turn blogging into a full time gig but there are ways that you can make a little dough from your blog, with just a bit of effort. We're going to discuss three very easy ways to monetize your content. If you have your own tried and true tips, leave them in the comments!

First up: Amazon Associates
If you ever share links to books or other content from Amazon, you can sign up for Amazon Associates and start making money from purchases made through your links. The links don't have to be just books or music - you can link to anything on Amazon.

Books TypeList
Books TypeList on a blog

First, sign up with Amazon here. Then go to Account > Other Accounts in Typepad and add your Associate ID. Lastly, create a book or music TypeList and start adding in products. Make sure to display that list on your blog. That's really it! If you'd like to learn more, we have a full overview of using Amazon with Typepad in our Knowledge Base.

Or try Google AdSense
Google's AdSense program is hugely popular in part because it's so user-friendly. You can learn more about signing up here. It will take about a week for Google to review your site and send you confirmation of acceptance into the program. It's a good idea to go through their AdSense Academy tutorial while you wait.

Once you have your ad code, you can place it on your blog by going to Blogs > Design > Content and choosing the Embed your own HTML module. Then just paste in the code, place the ad where you want it in your sidebar, and save. Voila!

Code from AdSense
Placing ad code on your blog

We have even more information about including ads on your blog in the Knowledge Base.

Finally, you could ask for donations
If you have a strong community around your blog - folks who read and comment on every post and really rally around what you're doing - then you might be in for a lovely surprise. Loyal readers sometimes want to support what you're doing by way of small donations.

This can be tricky - readers will sometimes want a general idea of what their money is going toward so transparency is key. If you plan to use the donations to supplement your Typepad subscription, it's a good idea to mention that. Or if you write about a particular type of product, you could mention using the donations to fund that. No matter what, it's important to be gracious.

An easy way to take donations is with PayPal's donate button. They'll provide you with code that you can add in your sidebar with the Embed your own HTML module mentioned above or you can add the code in a post or page and then link your readers to that.

We hope you found these tips helpful! If you have ideas for easy ways to make a little cash from blogging, please share!

Typepad 101: Add Circle Shaped Frames to Photos

November 19, 2013

Welcome to Typepad 101! Whether you want to add some new features to your blog's design, or simply make your blog more functional, Typepad 101 has you covered. This tip is suitable for bloggers at all levels using Basic Templates - no special tricks or upgrades needed! 

Swan bikes Swan

It might be hip to be square if you're Huey Lewis, but lately it seems that the circle is where it's at. Crisp geometric shapes abound in modern design, and you may have noticed circle shaped photos appearing recently on album covers, in magazines, and on Instagram. 

With just a little bit of coding magic, Typepad users can incorporate this fun trend into their blog design. Today, we'll show you how to add circular photos to your Sidebar, your SnapWidget, and your blog posts. You can see these projects in action on my test blog, Mary Mary, Quite Contrary

These projects work best with square-shaped images. Instagram photos are perfect for this kind of project, but you can use any image you like. Just crop the image into a square shape using Typepad's built-in image editing options or crop it before uploading using your favorite design software. If you don't have design software installed on your computer, check out Pic Monkey, a free and easy online tool for editing photos. 

  Circle shaped profile photo and sidebar image

 

Add Circle Shaped Photos to Your Sidebar

Maybe you'd like to add a different photo to your blog's sidebar, or even a linked image? Follow these directions to hook your Sidebar up with as many circle shaped images as you like. 

  1. Upload your image to your blog's File Manager at Library > File Manager. 
  2. Copy the url from your image by right clicking on the link in your File Manager. Paste the link into a plain text editor (e.g. Notepad, TextEdit) for future reference.
  3. Go to Design > Content, and select the module titled "Embed your own HTML" from the center column. Click "Add this module".  
  4. A window will pop up. Give the module a custom title so that you can locate it easily in the future. Add the following code to the HTML field:

    <a style="display: inline;" href=""><img style="width: 200px; height: 200px; border-radius: 200px;" title="Swan" src="http://mmcnallysay.typepad.com/.a/6a0192aafac0cc970d019b0006d8
    b0970b
    -200wi" alt="Swan" /></a> 

  5. Replace the image url with the one from your own image (highlighted in yellow). You can change the size of the image by changing the width, height, and border-radius indicators (highlighted in blue.)
  6. Click "OK" to close the window. Drag and drop the module to its desired position in the sidebar.
  7. Click "Save Changes" to finish up.

 

Add a Circle Shaped Frame to Your SnapWidget

We've shared a few tutorials recently showing you how to incorporate Instagram photos into your blog. Using SnapWidget's grid or slideshow style widgets, you can display the latest photo from your feed or your favorite hashtag. This tutorial will show you how to add a circle shaped frame to the widget, giving it a little extra style. 

  1. Start by creating a Grid type or Slideshow type SnapWidget at SnapWidget.com
  2. Grab the code for the widget, and paste it into a plain text editor (e.g. Notepad, TextEdit) for later use.
  3. Go to Design > Content and select the "Embed Your Own HTML" module from the center column. Click "Add this module". Rename the module so that it will be easy to find later. 
  4. Paste the code for the SnapWidget into the window, change the width and height values to your desired width (SnapWidget will have added an extra 5px to the value you input on their site), then add the following code right after the height tag (height:200px):

    ; border-radius: 200px;

  5. Change the value of the border-radius tag (highlighted in blue) to match the size of your SnapWidget. 
  6. Click "OK" to close the window. Drag and drop the module to its desired position in the sidebar. Click "Save Changes" to finish up.

Here's what my code looked like for a 200 pixel SnapWidget:

SnapWidget with a Circle Shaped Frame

Add a Circle Shaped Image to a Blog Post

Of course, you might also want to add a framed photo to a blog post. Adding a circle shaped frame is quick and easy. By adding just one line of code, you can add a striking visual element to your post. 

4687920065_872d0c2558_b

  1. Create a blog post on the Compose Page. Add all the post's text before adding your image. 
  2. Insert an image into your blog post using the Insert Image tool in the Rich Text Toolbar.
  3. Switch over to the HTML tab, then locate the code for the inserted image. It should look something like this:

     <a style="display: inline;" href="http://aviary.blob.core.windows.net/k-mr6i2hifk4wxt1dp-13110621/35917edc-0ec3-42f8-9439-9d58395e6971.jpg"><img title="4687920065_872d0c2558_b" src="http://mmcnallysay.typepad.com/.a/6a0192aafac0cc970d019b00be49ac970b-500wi" alt="4687920065_872d0c2558_b" /></a>

  4. Insert the following code before the line beginning with src=

    <img style="width: 500px; height: 500px; border-radius: 500px;" 

  5. Replace the values for the width, height, and border-radius tags (highlighted in blue) to match the images width. 
  6. Switch back to the Rich Text tab to check out the changes you've made.

Here's what my code looked like when adding a 400 pixel photograph:

Adding a Circle Shaped Photo to a blog post

We hope you'll have fun adding circle shaped frames to your blog. If you have any questions about this tutorial, or if you want to share a link to a post including circle shaped images, please hit us up in the comments!

Typepad 101: Use surveys to poll your blog readers

October 29, 2013

Welcome to Typepad 101! Whether you want to add some new features to your blog's design, or simply make your blog more functional, Typepad 101 has you covered. The tip is suitable for bloggers at all levels - no special tricks or upgrades needed.

From time to time on your blog, you may want to take the temperature of your readership or get input from your blog's community. Surveys and polls are a quick way to see what people think. You can ask your readers what movie you should see this weekend, get ideas of what they want to see more of on your blog, or anything you want to know!

There are many great third-party tools available that guide you through the process of making a survey. SurveyMonkey, Polldaddy, and Google Drive Forms all offer free survey generators and tools to track the responses you receive. (We have detailed information on using Google Drive Forms in the Knowledge Base.)

Simply go to the site you wish to use and create a new survey or form. You'll be guided through the process of adding questions (multiple choice, essay, rating, etc.) and be able to preview the result as it will appear on your blog.

After configuring the survey form, you'll be provided with the code to embed the survey within your blog. Look for the embed on website option to get the code which will work best on your Typepad blog. You can add the survey to your blog post or sidebar module.

To add the survey to a post, you'll need to use HTML > Convert Line Breaks or Markdown mode when composing your post. If you prefer to work in Rich Text, it is best to complete the rest of your post before adding the survey code as you won't be able to switch back to Rich Text. Click on the HTML tab in the editor, open the HTML tab drop-down menu, and select Convert Line Breaks (recommended) or Markdown. Paste the code for the survey in the post where you want the survey to appear. You can use the Preview button to see how the survey will appear on your blog, instead of switching to Rich Text. Click Publish when you are ready for your survey to go live! The same steps can be used for adding a survey to a Page.

If you don't see your survey when previewing your post, don't fret! The survey will display on your published blog.

To add the survey to the sidebar of your blog, you can use the Embed Your Own HTML module. You'll want to make sure to select a narrow width for your survey when configuring it to fit the sidebar. Go to Design > Content in Typepad, select the Embed Your Own HTML module, and click Add This Module. Paste the code for the survey in the pop-up window and click OK. After rearranging the module in the sidebar, click Save Changes to update your blog.

Check out the survey we created using Polldaddy below and let us know what you think!

Typepad 101: Hosting A Giveaway

October 10, 2013

Welcome to Typepad 101! Whether you want to add some new features to your blog's design, or simply make your blog more functional, Typepad 101 has you covered. This tip is suitable for bloggers at all levels using Basic Templates - no special tricks or upgrades needed!

A great way to draw attention to your blog and gain new followers is by hosting a giveaway.  The prize can be anything from an Amazon Gift card to an iPad.  It is also great extra promotion if you have paid sponsors and advertisers.  As bloggers, we may be contacted occassionally by companies looking for extra promotion. Retailers are starting to acknowledge the reach bloggers have on potential customers. 

Of course don't just give away any ol' prize. If you're a foodie blog, a KitchenAid food processor will cater to your readers more than Black & Decker Hammer Drill (though  may still come in handy some time....I digress.) The same as reviewing a product, you want your giveaway to mesh well with your blog - entice your readers, make them want it, make them tweet about it, make them share it on their Facebook.

Rafflecopter is a great tool that helps make hosting a giveaway easy.  Once you plug in what the entry requirements are, it will give you a code to paste on your site similiar to this: 

Screen Shot 2013-09-07 at 12.22.39 PMSome things to keep in mind when hosting a giveaway: 

-Give clear instructions on how to enter (ie: leave a comment, tweet giveaway and share the URL in separate comment, pin giveaway and share URL, etc.)

-Is the contest open globally or just residents in the US & Canada?  If the prize is being shipped, this could be a factor in who can enter.

-Include how long the giveaway will last and when will be the last day to enter - no ifs, ands or buts about it.

- Promote! Share it on your Social Media platforms and use this as a way to gain more followers. A lot of giveaway hosts would include additional entries from readers if they follow them on Twitter, Facebook, etc.

- In addition to your blog post announcing the giveaway, you may want to add a link to your Sidebar right where the reader's eye can see it and are reminded to enter. 

- Make sure you're legit.  There are still rules and regulations involved when hosting a giveaway by Federal and in some cases, the State.  Here is a good article that breaks it down for you.

As word gets out on your giveaway, new people will discover your blog and will want to come back!

Typepad 101: Using Hashtags to Crowdsource Instagram Content for Your Blog

October 01, 2013

Welcome to Typepad 101! Whether you want to add some new features to your blog's design, or simply make your blog more functional, Typepad 101 has you covered. This tip is suitable for bloggers at all levels using Basic Templates - no special tricks or upgrades needed!

Like almost everyone else with a smart phone and an exhibitionist streak, we love Instagram and are always looking for ways to incorporate our photos into our blogs. In the past, we've talked about how to add your own Instagram photos to your blog's Sidebar, and we've even talked about cross-posting from Instagram to your Typepad blog automatically. Today, we're going to talk about pulling photos with a specific #hashtag into your blog's Sidebar using a third-party service like Intagme's Instagram Widget.

Using hashtags to pull photos in to your blog can be fun and handy. For instance, if you run a food blog, displaying photos with the #food tag will pull in any photo tagged #food. The snaps could consist of photos you took yourself, or photos that someone else took; as long as they have the specified hashtag, they should fit the bill. That said, it's smart to do a quick reality check when picking a hashtag to call to your blog's Sidebar - you might want to avoid displaying photos with questionable content!

To get started, just head over to Intagme.com (or SnapWidget), and fill out the form there, (making sure to leave the Username field blank if you want photos from all users and adding a username if you only want your photos with the specific tag), and filling in the hashtag field with the tag of your choice. The rest of the fields depend on your specific layout and how you want the photos to display:

Form2

Next, you can click the Preview button to see how your photos will look on your blog, or just click the "Get Code" button to retrieve your code:

Form

Highlight and copy the code provided, then head on over to your Typepad account.

Next, choose your blog and click to Design > Content, and choose an Embed Your Own HTML module from the middle menu, then click the button on the right to add it (we have more information about adding custom sidebar content here). Give your module a good title, then paste your code into the pop-up box, and click OK.

Form

Drag your module and drop it wherever you'd like to see your photos appear on your Sidebar, and save your changes. Your new widget will be displayed on your Sidebar like you see on the left here at The Ruckus, a music blog that uses the hashtag #xotheruckus to pull in music related photos that the writers and blog readers have snapped:

Form

Super easy, right? It's a great way to pull in content from around the web (and around the world)!

Do you have a favorite way to use Instagram? Tell us about it in the comments!

Typepad 101: Embedding posts from social media sites

September 18, 2013

Social media giants like Facebook, Twitter, Pinterest and Google+ have started offering code you can use to embed posts from those sites onto your blog. The proess is super easy!

First, find the embeddable code for the service you're using. We'll outline how to find the code for Facebook, Twitter, Google+ and Pinterest.

Facebook

Click on the little down arrow above a post and look for Embed Post.

Facebookembedlink
That will open a window with the embed code at the top for you to copy and a preview of how the post will look when it's on your blog.

Facebookcode

Twitter

Click on the More link under a Tweet and click Embed Tweet.

Twitterembedlink
Like Facebook, this will open a window where you can copy the code for the post and see a preview.

Twittercode

Google+

From your Google+ Profile or Page, select a post, and look for the arrow at the top right of the window. Click the arrow, then choose Embed Post.

Embedgplus1
Next, copy the block of code provided by Google+, and click Done.

Embedgplus2

Pinterest

Click on a pin to open it and look for the arrow at the top right of the window. Then click on the Embed link.

Pinwindow

Pin codeYou will then see a Widget Builder page with code for the specific pin. This is the code you'll embed in your blog post. Under that, look for Load the JavaScript. Copy the code from there and embed it in your blog's sidebar. You only need to do this step once. Make sure to come back to the Widget Builder page after you do that to copy the code for your post.

Adding the Code in Typepad

These steps are simple but may be different from how you're used to composing. We're basically using the Compose page as a plain text editor so the code can display as expected on the blog.

  1. Open the Compose page
  2. Give your post a title and add in any content you want to have included in the post before embedding the social media post code.
  3. When you're ready to paste in your code, click on the HTML tab at the top of the editor.
    Htmltab
  4. Click on the HTML tab again to bring up the menu.
  5. Choose Convert Line Breaks.
  6. Paste in the code where you want it to show in your post.
    Convertlinebreaks
  7. Publish the post without switching back to Rich Text.

When you view the post on your blog, you should see the post embedded. Easy!

Welcome

Need help?

Follow us!

Typepad on FacebookTypepad on TwitterTypepad on Google+Typepad on PinterestSubscribe to Everything Typepad

Like us!

Typepad Newsletter

Still having trouble? Contact Support.