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: 'en'};
(function()
{var po = document.createElement("script");
po.type = "text/javascript"; po.async = true;po.src = "https://apis.google.com/js/plusone.js";
var s = document.getElementsByTagName("script")[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('http://feedburner.google.com/fb/a/mailverify?uri=YOUR-FEEDBURNER-FEED-NAME', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true’ target=’popupwindow’><input class=’emailupdatesinput’ gtbfieldid=’10’ name=’email’ onblur=’if (this.value == '') {this.value = 'Just Enter your E-mail…';}’ onfocus=’if (this.value == 'Just Enter your E-mail…') {this.value = '';}’ 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('http://feedburner.google.com/fb/a/mailverify?uri=TypicalTips', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true’ target=’popupwindow’><input class=’emailupdatesinput’ gtbfieldid=’10’ name=’email’ onblur=’if (this.value == '') {this.value = 'Just Enter your E-mail…';}’ onfocus=’if (this.value == 'Just Enter your E-mail…') {this.value = '';}’ 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>
