Tuesday, November 2, 2010

Putting HTML from a outside sources into your blog

This article is about how to put HTML or Javascript code from 3rd parties into your blog.


Unlike some blogging tools, Blogger allows you to put HTML code from third-party sites that they are not integrated with (eg PayPal, Flickr, Amazon, Facebook, Twitter, LinkedIn), into your blog.   Note that the only code that you can use this way is HTML and Javascript: there is no way to add PHP, SQL or any other type of code.  (The only exception might be if you can host and execute this code elsewhere, and call it and receive output with Javascript - I haven't tried this, have no idea if it's possible in practice.).

If you have a layout or designer theme (ref   What type of theme do you have?), there are three ways to put outside code into your blog:
  • Option one:  In a widget/gadget.
    These can be placed in any location the Layout gives you access to - usually into the header, footer or sidebar.
  • Option two:  Inside a specific Post (or Page)
    This means that the effect of the code will be shown every time the post is viewed
  • Option three:  In the blog's layout theme
    This gives you most control over where and how the item appears, but is also the hardest.
These three options are described in detail in the sections below.

If you are using a dynamic theme, then you face more limitations:  you can put code into posts/pages for sure, but (for the moment anyway) there are limits to what gadgets can be added.   And editing your theme may be more challenging, because the theme-structure is so different.


    Warning:
    By letting us put 3rd-party code into our Blogger is giving us the responsibility for making sure that only code from trust-worthy sources is used.

    If you install code from unreliable sources, you may find that your blog is "hacked" in some way.

    Every time that someone wants you to install something to your blog, think very carefully about how much you should trust them.


    Option 1: Putting third party code in a gadget

    • Copy the code from the third-party site.
    • In Blogger, choose Layout > Add a Gadget > HTML-Javascript
      Note:  Use the gadget created by Blogger which is in the Basic list.  Currently you need to see to scroll down the list of gadget to see it. 
    • Paste the code into the Contents field.
    • Enter a title, if you want the gadget to have one
    • Press Save.  
    • Drag-and-drop the new gadget to where you want it to appear.
    • Save the layout

    Some sites either give you the HTML, and also button that will put their gadget (etc) directly into your blog.   I only use these type of buttons if the address bar in the screen that opens has an address starting with blogger.com:  if it has something else, then the third-party site may be collecting your Google account password along the way, so I would rather just copy and paste the code myself.
    .

    Option Two: Put third-party code inside a post

    • Copy the code from the third party site
    • Go to blogger and Edit the Post (or Page) that you want to put it on
    • Switch into HTML mode
    • Paste the code in at the place where you want the item to go.
      If you are not familiar with HTML, it may help to put in some marker text at the place where you want the product link while you're still in Compose mode.  Then switch to Edit HTML mode, find it and replace it with the third-part code.
    • Switch back to Compose mode
      This sometimes lets you see the 3rd party item within the post editor - although sometimes it just shows as a blank box, or even just as a blank line (I sometimes surround lines like this with some marker text, eg xxx, while I'm editing the post, to make sure I don't accidentally over-type of the code.
      If you forget to go back to Compose mode before you press Publish, you may get confused the next time you edit a post.


    Option Three: Put the third-party code into your theme

    You should only use this option if you are very familiar with how your theme works, and you accept the disadvantages of editing it.

    Also, be aware that for some third-parties, putting the code into your theme can over-ride controls that usually come with it (eg for AdSense, only displaying up to three ad-units and three link-units per screen).  For other types of code, the tweaks that are needed to make it work within Blogger may break the other parties terms-and-conditions (eg if they say you cannot change the code at all).   You need to weigh up the risks and issues involved for each individual third party.
    • Edit your theme in the usual way
    • Work out where exactly the code needs to go, and put it there.
    • Preview the change, to make sure it works
    • Save the theme




    Related Articles

    Editing your blog's theme:  advantanges and disadvantages

    Types of blogger theme

    Enabling a mobile theme for your blog

    Choosing which gadgets are shown on your mobile-theme view

    Blogger and other Google products

    Blogger and some key non-Google products

    Amazon integration with Blogger

    Putting Chitika ads onto your blog

    Share this Article

    URL:

    HTML link code:

    BB (forum) link code:

    Subscribe to Blogger-hints-and-tips

    FeedBurner will send a confirmation message. Click the verify link in it to start your subscription.

    Follow Me on Pinterest Subscribe to Blogger-HAT on Google + RSS subscription icon Follow BloggerHAT on Twitter

    36 comments:

    1. This helped! I was lost for about 1/2 day before I finally found this! thank you!

      ReplyDelete
    2. Thank you! I also spent a few hours trying to figure out how to change my background... after reading this the steps were easy to follow and had no problem!

      ReplyDelete
    3. Glad I was able to help, good luck with your blog.

      ReplyDelete
    4. thanks for the clear explanation

      ReplyDelete
    5. Thanks Dude, you r 1 of the good guys. Great Info, clear, concise & easy 2 understand by a dude like me, who don't know much bout computers

      ReplyDelete
    6. Hey thank you!! This is a great work-around for the bug in the 'Amazon Associates' tab in Monetize. I'm up and running now!

      ReplyDelete
    7. Sorted out my Blogger-Amazon links nice and easy, thanks for such a helpful blog.

      ReplyDelete
    8. Thank you so much. Very helpful blog. I was searching for right type of article like this for days to add links from amazon.

      ReplyDelete
      Replies
      1. Glad to help. I've got more info about adding Amazon links here: http://blogger-hints-and-tips.blogspot.com/2010/04/adding-amazon-associates-product-links.html

        Delete
    9. Thanks :) really useful and easy to follow, I now have two slideshows running on two different blogs:D

      ReplyDelete
    10. great article for newbies

      ReplyDelete
    11. I have been very frustrated in trying to add twitter button and a foodie penpals link to my blog on blogger. I have followed instructions from several help sites etc. but everything I cut and paste into the url in the add your own gadget always comes up with url contains illegal characters. any ideas?

      ReplyDelete
      Replies
      1. What type of gadget are you using - the HTML/Javascript one from Blogger is the one you should use.

        Delete
    12. I can't seem to get it to work at all... I am trying to add the Amazon Associates widget, but with no luck.

      ReplyDelete
    13. i've finally got a twitter feed on my blog - thanks so much :-)

      ReplyDelete
    14. Thank you for the detailed information! Great Help!

      ReplyDelete
    15. Hi!

      Great hints!, but I had a couple questions.

      So if I were to add a third party code in a gadget and inside a post, would it be secure? I read the highlighted part in purple, and it turned me away thinking the worst. Does this just depends if I allow someone to install something I'm not familiar with?

      Thank you for your help..

      ReplyDelete
    16. Thanks for the post. It was really helpful. I decided to add the code using the gadget option.

      ReplyDelete
    17. I'm trying to embed HTML code from MailChimp (an email sign up sheet) into my blog, and can't get it to work. I've tried to take other HTML code links OFF in order to make space for this new one, but nothing seems to work. The embedded image doesn't even show up. It's like it's not there. Please help!

      ReplyDelete
    18. Thanks so much!!! Especially for Option 2s "XXX" trick.

      ReplyDelete
    19. How did you add the "Related Articles" section to your blog?

      ReplyDelete
      Replies
      1. Hi Ken - I construct it manually at the end of every post. It takes a few minutes, but is the only way I know to ensure that the related posts really are about similar topics. Using labels is just too general - or too specific if they related post is not actually on the same topic.

        Delete
    20. so grateful, I used option 1, it worked...kisses

      ReplyDelete
    21. This method is not working the way it's supposed to. The Mailchimp form POPUP but half page down!!! So if you're visiting my page and the form popsup u'll see the page turning dark but u don't know what's going on until you scroll down. This sucks.
      Any solution??!!! Thank you.

      ReplyDelete
    22. Extremely helpful as there was nothing on Amazon Associates to show me how to add a gadget for my blog (I knew how to do it already but my memory is shocking!). Thanks for the tip.

      ReplyDelete
    23. I'm trying to joinh Google Search Console and verify my ownership of my blog by uploading an HTML code Google has provided for me. But it needs to appear as part of a URL, and the methods I've tried so far don't do that; I just get a message saying that that page on this blog doesn't exist (because there's no URL including the HTML code). Please, how do I make it so that a new page with its own URL including the HTML code is created when I upload the code?

      ReplyDelete
    24. Thanks for the post. It was really helpful. I decided to add the code using the gadget option.

      ReplyDelete
    25. From where we can get the third party advertisement code

      ReplyDelete
      Replies
      1. There are a few suggestions here: http://blogger-hints-and-tips.blogspot.com/2010/02/advertising-programmes.html

        But really it depends on your blog contents. For example on one blog i have good results with SheetMusicPlus.

        Delete
    26. I'm trying to joinh Google Search Console and verify my ownership of my blog by uploading an HTML code Google has provided for me. But it needs to appear as part of a URL, and the methods I've tried so far don't do that; I just get a message saying that that page on this blog doesn't exist (because there's no URL including the HTML code). Please, how do I make it so that a new page with its own URL including the HTML code is created when I upload the code?

      ReplyDelete
    27. Choose the URL prefix property type, and then the HTML Tag verification method.

      Then edit your theme and place the tag they give you just before the end of heading command.

      ReplyDelete
    28. Hey! I'm trying to add a sign up form from mailchimp. I designed the signup form and when I pasted the code in blogger, it worked but there is no designing. It's just plain. I did the designing in form builder section of mailchimp but since there was no option to add that to my website, I simply connected the pre-built form from embedded form section of mailchimp. Can anybody help me?

      ReplyDelete