Fork me on GitHub

Django Social Widgets Demo. Show source on GitHub. Show Documentation

Facebook

Minimal Code
Copy to clipboard
{% social_widget_render "facebook/likebox.html" href="https://www.facebook.com/FacebookDevelopers" %}
Full Code
Copy to clipboard
                    {% social_widget_render "facebook/likebox.html" locale="en_US" app_id=12345678 href="https://www.facebook.com/FacebookDevelopers" height=300 colorscheme="light" force_wall=False header=True show_border=True show_faces=True stream=False width=300 %}
Show widget settings
Setting Description Default
locale Used to determine the language of the widget. Django locale (en_US by default)
app_id Facebook Application ID. None
colorscheme The color scheme used by the plugin. Can be "light" or "dark". "light"
force_wall For "place" Pages (Pages that have a physical location that can be used with check-ins), this specifies whether the stream contains posts by the Page or just check-ins from friends. False
header Specifies whether to display the Facebook header at the top of the plugin. True
height The height of the plugin in pixels. The default height varies based on number of faces to display, and whether the stream is displayed. With stream set to True and 10 photos displayed (via show_faces) the default height is 556px. With stream and show_faces both False, the default height is 63px. Varies, see left.
href The absolute URL of the Facebook Page that will be liked. This is a required setting. None
show_border Specifies whether or not to show a border around the plugin. True
show_faces Specifies whether to display profile photos of people who like the page. True
stream Specifies whether to display a stream of the latest posts by the Page. False
width The width of the plugin in pixels. Minimum is 292. 300

Documentation: https://developers.facebook.com/docs/plugins/like-box-for-pages

Minimal Code
Copy to clipboard
       {% social_widget_render "facebook/follow_button.html" href="https://www.facebook.com/zuck" %}
Full Code
Copy to clipboard
       {% social_widget_render "facebook/follow_button.html" href="https://www.facebook.com/zuck" locale="en_US" app_id=12345678 width=300 height=100 colorscheme="light" kid_directed_site=False layout="standard" show_faces=False %}
Show widget settings
Setting Description Default
locale Used to determine the language of the widget. Django locale (en_US by default)
app_id Facebook Application ID. None
colorscheme The color scheme used by the plugin. Can be "light" or "dark". "light"
href The Facebook.com profile URL of the user to follow. None
kid_directed_site If your web site or online service, or a portion of your service, is directed to children under 13 you must enable this "False"
layout Selects one of the different layouts that are available for the plugin. Can be one of "standard", "button_count", or "box_count". See the FAQ for more details. "standard"
show_faces Specifies whether to display profile photos below the button (standard layout only). You must not enable this on child-directed sites. "False"
width The width of the plugin. The layout you choose affects the minimum and default widths you can use, please see the FAQ for more details. Depends on layout

Documentation: https://developers.facebook.com/docs/plugins/follow-button

Minimal Code
Copy to clipboard
       {% social_widget_render "facebook/embedded_post.html" href="https://www.facebook.com/FacebookDevelopers/posts/10151471074398553" %}
Full Code
Copy to clipboard
       {% social_widget_render "facebook/embedded_post.html" locale="en_US" app_id=12345678 href="https://www.facebook.com/FacebookDevelopers/posts/10151471074398553" width=500 %}
Show widget settings
Setting Description Default
locale Used to determine the language of the widget. Django locale (en_US by default)
app_id Facebook Application ID. None
href The absolute URL of the Post that will be embedded. None
width The pixel width of the post (between 350 and 750) 500

Documentation: https://developers.facebook.com/docs/plugins/embedded-posts

Minimal Code
Copy to clipboard
{% social_widget_render "facebook/activity_feed.html" site="developers.facebook.com" %}
Full Code
Copy to clipboard
{% social_widget_render "facebook/activity_feed.html" locale="en_US" app_id=12345678 site="developers.facebook.com" action="likes, recommends" colorscheme="light" header=True height=300 linktarget="_blank" max_age=0 recommendations=False width=300 %}
Show widget settings
Setting Description Default
locale Used to determine the language of the widget. Django locale (en_US by default)
app_id Facebook Application ID. None
action A comma-separated list of Open Graph action types to show in the feed. Any action type
app_id Display all actions associated with this app ID. This is usually inferred from the app ID you use to initiate the [JavaScript SDK]. None
colorscheme The color scheme used by the plugin. Can be "light" or "dark". "light"
filter Allows you to filter which URLs are shown in the plugin. For example, if the site parameter is set to 'www.example.com' and the filterparameter was set to '/section1/section2' then only pages which matched 'http://www.example.com/section1/section2/*' would be included in the activity feed section of this plugin. This filter does not apply to any recommendations which may appear in this plugin (see recommendations setting). None
header Show the "Recent Activity" header above the feed. Can be "True" or "False" "True"
height The height of the plugin in pixels. 300
linktarget Determines what happens when people click on the links in the feed. Can be any of the standard HTML target values. "_blank"
max_age Limit the created time of articles that are shown in the feed. Valid values are 1-180, which represents the age in days to limit to. 0 (no limit)
recommendations Specifies whether to always show recommendations (Articles liked by a high amount of people) in the bottom half of the feed. Can be "True" or "False". "False"
ref A label for tracking referrals which must be less than 50 characters and can contain alphanumeric characters and some punctuation (currently +/=-.:_). See the FAQ for more details. None
site The domain for which to show activity. Current domain
width The width of the plugin in pixels. 300

Documentation: https://developers.facebook.com/docs/plugins/activity

Minimal Code
Copy to clipboard
            {% social_widget_render "facebook/recommendations_feed.html" site="developers.facebook.com" %}




                
Full Code
Copy to clipboard
                    {% social_widget_render "facebook/recommendations_feed.html" locale="en_US" app_id=12345678 site="developers.facebook.com" ref="page_ref" action="likes, recommends" colorscheme="light" header=True height=300 linktarget="_blank" max_age=0 width=300 %}

                    
Show widget settings
Setting Description Default
locale Used for widget localization Django locale (en_US by default)
app_id Facebook Application ID. None
action A comma-separated list of Open Graph action types to show in the feed. Any action type
app_id Display all actions associated with this app ID. This is usually inferred from the app ID you use to initiate the [JavaScript SDK]. None
colorscheme The color scheme used by the plugin. Can be "light" or "dark". "light"
header Show the "Recent Activity" header above the feed. Can be "True" or "False" "True"
height The height of the plugin in pixels. 300
linktarget Determines what happens when people click on the links in the feed. Can be any of the standard HTML target values. "_blank"
max_age Limit the created time of articles that are shown in the feed. Valid values are 1-180, which represents the age in days to limit to. 0 (no limit)
ref A label for tracking referrals which must be less than 50 characters and can contain alphanumeric characters and some punctuation (currently +/=-.:_). See the FAQ for more details. None
site The domain for which to show activity. Current domain
width The width of the plugin in pixels. 300

Documentation: https://developers.facebook.com/docs/plugins/recommendations

Minimal Code
Copy to clipboard
                            {% social_widget_render "facebook/share_button.html" href="developers.facebook.com" %}
                     
Full Code
Copy to clipboard
                        {% social_widget_render "facebook/share_button.html" locale="en_US" app_id=12345678 href="developers.facebook.com" layout="none" %}
                     
Show widget settings
Setting Description Default
locale Used for widget localization Django locale (en_US by default)
app_id Facebook Application ID. None
href The absolute URL of the Post that will be embedded. None
layout Share button layout type. None

Documentation: https://developers.facebook.com/docs/plugins/share-button

Twitter

Minimal Code
Copy to clipboard
       {% social_widget_render "twitter/follow_button.html" username="BillGates" %}
Full Code
Copy to clipboard
       {% social_widget_render "twitter/follow_button.html" username="BillGates" show_screen_name=True show_count=False size="medium" dnt=False %}
Show widget settings
Setting Description Default
Username Username to follow (without @) None
lang Language of the follow button. Available languages: English (en), French (fr), German (de), Italian (it), Spanish (es), Korean (ko) and Japanese (ja). en
width Width of the Follow Button None
align Alignment of the Follow Button. Can either be "left" or "right". None
show_screen_name The user’s screen name shows up by default, but you can opt not to show the screen name in the button. True
size The size of the button can render in either “medium”, which is the default size, or in “large” - which is the larger button. "medium"
dnt Enable or disable Do Not Track feature. More information. False

Documentation: https://dev.twitter.com/web/follow-button

Minimal Code
Copy to clipboard
                        {% social_widget_render "twitter/share_button.html" href="http://www.twitter.com" %}
                     
Full Code
Copy to clipboard
                        {% social_widget_render "twitter/share_button.html" href="http://www.twitter.com" username="BillGates" %}
                     
Show widget settings
Setting Description Default
username Username to follow (without @) None
lang Language of the follow button. Available languages: English (en), French (fr), German (de), Italian (it), Spanish (es), Korean (ko) and Japanese (ja). en
href Url to share None
hashtag Hashtags to add to post None
related Related account to this post None
count Widget counter layout "none"

Documentation: https://dev.twitter.com/web/tweet-button

Google+ and YouTube

Minimal Code
Copy to clipboard
       {% social_widget_render "google/plus_person_badge.html" href="https://plus.google.com/+SergeyBrin" %}
                     
Full Code
Copy to clipboard
       {% social_widget_render "google/plus_person_badge.html" language="en-US" href="https://plus.google.com/+SergeyBrin" layout="portrait" showcoverphoto=True showtagline=True theme="light" width=300 %}
                     
Show widget settings
Setting Description Default
language Language of the Google+ badge "en-US"
href URL to the Google+ page None
layout Sets the orientation of the badge. Can either be "landscape" or "portrait". "portrait"
showcoverphoto Displays the cover photo in the badge if set to true and the photo exists True
showtagline Displays the user's tag line if set to true. True
theme The color theme of the badge. Use dark when placing the badge on a page with a dark background. "light"
width The pixel width of the badge to render. The following ranges are valid: Portrait layout (180-450 pixels), Landscape layout (273-450 pixels) 300

Documentation: https://developers.google.com/+/web/badge/#person-badge

Minimal Code
Copy to clipboard
    {% social_widget_render "google/plus_page_badge.html" href="https://plus.google.com/110967630299632321627" %}
Full Code
Copy to clipboard
    {% social_widget_render "google/plus_page_badge.html" language="en-US" href="https://plus.google.com/110967630299632321627" layout="portrait" showcoverphoto=True showtagline=True theme="light" width=300 %}
Show widget settings
Setting Description Default
language Language of the Google+ badge "en-US"
href URL to the Google+ page None
layout Sets the orientation of the badge. Can either be "landscape" or "portrait". "portrait"
showcoverphoto Displays the cover photo in the badge if set to true and the photo exists True
showtagline Displays the user's tag line if set to true. True
theme The color theme of the badge. Use dark when placing the badge on a page with a dark background. "light"
width The pixel width of the badge to render. The following ranges are valid: Portrait layout (180-450 pixels), Landscape layout (273-450 pixels) 300

Documentation: https://developers.google.com/+/web/badge/#page-badge

Minimal Code
Copy to clipboard
    {% social_widget_render "google/plus_community_badge.html" href="https://plus.google.com/communities/113527920160449995981" %}
Full Code
Copy to clipboard
    {% social_widget_render "google/plus_community_badge.html" language="en-US" href="https://plus.google.com/communities/113527920160449995981" layout="portrait" showphoto=True showowners=False showtagline=True theme="light" width=300 %}
Show widget settings
Setting Description Default
language Language of the Google+ badge "en-US"
href URL to the Google+ page None
layout Sets the orientation of the badge. Can either be "landscape" or "portrait". "portrait"
showphoto Displays the community profile photo if set to true and the photo exists. True
showowners Displays a list of community owners if set to true. False
showtagline Displays the user's tag line if set to true. True
theme The color theme of the badge. Use dark when placing the badge on a page with a dark background. "light"
width The pixel width of the badge to render. The following ranges are valid: Portrait layout (180-450 pixels), Landscape layout (273-450 pixels) 300

Documentation: https://developers.google.com/+/web/badge/#community-badge

Minimal Code
Copy to clipboard
                            {% social_widget_render "google/plus_share_button.html" href="https://www.google.com" %}
                    
Full Code
Copy to clipboard
                            {% social_widget_render "google/plus_share_button.html" language="en-US" href="https://plus.google.com/communities/113527920160449995981" layout="portrait" showphoto=True showowners=False showtagline=True theme="light" width=300 %}
                     
Show widget settings
Setting Description Default
language Language of the Google+ badge "en-US"
href URL to the Google+ page None
annotation Widget style "none"

Documentation: https://developers.google.com/+/web/share/

Full Code
Copy to clipboard
    {% social_widget_render "google/youtube_subscribe_button.html" channel="GoogleDevelopers" %}
                     
Full Code
Copy to clipboard
    {% social_widget_render "google/youtube_subscribe_button.html" channel="GoogleDevelopers" theme="default" layout="default" count="default" %}
                     
Show widget settings
Setting Description Default
language Language of the button "en-US"
channel The name of the channel associated with the button None
layout The format for the button. Can either be "default" or "full" "default"
theme Specifies the color scheme to use for the button. Can either be "default" or "dark" "default"
count Indicates whether the button displays the number of subscribers that the channel has. Can either be "default" or "count". "default"

Documentation: https://developers.google.com/youtube/youtube_subscribe_button

Instagram

Instagram
Minimal Code
Copy to clipboard
    {% social_widget_render "instagram/badge.html" username="nike" %}
Full Code
Copy to clipboard
    {% social_widget_render "instagram/badge.html" size=32 username="nike" %}
Show widget settings
Setting Description Default
username Instagram username None
size Size of the badge in pixels. Can either be 16, 32 or 64. 32

Documentation: http://instagram.com/accounts/badges/

Pinterest

Pinterest
Full Code
Copy to clipboard
            {% social_widget_render "pinterest/follow_button.html" href="http://www.pinterest.com/pinterest/" fullname="Pinterest" %}

Show widget settings
Setting Description Default
href Pinterest User URL None
fullname User fullname that will be shown on the button None

Documentation: https://business.pinterest.com/en/widget-builder#do_follow_me_button

Full Code
Copy to clipboard
        {% social_widget_render "pinterest/pin_widget.html" href="http://www.pinterest.com/pin/99360735500167749/" %}

Show widget settings
Setting Description Default
href Pinterest Pin URL None

Documentation: https://business.pinterest.com/en/widget-builder#do_embed_pin

Minimal Code
Copy to clipboard
            {% social_widget_render "pinterest/profile_widget.html" href="http://www.pinterest.com/pinterest/" %}

Full Code
Copy to clipboard

            {% social_widget_render "pinterest/profile_widget.html" href="http://www.pinterest.com/pinterest/" pin_scale_width=80 pin_scale_height=320 pin_board_width=400 %}


Show widget settings
Setting Description Default
href Pinterest User URL None
pin_scale_width Width of a single pin 80
pin_scale_height Height of a singe pin 320
pin_board_width Width of the widget 400

Documentation: https://business.pinterest.com/en/widget-builder#do_embed_user

Minimal Code
Copy to clipboard
        {% social_widget_render "pinterest/board_widget.html" href="http://www.pinterest.com/pinterest/pin-pets/" %}

Full Code
Copy to clipboard

            {% social_widget_render "pinterest/board_widget.html" href="http://www.pinterest.com/pinterest/pin-pets/" pin_scale_width=80 pin_scale_height=320 pin_board_width=400 %}


Show widget settings
Setting Description Default
href Pinterest User URL None
pin_scale_width Width of a single pin 80
pin_scale_height Height of a singe pin 320
pin_board_width Width of the widget 400

Documentation: https://business.pinterest.com/en/widget-builder#do_embed_board