Show Blog Post URL, HTML link and BB (forum) link For Sharing!!

Place Blog Post URL, HTML link and BB (forum) link at the end of Blog post for Sharing in Comment section and Forum

This is a common thing that if readers find your post interesting then they intend to share in different social media site, forum and in other medium. However this can be seen that readers stop to share any post while they face difficulty. Generally we use different social sharing widget to make our Blog content sharable. But maximum social sharing widget didn’t develop with all social media sharing system.

Majority of social media widget are built with Facebook, Twitter, Pinterest etc. But beside of those there are many social media site that people are using for sharing content and grabbing visitors. So the best way we can develop our content sharing system. And we can do it by displaying raw URL directly at the end of the Blog post.

This is a simple widget but very effective and this widget able to display your content URL at the end of your Blog post. You will able to display 3 types of URLs such as

Post URL

This is suitable for sharing content on various social media site.

HTML URL

This URL is suitable for sharing content on Social Media and Comment section. Because when you share this auto generated URL then it will display a clickable URL with Post title.

Forum URL

This auto generated URL you can use for sharing your Blog content in differentforum.

That means 3 URLs will automatically generate and display for your each Blog post. And your Blog visitors can easily copy the URL and use it for post sharing. Sounds cool isn’t it? You can see the DEMO from below Image

So let’s proceed to the tutorial that helps you to add this widget in your Blog.

1. Login to your Blogger account, go to Blogger dashboard, click the arrow adjacent to 'Go to post list icon' and select 'Template' from dropdown menu. You can also select the 'Template' from left navigation menu.
2. Click 'Edit HTML'.
   
3. Search for (Ctrl+F) </b:skin> and paste (Ctrl+V) the following code before </b:skin>
Css

#linkshare{text-align:left;margin-top:2em; padding-bottom:5px;color:#555555;}

4. Then click the Save template
5. Search for (Ctrl+F) <data:post.body/> or <div class='post-footer'>
6. Copy the script from below and paste it below/after
<data:post.body/> or <div class='post-footer'>
HTML

<b:if cond='data:blog.pageType != &quot;index&quot;'>
<b:if cond='data:blog.pageType != &quot;archive&quot;'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='linkshare'>
<h2 style='margin-bottom:0.5em;color:#555555;'>Grab The Post URL</h2>
<b>URL:</b>
<textarea id='url' onclick='this.focus();this.select()' readonly='readonly' rows='1' style='margin-bottom:15px; background-color:#F8F8F8;color:#444444; height: 2.6em; width: 98%;' title='Click to highlight'><data:blog.url/></textarea>
  <br/>
<b>HTML link code:</b>
<textarea id="HTML-code" onclick="this.focus();this.select()" readonly="readonly" rows="1" style='margin-bottom:15px; background-color: #F8F8F8;color:#444444; height: 2.6em; width: 98%;' title="Click to highlight">&lt;a href="<data:blog.url/>"&gt;<data:blog.pageTitle/> "clickable"&lt;/a&gt;</textarea>
<br/>
<b>BB (forum) link code:</b>
<textarea id='BB-code' onclick='this.focus();this.select()' readonly='readonly' rows='1' style='margin-bottom:15px; background-color:#F8F8F8;color:#444444; height: 2.6em; width: 98%;' title='Click to highlight'>[url=<data:blog.url/>]<data:blog.pageTitle/> &quot;clickable&quot;[/url]</textarea>
  </div>
 </b:if>       
</b:if>
</b:if>

7. Then click the Save template

You have done. Now check your any Blog Post and see at the end of the Post. The widget is displaying 3 unique URL against each Blog post. Visit next post you will see the same. Now your Blog visitors can share your Blog post URL in any social media site, in Blog comment section or in any forum. I hope it would like this widget.