If you are wondering how to create a social content locker for blogger blog then you have landed on right website because in this Article I will write about How to Create a Social Content Locker in Blogger Blog.
Some of my readers are facing problem in adding shareIt.js Social Content Locker in their Blogger blog and they requested to create a separate tutorial on how to add this Social Content Locker on their Blogger blog.
If you don’t know about shareIt.js, then let me introduce you. It’s a Social Content Locker jQuery Plugin. With shareIt, you can lock anything in your Blog Content and the Content will be automatically unlocked when a user shares your Content on Social Media using any of the social buttons.
Some of my readers are facing problem in adding shareIt.js Social Content Locker in their Blogger blog and they requested to create a separate tutorial on how to add this Social Content Locker on their Blogger blog.
ShareIt has helped me to boost my Social Presence and has Increased my Social Media Followers to a very good extent. You can also make your blogger blog go Viral. Your users need to share your Content to access your Premium Contents.
Features of shareIt.js
Here’s the list of features shareIt gives you:
- It is Free to Use. Yes! shareIt.js is completely free Social Content locker.
- Facebook Like Button. You can add Any URL to like button. For Example, You can use your Facebook Page URL to get real Followers.
- Facebook Share Button. You can use your Blog Post URL to make it viral.
- Twitter Follow Button. You can use your Twitter Username to Increase your Twitter Followers.
- Twitter Tweet Button. You can use your Blog Post URL to make it trending topic on twitter.
- LinkedIn Share Button.
- Google +1 Button.
- Social Share Counter with Each Social Button. Except for Twitter tweet button, because twitter has disabled its tweet counter API.
Things Required
You can Read the Official shareIt.js Tutorial to know about the Required Things, such as Facebook App Id, Google API Key.
Add Social Content Locker in Blogger
First of all, You need to Go to your Blogger Template Editor to add the shareIt.js script and stylesheet.
Step 2: Select Your Blog(From the Given list).
Step 3: Click on Template menu from the Left side of Menu Panel.
Step 4: Click on Edit HTML next to Customize Button below Your Template Thumbnail.
Now, as you came to your Blog Template Editor, follow the below step to Add the Social Content Locker in your Blogger Blog.
Step 1: Search for </head> in the HTML Code.
Step 2: Add the Below JavaScript and CSS Code just above </head>
< script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js" > < /script> < script type = "text/javascript
" >
//<![CDATA[
(function($) {
$.fn.shareIt = function(options) {
var HTMLtoHide = false;
var rand = Math.floor((Math.random() * 1000) + 1);
var settings = $.extend({
title: "Share/Like/Follow to Download",
id: Math.floor((Math.random() * 1000) + 1),
text: "Choose Any Social Social Network from below to share our content and Download it.",
buttons: ["facebook_like", "facebook_share", "twitter_follow", "twitter_tweet", "googleplus", "linkedin"],
linkedIn: {
url: window.location.href
},
facebook: {
appId: 676027382527018,
pageId: "https://www.facebook.com/trickzbuzzz",
url: window.location.href
},
twitter: {
via: "Durgeshjangid9",
url: window.location.href,
text: document.title
},
googleplus: {
apikey: "TrickzBuzZz",
url: window.location.href
},
count: {
twitter: {
tweets: 0,
follower: rand
},
facebook: {
likes: 0,
share: 0
},
googleplus: {
circledByCount: 0
},
linkedIn: {
shares: 0
}
},
timeout: 0,
close: false,
cookie: true,
cookieExpiry: 30,
}, options);
this.settings = settings;
this.each(function() {
if (getCookie("trickzbuzz_shareIt_hide_" + settings.id) == "true") {
$(this).fadeIn();
return false
}
var elem = $(this);
var con = "<div class='TrickzBuzz_shareit_container trickzbuzz_shareit' id=trickzbuzz_shareit_container_" + settings.id + "><div class='trickzbuzz_shareit_blur'></div><div class='trickzbuzz_shareit_content'><h1 class='trickzbuzz_shareit_title'>" + settings.title + "</h1><h3 class='trickzbuzz_shareit_subtitle'>" + settings.text + "</h3><div class='trickzbuzz_shareit_buttons' id=trickzbuzz_shareit_content_" + settings.id + "><div class='trickzbuzz_twitter_tweet trickzbuzz_margin_top' id=trickzbuzz_twitter_tweet_" + settings.id + "><a href='https://twitter.com/intent/tweet?via=" + settings.twitter.via + "&text=" + encodeURIComponent(settings.twitter.text) + "&url=" + encodeURIComponent(settings.twitter.url) + "' class='trickzbuzz_shareit_button twitter' data-service='twitter-tweets'><span class='trickzbuzz_shareit_button_title'>Tweet</span><div class=trickzbuzz_shareit_button_count><i>0</i></div></a></div><div class='trickzbuzz_twitter_follow trickzbuzz_margin_top' id=trickzbuzz_twitter_follow_" + settings.id + "><a href='https://twitter.com/intent/follow?screen_name=" + settings.twitter.via + "' class='trickzbuzz_shareit_button twitter' data-service='twitter-followers'><span class='trickzbuzz_shareit_button_title'>Follow</span><div class=trickzbuzz_shareit_button_count><i>" + settings.count.twitter.follower + "</i></div></a></div><div class='trickzbuzz_facebook_share trickzbuzz_margin_top' id=trickzbuzz_facebook_share_" + settings.id + "><a class='trickzbuzz_shareit_button fb' data-service='facebook_share'><span class='trickzbuzz_shareit_button_title'>Share</span><div class=trickzbuzz_shareit_button_count><i>0</i></div></a></div><div class='trickzbuzz_facebook_like trickzbuzz_margin_top' id=trickzbuzz_facebook_like_" + settings.id + "><a href='" + settings.facebook.pageId + "' class='trickzbuzz_shareit_button fb' data-service='facebook_like'><span class='trickzbuzz_shareit_button_title'>Like</span><div class=trickzbuzz_shareit_button_count><i>0</i></div></a></div><div class='trickzbuzz_googleplus trickzbuzz_margin_top' id=trickzbuzz_googleplus_" + settings.id + "><a href='javascript:void(0);' class='trickzbuzz_shareit_button google-plus' data-service='googleplus'><span class='trickzbuzz_shareit_button_title'>Follow</span><div class=trickzbuzz_shareit_button_count><i>0</i></div></a></div><div class='trickzbuzz_linkedin trickzbuzz_margin_top' id=trickzbuzz_linkedin_" + settings.id + "><a href='javascript:void(0);' class='trickzbuzz_shareit_button linkedin' data-service='linkedin'><span class='trickzbuzz_shareit_button_title'>Share</span><div class=trickzbuzz_shareit_button_count><i>0</i></div></a></div></div><div id=\"trickzbuzz_shareit_msg_" + settings.id + "\" class='trickzbuzz_shareit_msg'></div></div></div>";
HTMLtoHide = elem.html();
elem.html(con);
elem.fadeIn();
showButtons();
getCount();
initContainer();
$("#trickzbuzz_shareit_msg_" + settings.id).html("Powered By <a href='http://mycodingtricks.com/jquery/shareit-js-social-content-unlocker/' target=_blank><strong>My Coding Tricks</strong></a>");
if (settings.timeout != 0) {
setTimeout(function() {
showContent("timeout", "Content Shown", window.location.href)
}, settings.timeout)
}
});
this.angry = angry;
this.getID = function() {
return settings.id
};
this.showContent = function(s, v) {
showContent(s, v)
};
this.trackTrickzbuzzGoogle = function(data) {
if (data.state == "on") {
showContent("Google", "Plusone", settings.googleplus.url)
} else {
angry()
}
};
var $this = this;
function convertNumber(n) {
if (n >= 1000000000) {
return (n / 1000000000).toFixed(1) + "G"
}
if (n >= 1000000) {
return (n / 1000000).toFixed(1) + "M"
}
if (n >= 1000) {
return (n / 1000).toFixed(1) + "K"
}
return n
}
function setCookie(name, value, expirydays) {
var d = new Date();
d.setTime(d.getTime() + (expirydays * 24 * 60 * 60 * 1000));
var expires = "expires=" + d.toUTCString();
document.cookie = name + "=" + value + "; " + expires
}
function getCookie(name) {
name = name + "=";
var cookies = document.cookie.split(";");
for (var i = 0; i < cookies.length; i++) {
var cookie = cookies[i];
while (cookie.charAt(0) == " ") {
cookie = cookie.substring(1)
}
if (cookie.indexOf(name) == 0) {
return cookie.substring(name.length, cookie.length)
}
}
return ""
}
function initContainer() {
var $this = this;
$(window).resize(centerContainer);
centerContainer();
if ($this.timeout > 0 && typeof timeout != "undefined") {
setTimeout(function() {
$this.showContent("Timeout", "Hide", window.location.href)
}, $this.timeout)
}
if ($this.close === true && typeof $this.close != "undefined") {
$("#trickzbuzz_shareit_container_" + settings.id).find(".trickzbuzz_shareit_content").prepend("<a onclick='javascript: trickzbuzz_shareit_container_" + settings.id + "();' class='trickzbuzz_close'>×</a>")
}
}
function centerContainer() {
var container = $("#trickzbuzz_shareit_container_" + settings.id),
self = container.find(".trickzbuzz_shareit_content"),
width = self.innerWidth(),
cwidth = container.width(),
height = self.innerHeight(),
cheight = container.height();
self.css("left", (cwidth - width) / 2).css("top", (cheight - height) / 2)
}
function trackShareItGooglePlus(data) {
if (data.state == "on") {
$this.showContent("G+", "+1", $this.settings.googleplus.url)
} else {
$this.angry()
}
}
function closeShareIt() {
$this.showContent("Close", "Hidden", window.location.href)
}
function trackShareItLinkedIn() {
$this.showContent("LinkedIn", "Share", $this.settings.linkedIn.url)
}
eval("window.trickzbuzz_shareit_linkedin_" + rand + "=trackShareItLinkedIn");
eval("window.trickzbuzz_shareit_googleplus_" + rand + "=trackShareItGooglePlus");
eval("window.trickzbuzz_shareit_close_" + rand + "=closeShareIt");
function getCount() {
$.getJSON("http://cdn.api.twitter.com/1/urls/count.json?url=" + settings.twitter.url + "&callback=?", function(d) {
settings.count.twitter.tweets = d.count;
$("#trickzbuzz_twitter_tweet_" + settings.id).find(".trickzbuzz_shareit_button_count i").text(convertNumber(settings.count.twitter.tweets))
});
$.getJSON("https://cdn.syndication.twimg.com/widgets/followbutton/info.json?screen_names=" + settings.twitter.via + "&callback=?", function(d) {
settings.count.twitter.follower = d[0]["followers_count"];
$("#trickzbuzz_twitter_follow_" + settings.id).find(".trickzbuzz_shareit_button_count i").text(convertNumber(settings.count.twitter.follower))
});
$.getJSON("https://api.facebook.com/method/fql.query?format=json&query=SELECT+total_count+FROM+link_stat+WHERE+url+%3D+%27" + encodeURIComponent(settings.facebook.url) + "%27&callback=?", function(d) {
settings.count.facebook.share = d[0].total_count;
$("#trickzbuzz_facebook_share_" + settings.id).find(".trickzbuzz_shareit_button_count i").text(convertNumber(settings.count.facebook.share))
});
$.getJSON("https://api.facebook.com/method/fql.query?format=json&query=SELECT+like_count+FROM+link_stat+WHERE+url+%3D+%27" + encodeURIComponent(settings.facebook.pageId) + "%27&callback=?", function(d) {
settings.count.facebook.likes = d[0].like_count;
$("#trickzbuzz_facebook_like_" + settings.id).find(".trickzbuzz_shareit_button_count i").text(convertNumber(settings.count.facebook.likes))
});
$.getJSON("https://www.linkedin.com/countserv/count/share?url=" + settings.linkedIn.url + "&format=jsonp&callback=?", function(data) {
settings.count.linkedIn.shares = data.count;
$("#trickzbuzz_linkedin_" + settings.id).find(".trickzbuzz_shareit_button_count i").text(convertNumber(settings.count.linkedIn.shares))
});
var GooglePlusdata = {
method: "pos.plusones.get",
id: settings.googleplus.url,
params: {
nolog: true,
id: settings.googleplus.url,
source: "widget",
userId: "@viewer",
groupId: "@self"
},
jsonrpc: "2.0",
key: "p",
apiVersion: "v1"
};
$.ajax({
type: "POST",
url: "https://clients6.google.com/rpc",
processData: true,
contentType: "application/json",
cache: true,
data: JSON.stringify(GooglePlusdata),
success: function(r) {
settings.count.googleplus.circledByCount = r.result.metadata.globalCounts.count;
$("#trickzbuzz_googleplus_" + settings.id).find(".trickzbuzz_shareit_button_count i").text(convertNumber(settings.count.googleplus.circledByCount))
}
})
}
function showButtons() {
for (var i = 0; i < settings.buttons.length; i++) {
$("#trickzbuzz_" + settings.buttons[i] + "_" + settings.id).show();
switch (settings.buttons[i]) {
case "facebook_like":
case "facebook_share":
checkFB();
break;
case "twiter_follow":
case "twitter_tweet":
checkTwitter();
break;
case "googleplus":
checkGP();
break;
case "linkedin":
loadIN();
break
}
}
}
function loadIN() {
addIN();
if (typeof(IN) != "undefined") {
IN.parse()
} else {
$.getScript("http://platform.linkedin.com/in.js")
}
}
function addIN() {
$("#trickzbuzz_linkedin_" + settings.id).find(".trickzbuzz_shareit_button_title").html('<script type="IN/Share" data-url="' + settings.linkedIn.url + '" data-onSuccess="trickzbuzz_shareit_linkedin_' + rand + '" data-onsuccess="trickzbuzz_shareit_linkedin_' + rand + '" data-success="trickzbuzz_shareit_linkedin_' + rand + '"><\/script>')
}
var LinkedInShare = function() {
showContent("LinkedIn", "Share", settings.linkedIn.url)
};
function checkFB() {
$("#trickzbuzz_facebook_like_" + settings.id).find(".trickzbuzz_shareit_button_title").html('<div class="fb-like" data-href="' + settings.facebook.pageId + '" data-layout="button" data-action="like" data-show-faces="false" data-width="50px" data-share="false"></div>');
if (typeof FB == "undefined") {
var intw = setInterval(function() {
loadFB();
if (typeof FB != "undefined") {
clearInterval(intw)
}
}, 5000)
} else {
trackFB()
}
}
function trackFB() {
if ($("#trickzbuzz_facebook_share_" + settings.id).length > 0) {
$("#trickzbuzz_facebook_share_" + settings.id).click(function() {
FB.ui({
method: "share",
href: settings.facebook.url,
}, function(response) {
if (response && !response.error_code) {
showContent("Facebook", "Share", settings.facebook.url)
}
})
})
}
FB.XFBML.parse();
FB.Event.subscribe("edge.create", function(response) {
showContent("Facebook", "Like", settings.facebook.pageId)
});
FB.Event.subscribe("edge.remove", function(response) {
angry()
})
}
function loadGP() {
$.getScript("https://apis.google.com/js/platform.js", function() {
trackGP()
})
}
function checkGP() {
if (typeof gapi == "undefined") {
var intw = setInterval(function() {
loadGP();
if (typeof gapi != "undefined") {
clearInterval(intw)
}
}, 5000)
} else {
trackGP()
}
}
function trackGP() {
$("#trickzbuzz_googleplus_" + settings.id).find(".trickzbuzz_shareit_button_title").html("<g:plusone></g:plusone>");
gapi.plusone.render($("#trickzbuzz_googleplus_" + settings.id).find(".trickzbuzz_shareit_button_title").get(0), {
href: settings.googleplus.url,
annotation: "none",
callback: "trickzbuzz_shareit_googleplus_" + rand,
width: "100"
})
}
var ajaxFB = false;
function loadFB() {
if (!ajaxFB) {
$.ajaxSetup({
cache: true
});
$.getScript("http://connect.facebook.net/en_US/all.js", function() {
FB.init({
appId: settings.facebook.appId,
version: "v2.3",
});
trackFB()
});
ajaxFB = true
}
}
function checkTwitter() {
if (typeof window.twttr == "undefined") {
var inter = setInterval(function() {
loadTwitter();
if (typeof window.twttr != "undefined") {
twttr.ready(function(twttr) {
twttr.widgets.load();
trackTwitter();
clearInterval(inter)
})
}
}, 2000)
}
}
function loadTwitter() {
$.getScript("http://platform.twitter.com/widgets.js")
}
function trackTwitter() {
twttr.ready(function(twttr) {
twttr.events.bind("tweet", function() {
showContent("Twitter", "Tweet", settings.twitter.url)
});
twttr.events.bind("follow", function() {
showContent("Twitter", "Follow", settings.twitter.via)
})
})
}
function showContent(service, action, url) {
if (typeof(_gaq) !== "undefined") {
_gaq.push(["_trackSocial", service, action, url]);
console.log("Pushed : " + url)
}
var ss = $("#trickzbuzz_shareit_container_" + settings.id);
var pr = ss.parent();
ss.fadeOut(1000, function() {
pr.html(HTMLtoHide).fadeIn();
if (settings.cookie == true) {
setCookie("trickzbuzz_shareIt_hide_" + settings.id, "true", settings.cookieExpiry)
}
})
}
function angry() {
$("#trickzbuzz_shareit_msg_" + settings.id).html("You don't like Us?").addClass("error")
}
return this
}
})(jQuery);
//]]>
< /script> < style > .trickzbuzz_shareit_locker {
display: none
}.trickzbuzz_shareit {
font - family: Arial, Verdana;
max - width: 720 px;
overflow: hidden;
min - height: 301 px;
text - align: center;
width: 100 % ;
box - sizing: border - box;
position: relative;
margin: 10 px auto;
background: transparent
}.trickzbuzz_shareit * {
box - sizing: border - box;
transition: all 1 s cubic - bezier(1, 0.86, 0.38, -0.15)
}.trickzbuzz_shareit_content {
overflow: hidden;max - width: 600 px;color: #000;margin:0 auto;background:# fff;border: 1 px solid rgba(0, 0, 0, 0.29);min - height: 300 px
}.trickzbuzz_close {
float: right;text - decoration: none;padding: 2 px 8 px;background: rgba(0, 0, 0, 0.78);color: #fff;font - weight: bold;font - size: 20 px;cursor: pointer;line - height: 25 px
}.trickzbuzz_shareit_content h1, .trickzbuzz_shareit_content h3 {
color: #000}.trickzbuzz_shareit_buttons{padding:10px;height:auto;width:100%;position:relative}.trickzbuzz_shareit_button{text-decoration:none;position:relative;box-sizing:border-box;border:1px solid rgba(0,0,0,0.2);color:# FFF;background: #ccc;height: 36 px;vertical - align: baseline;margin - top: 63 px;min - width: 70 px;max - width: 100 px;text - align: center;margin - right: 10 px;padding: 8 px;cursor: pointer
}.trickzbuzz_shareit_button div {
display: inline
}.trickzbuzz_shareit_button > span {
line - height: 33 px;
height: 100 % ;
padding: 10 px;
position: relative;
display: inline
}.trickzbuzz_shareit_button_count {
position: absolute;top: -63 px;display: inline;left: 0;border: 1 px solid# e6e6e6;width: 100 % ;color: #2d2d2d;background:# fff;border - radius: 5 px;padding: 2 px;text - align: center;height: 50 px;line - height: 40 px
}.trickzbuzz_shareit_button_count: after {
content: "";width: 0;height: 0;border - left: 9 px solid transparent;border - right: 0 solid transparent;border - top: 9 px solid# FFF;position: absolute;left: 20 px;bottom: -9 px
}.trickzbuzz_shareit_button_count: before {
content: "";width: 0;height: 0;border - left: 12 px solid transparent;border - right: 0 solid transparent;border - top: 12 px solid# e6e6e6;position: absolute;left: 18.2 px;bottom: -12 px
}.trickzbuzz_shareit_blur {
position: absolute;left: 0;top: 0;width: 100 % ;background: rgba(0, 0, 0, 0.04);height: 100 % ; - webkit - filter: blur(82 px);filter: blur(10 px); - moz - filter: blur(10 px); - o - filter: blur(10 px)
}.trickzbuzz_shareit_button.fb {
background: #3b5998}.trickzbuzz_shareit_button.twitter{background:# 00 acee
}.trickzbuzz_twitter_tweet, .trickzbuzz_twitter_follow {
display: none
}.trickzbuzz_shareit_button.google - plus {
background: #db4a39
}.trickzbuzz_shareit_button.linkedin {
background: #0e76a8}.trickzbuzz_margin_top{margin-top:70px;display:none;float:left}.trickzbuzz_shareit_button_title .fb-like{left:0;top:-10px}.trickzbuzz_shareit_msg{display:block;margin-top:10px;text-align:center;font-size:11px;position:absolute;bottom:0;padding:5px;width:100%;max-width:601px;line-height:30px}.trickzbuzz_shareit_msg a{text-decoration:none;font-weight:bold;color:# f00
}.trickzbuzz_shareit_msg.error {
background: red;color: #fff
}.trickzbuzz_shareit_msg.error a {
color: yellow
}
@media screen and(max - width: 720 px) {.trickzbuzz_shareit_content, .trickzbuzz_shareit_msg {
position: static;display: inline - block
}
} < /style>
Now, You have Added the ShareIt.js Social Content Locker in your Blogger Blog and now you need to initialize the content locker to use in your blogger blog.
Step 3: Add the Blow Code just above to Initialize the shareIt.js jQuery Plugin.
| <script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
var options = {
title: "Share/Like/Follow to Download", //Heading of Content Locker
text: 'Choose Any Social Social Network from below to share our content and Download it.', //Subheading of Content Locker
facebook:{
url: window.location.href, //Your Content Page Url
pageId: "https://www.facebook.com/trickzbuzzz", //Your Facebook Page Url
appId: 676027382527018 //Your Facebook App ID
},
twitter:{
via: ' Durgeshjangid9', //Your Twitter Username
url: window.location.href,
text: document.title
},
googleplus:{
apikey: 108243827030226460431', //Google App API key
url: window.location.href,
},
linkedIn:{
url: window.location.href
},
buttons:["facebook_share","facebook_like","twitter_tweet","twitter_follow","googleplus","linkedin"]
};
$(".TrickzBuzz_shareit_locker").shareIt(options);
});
//]]>
</script>
|
Now Edit the Following things from the Above Code before adding it.
- Https://www.facebook.com/trickzbuzzz: Replace it with Your Facebook Page URL.
- Durgeshjangid9: Replace it with Your Twitter Username.
Now, When You add a New Blog Post in Your Blogger Blog and wants to hide some Content, then use the Below Code to use Social Content Locker to hide your Premium Content.
<div class="TrickzBuzz_shareit_locker"><!--YOUR CONTENT TO HIDE INSIDE CONTENT LOCKER GOES HERE--></div> |
0 comments:
Post a Comment