This page requires a Javascript enabled browser
<< Back | Main Menu | FAQ | [?]

Social Networking

Add Facebook Like Boxes/Buttons, Twitter Follower Counts, Tweet buttons, Google +1 buttons.

CSS/JS files (add code to <HEAD> section):

?
1
NO JS/CSS files required.

Google +1 Button

View code:

?
1
2
3
4
5
6
7
8
9
10
<!-- Place this tag in your head or just before your close body tag -->
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<!-- Place this tag where you want the +1 button to render -->
<div class="g-plusone" data-size="medium" data-annotation="inline" data-href="http://www.google.com"></div>
Parameters:
---------------------
size (small/medium/tall) - Google +1 button size
data-annotation (none/inline) - show text "xx People recommend this on Google"
width - Google +1 layout width
data-href - page url to Google +1

Facebook Likes Button

View code:

?
1
2
3
4
5
6
7
8
9
10
<!-- DC Facebook Likes Start -->
<iframe src="http://www.facebook.com/plugins/like.php?href=http://www.facebook.com&send=false&layout=standard&width=250&show_faces=false&action=like&colorscheme=light&font&height=35" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:35px;" allowTransparency="true"></iframe>
<!-- DC Facebook Likes End -->
Parameters:
---------------------
href - URL of page to like
layout (standard/button_count/box_count) - button layout
width - width of FB likes layout
height - height of FB likes layout
colorscheme (light/dark) - FB color scheme

Facebook Likes Box

View code:

?
1
2
3
4
5
6
7
8
9
10
11
12
<!-- DC Facebook Likes Box Start -->
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/USERNAME&width=250&height=258&colorscheme=light&show_faces=true&border_color&stream=false&header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:300px;" allowTransparency="true"></iframe>
<!-- DC Facebook Likes Box End -->
Parameters:
---------------------
href - URL of FB page
colorscheme (light/dark) - FB color scheme
show_faces (true/false) - show FB faces
stream (true/false) - show FB activity stream
header (true/false) - show FB header
width - width of FB likes layout
height - height of FB likes layout

Twitter Follow + Count

View code:

?
1
2
3
4
5
6
7
8
9
10
11
<!-- DC Twitter Count Start -->
<iframe allowtransparency="true" frameborder="0" scrolling="no"
    src="http://platform.twitter.com/widgets/follow_button.html?screen_name=MICROSOFT&show_count=true&show_screen_name=true&lang=en"
    style="width:290px; height:20px;"></iframe>
<!-- DC Twitter Count End -->
Parameters:
---------------------
screen_name - twitter username
&show_count (true/false) - show twitter follower count
&show_screen_name (true/false_ show twitter username when rendering button
&lang (en/fr) - change language (en = english/default)

Twitter - Tweet

View code:

?
1
2
3
4
5
6
7
<!-- DC Twitter Tweet Start -->
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://yourdomain.com/page-to-tweet-about.html">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="http://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<!-- DC Twitter Tweet End -->
Parameters:
---------------------
data-url - Page to share/tweet. Remove this parameter to tweet the current/referred page.

pInterest Follow Me

Follow Me on Pinterest

View code:

?
1
2
3
4
5
6
<!-- DC pInterest Start -->
<a href="http://pinterest.com/USERNAME/"><img src="http://passets-cdn.pinterest.com/images/about/buttons/follow-me-on-pinterest-button.png" width="169" height="28" alt="Follow Me on Pinterest" /></a>
<!-- DC pInterest End -->
Parameters:
---------------------
username - pinterest username


© TemplateAccess