Extension:NamespaceHTML/Pinterest Widget

From mediawiki.org

Adding a Pinterest Feed, Buttons, etc., to your Mediawiki site[edit]

The following codes allow you to embed a Pinterest button, feed,etc. on your Mediawiki using the NamespaceHTML extension.The NamespaceHTML extension allows a defined namespace to use raw html, not just wiki syntax. Due to the danger of allowing raw html on a public wiki you should restrict editing to the Namespace with html to just sysops, or admin on your site. The code below was tested on a site were editing of the template namespace was restricted, but the template, itself, can be transincluded elsewhere. By using the #tag syntax shown below the html can be freely mixed with wiki syntax allowing the use of wiki variables.

Additionally it will work if you allow raw html, which you should only do on a wiki that is not open to the public to edit.

Pinterest details[edit]

Pinterest is a social networking photo sharing site. They allow you to embed feeds from their site into other sites. See: http://business.pinterest.com/en/widget-builder#do_pin_it_button

Pin it Button[edit]

This is the code from Pinterest:

<a href="//www.pinterest.com/pin/create/button/" data-pin-do="buttonBookmark" ><img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_gray_20.png" /></a>
<!-- Please call pinit.js only once per page -->
<script type="text/javascript" async src="//assets.pinterest.com/js/pinit.js"></script>

To make it work inside Mediawiki (with this extension):

{{#tag:html|<a href="//www.pinterest.com/pin/create/button/" data-pin-do="buttonBookmark" ><img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_gray_20.png" /></a>
<!-- Please call pinit.js only once per page -->
<script type="text/javascript" async src="//assets.pinterest.com/js/pinit.js"></script>}}

Follow Button[edit]

This is the code from Pinterest:

<a data-pin-do="buttonFollow" href="http://www.pinterest.com/pinterest/">Pinterest</a>
<!-- Please call pinit.js only once per page -->
<script type="text/javascript" async src="//assets.pinterest.com/js/pinit.js"></script>

To make it work inside a Mediawiki:

{{#tag:html|<a data-pin-do="buttonFollow" href="http://www.pinterest.com/{{{user}}}/">{{{user name}}}</a>
<!-- Please call pinit.js only once per page -->
<script type="text/javascript" async src="//assets.pinterest.com/js/pinit.js"></script>}}

Notice the Mediawiki variables inside the html. You can just use one variable for both the remaining user url info and the user name if you prefer.

Profile Board (Header)[edit]

This is the code from Pinterest:

<a data-pin-do="embedUser" href="http://www.pinterest.com/pinterest/"></a>
<!-- Please call pinit.js only once per page -->
<script type="text/javascript" async src="//assets.pinterest.com/js/pinit.js"></script>

To make it work inside a Mediawiki:

<a data-pin-do="buttonBookmark" href="https://www.pinterest.com/pin/create/button/"><img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_gray_20.png" /></a>
<!-- Please call pinit.js only once per page -->
<script async defer src="//assets.pinterest.com/js/pinit.js"></script>

Notice the Mediawiki variable

How it will look:

Pinterest Example One.png

Profile Board (Square)[edit]

<a data-pin-do="embedUser" href="http://www.pinterest.com/pinterest/" data-pin-scale-width="80" data-pin-scale-height="320" data-pin-board-width="400"></a>
<!-- Please call pinit.js only once per page -->
<script type="text/javascript" async src="//assets.pinterest.com/js/pinit.js"></script>

To make it work:

{{#tag:html|<a data-pin-do="embedUser" href="http://www.pinterest.com/{{{user name}}}/" data-pin-scale-width="80" data-pin-scale-height="320" data-pin-board-width="400"></a><!-- Please call pinit.js only once per page -->
<script type="text/javascript" async src="//assets.pinterest.com/js/pinit.js"></script>

Notice the Mediawiki variable.

How it will look:

Pinterest example two.png

Profile Board (SideBar)[edit]

Code from Pinterest:

<a data-pin-do="embedUser" href="http://www.pinterest.com/pinterest/" data-pin-scale-width="60" data-pin-scale-height="800" data-pin-board-width="150"></a>
<!-- Please call pinit.js only once per page -->
<script type="text/javascript" async src="//assets.pinterest.com/js/pinit.js"></script>

Code to Make it work:

{{#tag:html|<a data-pin-do="embedUser" href="http://www.pinterest.com/{{{user name}}}/" data-pin-scale-width="60" data-pin-scale-height="800" data-pin-board-width="150"></a>
<script type="text/javascript" async src="//assets.pinterest.com/js/pinit.js"></script>}}

Notice the Mediawiki variable

Will add the Board widget code later....