There are three ways you can add the Tweet Button to your webpage.
Using javascript
The easiest way to add the Tweet Button to your website is to use javascript. This method requires adding a line of javascript and an HTML anchor to your webpage. Using this method you can customise the Tweet Button using data attributes and query string parameters.
Notice how the anchor element has a class of twitter-share-button. This is required for the Tweet Button javascript to know which anchor elements to convert to buttons.
Tweet
Using an iframe
If you prefer you can add a Tweet Button using an iframe. When using this method you have to use query string parameters to customise the Tweet Button’s behavior.
Build your own
If you want to be able to customise the way the Tweet Button looks you will want to use this basic format. When using this method you have to use query string parameters to customise the Tweet Button’s behavior as well as handle the popup of the Share Box.
The dimensions of the Share Box are listed in our Tweet Button FAQ.
Tweet
Properties
There are several properties for the Tweet Button which allow you to customise its behavior. Whilst the Tweet Button will work without any of this properties, using them allows you to provide default values for the user to Tweet. If the query string, data source or link source are not provided the Tweet Button will use the default values available from the web page and referrer information.
To learn more about each property and to see ways you can use them check the examples further down this page.
Properties which can be used by all types of Tweet Button
The properties in this table can be used by the javascript, iframe and build your own Tweet Buttons. Each property is a query string parameter for the http://twitter.com/share URL.
Query String Parameter Description
url URL of the page to share
via Screen name of the user to attribute the Tweet to
text Default Tweet text
related Related accounts
count Count box position
lang The language for the Tweet Button
counturl The URL to which your shared URL resolves to
With Regards,
Er.Animesh Nanda
Software Developer,
Manusis Technology Pvt. Ltd.
Bengaluru,Karnataka,INDIA.
Wednesday, June 29, 2011
Adding facebook like button to a web page
The Like button lets a user share a content with friends on Facebook. When the user clicks the Like button on a site, a story appears in the user's friends' News Feed with a link back to that website.
There are two Like button implementations: XFBML and Iframe. The XFBML version is more versatile, but requires use of the JavaScript SDK. The XFBML dynamically re-sizes its height according to whether there are profile pictures to display, gives you the ability (through the Javascript library) to listen for like events so that you know in real time when a user clicks the Like button, and it always gives the user the ability to add an optional comment to the like. If users do add a comment, the story published back to Facebook is given more prominence.
Attributes
href - the URL to like. The XFBML version defaults to the current page.
send - specifies whether to include a Send button with the Like button. This only works with the XFBML version.
layout - there are three options.
standard - displays social text to the right of the button and friends' profile photos below. Minimum width: 225 pixels. Default width: 450 pixels. Height: 35 pixels (without photos) or 80 pixels (with photos).
button_count - displays the total number of likes to the right of the button. Minimum width: 90 pixels. Default width: 90 pixels. Height: 20 pixels.
box_count - displays the total number of likes above the button. Minimum width: 55 pixels. Default width: 55 pixels. Height: 65 pixels.
show_faces - specifies whether to display profile photos below the button (standard layout only)
width - the width of the Like button.
action - the verb to display on the button. Options: 'like', 'recommend'
font - the font to display in the button. Options: 'arial', 'lucida grande', 'segoe ui', 'tahoma', 'trebuchet ms', 'verdana'
colorscheme - the color scheme for the like button. Options: 'light', 'dark'
ref - a label for tracking referrals; must be less than 50 characters and can contain alphanumeric characters and some punctuation (currently +/=-.:_). The ref attribute causes two parameters to be added to the referrer URL when a user clicks a link from a stream story about a Like action:
fb_ref - the ref parameter
fb_source - the stream type ('home', 'profile', 'search', 'other') in which the click occurred and the story type ('oneline' or 'multiline'), concatenated with an underscore.
Open Graph Tags
Open Graph tags are meta tags that you add to the head of your website to describe the entity your page represents, whether it is a band, restaurant, blog, or something else.
An Open Graph tag looks like this:
meta property="og:tag name" content="tag value"
If you use Open Graph tags, the following six are required:
og:title - The title of the entity.
og:type - The type of entity. You must select a type from the list of Open Graph types.
og:image - The URL to an image that represents the entity. Images must be at least 50 pixels by 50 pixels. Square images work best, but you are allowed to use images up to three times as wide as they are tall.
og:url - The canonical, permanent URL of the page representing the entity. When you use Open Graph tags, the Like button posts a link to the og:url instead of the URL in the Like button code.
og:site_name - A human-readable name for your site, e.g., "IMDb".
fb:admins or fb:app_id - A comma-separated list of either the Facebook IDs of page administrators or a Facebook Platform application ID. At a minimum, include only your own Facebook ID.
With Regards,
Er.Animesh Nanda
Software Developer,
Manusis Technology Pvt. Ltd.
Bengaluru,Karnataka,INDIA.
There are two Like button implementations: XFBML and Iframe. The XFBML version is more versatile, but requires use of the JavaScript SDK. The XFBML dynamically re-sizes its height according to whether there are profile pictures to display, gives you the ability (through the Javascript library) to listen for like events so that you know in real time when a user clicks the Like button, and it always gives the user the ability to add an optional comment to the like. If users do add a comment, the story published back to Facebook is given more prominence.
Attributes
href - the URL to like. The XFBML version defaults to the current page.
send - specifies whether to include a Send button with the Like button. This only works with the XFBML version.
layout - there are three options.
standard - displays social text to the right of the button and friends' profile photos below. Minimum width: 225 pixels. Default width: 450 pixels. Height: 35 pixels (without photos) or 80 pixels (with photos).
button_count - displays the total number of likes to the right of the button. Minimum width: 90 pixels. Default width: 90 pixels. Height: 20 pixels.
box_count - displays the total number of likes above the button. Minimum width: 55 pixels. Default width: 55 pixels. Height: 65 pixels.
show_faces - specifies whether to display profile photos below the button (standard layout only)
width - the width of the Like button.
action - the verb to display on the button. Options: 'like', 'recommend'
font - the font to display in the button. Options: 'arial', 'lucida grande', 'segoe ui', 'tahoma', 'trebuchet ms', 'verdana'
colorscheme - the color scheme for the like button. Options: 'light', 'dark'
ref - a label for tracking referrals; must be less than 50 characters and can contain alphanumeric characters and some punctuation (currently +/=-.:_). The ref attribute causes two parameters to be added to the referrer URL when a user clicks a link from a stream story about a Like action:
fb_ref - the ref parameter
fb_source - the stream type ('home', 'profile', 'search', 'other') in which the click occurred and the story type ('oneline' or 'multiline'), concatenated with an underscore.
Open Graph Tags
Open Graph tags are meta tags that you add to the head of your website to describe the entity your page represents, whether it is a band, restaurant, blog, or something else.
An Open Graph tag looks like this:
meta property="og:tag name" content="tag value"
If you use Open Graph tags, the following six are required:
og:title - The title of the entity.
og:type - The type of entity. You must select a type from the list of Open Graph types.
og:image - The URL to an image that represents the entity. Images must be at least 50 pixels by 50 pixels. Square images work best, but you are allowed to use images up to three times as wide as they are tall.
og:url - The canonical, permanent URL of the page representing the entity. When you use Open Graph tags, the Like button posts a link to the og:url instead of the URL in the Like button code.
og:site_name - A human-readable name for your site, e.g., "IMDb".
fb:admins or fb:app_id - A comma-separated list of either the Facebook IDs of page administrators or a Facebook Platform application ID. At a minimum, include only your own Facebook ID.
With Regards,
Er.Animesh Nanda
Software Developer,
Manusis Technology Pvt. Ltd.
Bengaluru,Karnataka,INDIA.
Subscribe to:
Posts (Atom)