Dib sharing button
How to insert and configure the Dibloc sharing button!
The Dib button allows you to instantly share on Dibloc, any web page on which it is installed.
Clicking on the Dib button automatically opens a pop-up window to publish your Dib: it will already be complete with a title, text and any photo on the page to be shared!
What is the Dib button?
A small widget developed to simplify the sharing of content on Dibloc.
To add it, just add a portion of HTML code (snippet) anywhere on the page you want to share, so the Dib button will appear!
Dib button generator
Enter in URL field, the link to the resource you want to share and click on GENERATE CODE. Copy and then paste the snippet generated on the page where you want the Dib button to appear.
Advanced management
Example code to insert
You can generate the snippet automatically, or customize it by following this complete example and setting the individual parameters.
<a href="https://www.dibloc.com/account/share"
class="dib-btn" data-dib-btype="default">Dib</a>
<script src="https://www.dibloc.com/me/js/dib.js" async></script>This is an example of the HTML code to copy and paste into the body of the web page to be shared, and consists of a a tag with dib-btn class containing the href attribute that identifies the link to be shared and additional data- attributes for additional parameters.
Plus the JavaScript script code that allows asynchronous linking of the widget to the page and loading the Dib button.
In the event that there are multiple Dib buttons on the page, you need to include the code only once.
How to configure the Dib button
The main parameter to set is the absolute URL (HTTP/HTTPS) of the page to be shared. Simply add it as a url query parameter in the href attribute of a tag.
<a href="https://www.dibloc.com/account/share?url=http://www.example.com"
class="dib-btn" data-dib-btype="default">Dib</a>Another option is to pass the absolute URL through the data-dib-href attribute.
<a href="https://www.dibloc.com/account/share"
class="dib-btn" data-dib-btype="default"
data-dib-href="http://www.example.com">Dib</a>An additional mode is offered by the use of an <link rel="canonical"> element containing the canonical link of the page.
<link rel="canonical"
href="http://www.example.com" />Finally you can leave the ability to make the widget to read the Open Graph meta tags on the page; the tag with the og:url property will be checked and eventually used.
<meta property="og:url"
content="http://www.example.com" />In the absence of a valid link set, the Dibloc widget is able to detect the URL of the page, but it is not recommended for the presence of any unneeded query parameters.
Customize the Dib button
You can use the round format of the button by changing the data-dib-btype attribute with the round value instead of default.
Round button
Default button
The dark coloring of the button can be used by adding the data-dib-color attribute with the dark value instead of default.
Dark round button
Dark default button
Discover other tools and ways to share on Dibloc! [+ info]