Social plugins let you see what your friends have liked, commented on or shared on sites across the web.

1. D A T A C O L L E C T E D F R O M :
H T T P : / / D E V E L O P E R S . F A C E B O O K . C O M / D O C S / P L U G I N S /
FACEBOOK DEVELOPERS
– SOCIAL PULGIN
Presentation Created By Cygnis Media

2. LIKE BUTTON
• The Like button lets
users share pages
from your site back to
their Facebook profile
with one click.
http://developers.faceb
ook.com/docs/referenc
e/plugins/like/
Get the code
There are three ways to implement the
Like button: using HTML5, XFBML (a
special Facebook markup) and iframe.
• HTML5 and XFBML versions are more
versatile but require use of
the Facebook SDK for
JavaScript (snippets to use this are
included in the configurator. These
versions do the following:
• Resize height according to whether
there are profile pictures to display
• Let your app use the JavaScript SDK
to listen for edge.create events so
that it knows in real time when
someone clicks the Like button
• Enable the comment box that
appears after clicking the Like button.
Presentation Created By Cygnis Media

3. SEND BUTTON
• The Send button
allows your users to
easily send your
content to their
friends.
http://developers.fac
ebook.com/docs/refe
rence/plugins/send/
Get a combined Like
and Send button
• You can implement the send
button on its own, but if you
also want a Like button on
your site, you can simply
add send=true as an attribute
to the XFBML version of the
Like button (or data-
send="true" to the HTML5
version). This will render the
Like button and Send button
next to each other. Find the
documentation on the Like
button page.
Presentation Created By Cygnis Media

4. FOLLOW BUTTON
• The Follow button
allows people to
subscribe to other
Facebook users
directly from your site.
(This was previously
called the Subscribe
Button.)
http://developers.face
book.com/docs/refere
nce/plugins/follow/
Get your Follow button
• There are two Follow button
implementations: XFBML and
Iframe. The XFBML (also
available in HTML5-compliant
markup) version is more
versatile, and requires use of
the JavaScript SDK. The XFBML
dynamically re-sizes its height
according to whether there
are profile pictures to display.
Presentation Created By Cygnis Media

5. COMMENT BOX
• The Comments
plugin lets users
comment on any
piece of content on
your site.
http://developers.fac
ebook.com/docs/refe
rence/plugins/comm
ents/
Social Relevance and
Distribution
• Friends and people who like
the Page can then respond to
the discussion by liking or
replying to the comment
directly in the news feed or in
the Comments box on your site.
Threads stay synchronized
across Facebook and on the
Comments box on your site
regardless of where the
comment was made.
Presentation Created By Cygnis Media

6. SHARE DIALOG
• The Share Dialog lets
users add a
comment and
customize the title
and thumbnail of the
link they share.
http://developers.face
book.com/docs/refere
nce/plugins/share-links/
• Facebook offers an easy-to-use
Share dialog that you can
include on your web page or in
your mobile web app so people
can share links on their timeline,
in groups, or to their friends via a
Facebook Message. People
open the Share dialog by
clicking a link on your website,
which opens a new window to a
special URL on Facebook.
Presentation Created By Cygnis Media

7. ACTIVITY FEED
• The Activity Feed
plugin shows users
what their friends are
doing on your site
through likes and
comments.
http://developers.face
book.com/docs/refere
nce/plugins/activity/
• The plugin is filled with activity
from people's friends. If there isn't
enough friend activity to fill the
plugin, it is backfilled with
recommendations. If you set
the recommendations param to
true, the plugin is split in half,
showing friends activity in the top
half, and recommendations in
the bottom half. If there is not
enough friends activity to fill half
of the plugin, it will include more
recommendations.
Presentation Created By Cygnis Media

8. LOGIN BUTTON
• The Login Button
shows profile pictures
of the user's friends
who have already
signed up for your site
in addition to a login
button.
http://developers.face
book.com/docs/refere
nce/plugins/login/
• When an app or website displays
the login button, it provides
people a way to log in and also
shows the profile pictures of their
friends who have already logged
in for the app or site.
• You can specify the maximum
number of rows of faces the
button displays. The plugin
dynamically sizes its height. For
example, if you specify a
maximum of four rows of faces,
and there are only enough
friends to fill two rows, the height
of the plugin will be only what is
needed for two rows of faces.
Presentation Created By Cygnis Media

9. RECOMMENDATIONS BOX
• The
Recommendations
plugin gives users
personalized
suggestions for pages
on your site they
might like.
http://developers.face
book.com/docs/refere
nce/plugins/recommen
dations/
• The recommendations box shows
personalized recommendations
to people using your app or
website. Since the content is
hosted by Facebook, the plugin
can display personalized
recommendations whether or
not people viewing them have
logged into your site. To
generate the recommendations,
the plugin considers all the social
interactions with URLs from your
site. The plugin gives preference
to and highlights objects for
friends of people logged in to
Facebook.
Presentation Created By Cygnis Media

10. LIKE BOX
• The Like Box enables
users to like
your Facebook
Page and view its
stream directly from
your website.
http://developers.face
book.com/docs/refere
nce/plugins/like-box/
• The like box is a social plugin
that enables Facebook
Page owners to attract and
gain likes from their own
website. The like box enables
people using your app or
website to do the following:
• See how many people like the
Page, and which of their
friends like it, too.
• Read recent posts from the
Page.
• Like the Page with one click,
without needing to visit the
Page.
• The minimum supported plugin
width is 292 pixels.
Presentation Created By Cygnis Media