Drugs.com Widgets

Several widgets are available to enhance your blog, website or one of the many personal homepages like iGoogle. You can also follow us via Facebook or Twitter.

What's available

Drugs.com widgets for your blog or website
Drugs.com (RSS) widgets for iGoogle or Netvibes page
Drugs.com on Facebook
Drugs.com on Twitter (also FDA Alerts and New Drug Approvals)

Drugs.com widgets for your blog or website

Choose from the search or news widgets below to embed into your website. Select the appropriate options to generate the code to paste into your site. We will refresh the content automatically to keep it current and up-to-date.

Search widget

Step 1. Choose Theme

Drugs.com Theme
Box Theme
Clean Theme
No Theme (No CSS)

View advanced styling guide

Step 2. Copy and Paste the Code

Advanced Styling Guide

The best way to control the appearance of your Drugs.com widget is to choose the 'No Theme (No CSS)' option and then style the widget directly in your website CSS file.

As a reference for what CSS classes are available, the following code is the HTML source code of the widget after being generated by our Javascript:

This HTML code is for reference only and should not be copied. For proper functionality, be sure to use the code listed in Step 2 above.

As the above HTML demonstrates, almost every element has a specific CSS class associated with it, making every element easily accessible within your website's CSS file. You have full control over how the widget will appear on your website.

As an example, the following CSS will style the widget with a green border, green title and make the link text small:


				.ddc-widget-search {

				   border: 1px solid #6B5;

				}

				.ddc-widget-search-title {

				   padding: 4px;

				   background: #6B5;

				   color: #FFF;

				   font-weight: bold;

				}

				.ddc-widget-search-content {

				   padding: 4px;

				}

				.ddc-widget-search-link {

				   font-size: 11px;

				}

As a test, try copying and pasting the example CSS into your CSS file. Ensure you have chosen the 'No Theme (No CSS)' option and copied the widget code from Step 2 somewhere on your site.

If you come up with a design you feel is worthy of sharing with others, please contact us; we may add your theme to our list.

News Widget

Step 1. Choose News Source:

Step 2. Choose Theme:

Drugs.com Theme
Box Theme
Clean Theme
No Theme (No CSS)

View advanced styling guide

Step 3. Copy and Paste the Code

Advanced Styling Guide

The best way to control the appearance of your Drugs.com widget is to choose the 'No Theme (No CSS)' option and then style the widget directly in your website CSS file.

As a reference for what CSS classes are available, the following code is the HTML source code of the widget after being generated by our Javascript:

This HTML code is for reference only and should not be copied. For proper functionality, be sure to use the code listed in Step 3 above.

As an example, the following CSS will style the widget with a green border and green title:


				.ddc-widget-news {

				   border: 1px solid #6B5;

				}

				.ddc-widget-news-title {

				   padding: 4px;

				   background: #6B5;

				   color: #FFF;

				   font-weight: bold;

				}

As a test, try copying and pasting the example CSS into your CSS file. Ensure you have chosen the 'No Theme (No CSS)' option and copied the widget code from Step 3 somewhere on your site.

If you come up with a design you feel is worthy of sharing with others, please contact us; we may add your theme to our list.