Embedding social media widgets such as Facebook, Twitter, Pinterest, Google+1, Addthis

If you're looking to add buttons or widgets for Facebook, Twitter, Pinterest and Google + check out our Social Networking Widgets page first before taking a look at this page.

If the social media button or widget that you want on your website isn't a standard Zeald component, you may be able to find information about embedding it below.


Warning: Embedding third party services is not officially supported and is only recommended for advanced users. You can easily break your website doing this, and if you require Zeald to help fix the issue then it may attract additional charges. 
 
If you require assistance or find a problem with the source code given by a third party, we are generally unable to assist and you would need to contact the third party directly for assistance, or obtain a customisation to embed this source.

You can follow the instructions below to embed Facebook and Twitter accounts into your website, or you may prefer to use our Social Networking Widget
 

Addthis share widget

"Addthis" combines all of the most important share buttons in just one widget. If you create an account for yourself, it will also track and provide comprehensive reports for your "share" analytics.
 

Where to display your share badges

The point of share buttons is to make it easy for your users to pass on the link of a page to tell their friends about some information they might be interested in.

Share buttons should be displayed on all your "interesting" pages that you think users would want to share.
In particular, the homepage, about us page, service pages, product pages and especially blog posts.

The buttons should all sit alongside one another if you offer more than one. One of the quickest easiest way to setup and display all these "share" buttons together is to use the "Addthis" widget.
 

Use the Zeald social media component to setup Addthis

Zeald provide a quick and easy method for setting up the Addthis widget on your website using the Social media component.
 

Customise Addthis


You can customise your Addthis widget to:
  • edit the display of your share buttons
  • include Google +1 button
  • have your own account to measure share metrics

To do this:

  1. Go to http://www.addthis.com/ and click Get Addthis
  2. Create an account
  3. Choose your share buttons
  4. Copy the snippet of HTML code in the box, and paste into your website as described in "How to embed code give by third parties into your site"
  5. add the code for the Google +1 button

Facebook

Facebook provides a number of widgets that you can paste into your website
  1. Go to http://www.facebook.com/facebook-widgets/ and click on the widget you want
  2. Get the code for the widget: If asked to choose between "Blogger", "Typepad" and "Other" get the code for "Other". This will show a snippet of HTML code in the box, which you should copy-and-paste into your website as described in "How to embed code give by third parties into your site"

Twitter

Twitter also provides ‘buttons’ or icons that you can paste into your website
  1. Go to http://help.twitter.com/entries/81218-how-to-link-from-your-website-to-your-twitter-account and click through to the buttons available
  2. Simply click on the button you want and copy the HTML code that pops up. Then paste the code-and-paste it into your website as described in "How to embed code give by third parties into your site"
As of June 2013, the Twitter feed plugin in use on some Zeald sites stopped functioning due to a Twitter update. If logged in as an administrator, you will receive the following error message shown within the twitter feed component:

twittererror

To fix this, click on the 'edit component' pencil in the top right hand corner of the component, and enter your Twitter username and widget ID in the fields provided.

accountsettings

When functioning correctly, it should look similar to this:

twitterproper
 

Pinterest

Pinterest provides "Pin It Button for Web Sites" which you can embed into your product pages. Please note any component you add to one product will be added to all products so you'll need to set it up fairly generically.
  1. Go to http://pinterest.com/about/goodies/ and fill out the details in the Pin it Button section. This will generate some HTML code.
  2. Go to a product page in live edit and click on the "+ Add Component" on the top right.  Select the "Editable Content Block", copy and paste the embed code from the Pinterest website and click the "Embed Raw HTML Code" button in the richtext editor: insert_html_code.png - more instructions here:  "How to embed code give by third parties into your site"
The "Add this" component has the option of people to use Pinterest so you may wish to consider using this instead.

To enable Pinterest Analytics Tracking, please follow the instructions on this page

 

Google +1

You can add the +1 button yourself to individual pages
  1. Get code from Google http://www.google.com/intl/en/webmasters/+1/button/index.html
  2. Paste head code in to the "Extra HTML tags for document head tag (eg meta tags)" field under the "content" section of the "preferences" tab
  3. Paste the button code anywhere on the page they would like to using source mode, the code component or the embed feature of the rich text editor
For the blog, the +1 button really belongs with the "Add this" buttons. This requires an upgrade to our blog add-on.
 

Adding these widgets to the template so they appear automatically on every page of your website

If you want the button to appear on all pages, you should email the code to Zeald support and let us know where you would like it to appear in the template. IE the footer or the header and we will help you with it.