All in One Social Subscription Plugin for Blogs and Websites

All in One Social Subscription Plugin for Blogs and Websites

We recently wrote articles on how to get more traffic to your websites and simple social media marketing plans both of which are dependent on social media. So today we are releasing our simple yet attractive all in one social subscription plugin through which visitors can directly follow you on major social sites without leaving you website.

All in One Social Media Subscription Plugin

This plugin is 300px in width and 558px in height. It's long because we are not providing buttons here, it's a direct single click follow technique. Lets get to the integration part

Social Media Specific Scripts

If your site doesn't have these below mentioned script integrated already, then please do so now, so that our plugin works without any issue

1. Google Plus

Paste the below script inside the <head> tag of your website

<script type='text/javascript'>
window.___gcfg = {lang: &#39;en&#39;};
(function()
{var po = document.createElement(&quot;script&quot;);
po.type = &quot;text/javascript&quot;; po.async = true;po.src = &quot;https://apis.google.com/js/plusone.js&quot;;
var s = document.getElementsByTagName(&quot;script&quot;)[0];
s.parentNode.insertBefore(po, s);
})();</script>

2. Facebook SDK

Paste the below script right after opening the <body> tag

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

3. Twitter Script

Paste this script just before closing <body> tag

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

Installing All in One Subscription Plugin

Integration of this plugin is pretty easy. Just copy and paste the below code where you want the plugin to appear

<style type='text/css'>
#ttpssubcription{width:280px;margin:0px 0px 10px 0px;padding:8px;border:2px solid #000;background:#eee;height:538px;-webkit-border-radius:5px;border-radius:5px;-moz-border-radius:5px;-o-border-radius:5px;float:left;color:#000;}
#ttpssubcription:hover{background:#fff;}
.ttpssubsgplus{width:280px;height:118px;margin:0px;padding:0px 0px 8px 0px;border-bottom:2px solid #000;float:left;}
.ttpssubsfb{width:288px;height:185px;margin:0px -6px;padding:8px 0px 8px 0px;float:left;border-bottom:2px solid #000;}
.ttpssubstw{width:137px;height:20px;margin:0px 0px 0px -4px;padding:8px 5px 8px 0px;float:left;border-right:2px solid #000;border-bottom:2px solid #000;}
.ttpssubspi{width:137px;height:20px;margin:0px -4px 0px 0px;padding:8px 0px 8px 5px;float:left;border-bottom:2px solid #000;}
#ttpssubsemail{width:280px;height:90px;padding:8px 0px;margin:0px;border-bottom:2px solid #000;float:left;color:#000;font-weight:bold;}
#ttpssubsrss{width:276px;height:20px;margin:8px 0px 0px 0px;padding:12px 0px 10px 0px;float:left;overflow:hidden;background:#ffa200;-webkit-border-radius:5px;border-radius:5px;-moz-border-radius:5px;-o-border-radius:5px;color:#fff;font-weight:bold;text-align:center;border-left:2px solid #aaa;border-right:2px solid #000;border-bottom:2px solid #000;border-top:2px solid #aaa;}
.ttpssubsfunction{font-size:10px;width:280px;text-align:right;height:10px;}
.ttpssubsfunction a{color:#bbb;text-decoration:none;}
.ttpssubsfunction a:hover{color:#000;}
#ttpssubsrss:hover{background:#ffba00;border-left:2px solid #000;border-right:2px solid #aaa;border-bottom:2px solid #aaa;border-top:2px solid #000;}
#ttpssubsrss a{color:#fff;font-weight:bold;text-decoration:none;font-size:13px;}
#ttpssubsrss a:hover{color:#333;}
#ttpssubsemail input.emailupdatesinput{background: #fff !important; border: 1px solid #d2d2d2; padding: 0px 8px 0px 8px; color: #a19999; font-size: 12px; height: 25px; width: 260px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px;  border-radius: 5px; margin-top:3px;}
#ttpssubsemail input.joinesub{width:280px;height:30px;background:transparent;-moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px;  border-radius: 5px; float:right;margin:10px 0px 5px 0px;color:#000;font-weight:bold;}
</style>
<div id='ttpssubcription'>
<div class='ttpssubsgplus'><div class='g-plus' data-href='YOUR-GOOGLE-PLUS-PAGE-URL' data-rel='publisher' data-theme='light' data-width='280'></div></div>
<div class='ttpssubsfb'><div class='fb-like-box' data-colorscheme='light' data-header='false' data-height='185' data-href='YOUR-FACEBOOK-PAGE-URL' data-show-faces='true' data-stream='false' data-width='288'></div></div>
<div class='ttpssubstw'><a class='twitter-follow-button' data-show-count='false' href='YOUR-TWITTER-PAGE-URL' rel='nofollow'>Follow @YOUR-TWITTER-USERNAME</a>
</div>
<div class='ttpssubspi'><a href='YOUR-PINTEREST-ACCOUNT-URL' rel='nofollow'><img alt='Follow Us on Pinterest' height='20' src='http://2.bp.blogspot.com/-DM2lHWGat6s/UQn4y4sn61I/AAAAAAAABpE/Zwr20VAoL3Y/s1600/typicaltips-on-pinterest.png' width='137'/></a></div>
<div id='ttpssubsemail'>
Stay Updated with Newsteller
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=YOUR-FEEDBURNER-FEED-NAME&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'><input class='emailupdatesinput' gtbfieldid='10' name='email' onblur='if (this.value == &apos;&apos;) {this.value = &apos;Just Enter your E-mail...&apos;;}' onfocus='if (this.value == &apos;Just Enter your E-mail...&apos;) {this.value = &apos;&apos;;}' type='text' value='Just Enter your E-mail...'/><input name='uri' type='hidden' value='YOUR-FEEDBURNER-FEED-NAME'/><input class='joinesub' type='submit' value='Sign Up Today'/></form>
</div>
<div id='ttpssubsrss'>
<a href='YOUR-RSS-FEED-URL' target='_blank' title='Subscribe through Feed Readeer'>Subscribe through RSS</a></div>
<div class='ttpssubsfunction'><a href='http://www.typicaltips.com/2013/01/all-in-one-social-subscription-plugin.html' rel='dofollow' target='_blank'>Get this Plugin</a></div>
</div>

That should do the integration part. Now lets move onto neccessary editing of the code

Editing the Plugin

Replace the following as mentioned, hope they are self-explanatory
  • YOUR-GOOGLE-PLUS-PAGE-URL
  • YOUR-FACEBOOK-PAGE-URL
  • YOUR-TWITTER-PAGE-URL
  • YOUR-TWITTER-USERNAME
  • YOUR-PINTEREST-ACCOUNT-URL
  • YOUR-FEEDBURNER-FEED-NAME (Twice)
  • YOUR-RSS-FEED-URL

Our feedburner feed name is TypicalTips, so our form code will look like this

<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=TypicalTips&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'><input class='emailupdatesinput' gtbfieldid='10' name='email' onblur='if (this.value == &apos;&apos;) {this.value = &apos;Just Enter your E-mail...&apos;;}' onfocus='if (this.value == &apos;Just Enter your E-mail...&apos;) {this.value = &apos;&apos;;}' type='text' value='Just Enter your E-mail...'/><input name='uri' type='hidden' value='TypicalTips'/><input class='joinesub' type='submit' value='Sign Up Today'/></form>

Live Demo of All in One Social Media Subscription Plugin

Here is a live demo of the subscription box



0 comments:

Post a Comment

Singapore Top Web & Mobile Development Company

Trending

Find Your Site on Google

Stay Updated with Newsteller
Copyright © 2013 Typical Tips. All Rights Reserved
About Us | Services