Spot.IM Social Network Integration Widget for Blogger and WordPress Blogs

Spot.IM is the creator of the first “everywhere” social network, empowering website owners and publishers to turn their websites into a social network driven by their own content where members can chat, share links, photos etc.





Within 5 minutes, you can host on your blog, a vivid, live community with almost zero effort just by integrating the spot.im widget.

Once you successfully create your spot and integrate your blog with Spot.im, the widget will appear at the corner of your site, via which your blog readers can easily join, start talking about your site content and get to know each other in live conversation. Two users can also have private conversation by making use of the "directSpot" feature.



Once you’ve created a Spot you are automatically assigned as the Spot’s host. As the host of the community, you can delete a user’s message or kick a user out of your spot. Spot.IM also provides the option of blocking all external links (links not leading to pages on your site) on your Spot.



Users can  also report a message or another user, after 4 reports the message will be automatically deleted or the user will be automatically kicked.



Spot.im app for Android and iOS allows spot hosts to converse with their users on the go. So, if you really want to keep up with happenings in your spot, ensure you download and make use of the spot.im mobile app.

How To Integrate Spot.im With WordPress and Blogger Blog

To get started, you need to go to www.spot.im, click on the Get Spot.IM now button  and sign in to Spot.IM via your preferred social network to create a user profile.



Thereafter, choose your Spot’s name and design it according to the branding of your website. With a logo and color to match, a category that best describes your Spot and so on.



Once completed, you will be presented with a code you can embed on your site.



For blogspot users, copy and paste the code in HTML/Javascript gadget and you're good to go.



For WordPress users, install the spot.im WordPress plugin. You will have to enter your spot id in the settings of the installed plugin. You will get the id by clicking on the "For Wordpress users" button on your spot management dashboard.



Once it's live on your site, you can edit and moderate your spot via your spot management dashboard. You can also make use of the Spot.im app for Android and iOS  to converse with their users on the go.



You can see sample spot live at : www.mobilitaria.com



What's your take on this?

Continue Reading

Want to Add Free Notification Bar at The Top Of Your Website For eMail Opt-Ins? Try ManyContacts

ManyContacts is a simple and efficient drop-down website notification bar that sits at the top of your website, making it easy for your site visitors to take action on your website. If you want to generate more leads or grow your email list, ManyContacts is what you need. It is a product of online marketing experts from Woorank.





By making use of ManyContacts bar, you can offer a giveaway - such as an ebook, coupon code, a test, a course - without creating extra landing pages as it allows you to add a link to a file or offer in your "Thank You" message.

People that have used your ManyContacts bar will be added to a list in your Contacts Manager for later reference. Leads generated are data enriched, qualified and displayed conveniently in the Contacts Manager. When you gain a new contact an email notification will also be sent to you to facilitate a prompt follow-up.



The form closes for everyone that previously filled the form and it can be closed manually by everyone.



Adding ManyContacts bar to your site is easy. First, create an account and start customizing your bar. When you are happy with your bar, you will get a piece of notification bar html code that you will need to paste in your web page’s source code just before the </body> tag.



It works on any CMS as long as you have access to your source code. There are also ManyContacts bar plugins for Wordpress and Joomla.



I've added it to one of my sites and integrated it with madmimi. So, if anyone fills the form on my site, such contact will be automatically added to an email list on my madmimi account. It also integrates with mailchimp.



It is FREE and you can create as many as you want and paste the code on each page that you want to see the bar appear.



Get it at : www.manycontacts.com



Do you know other tools for adding a notification bar for email opt-ins and promos ??

Continue Reading

Codes for Google+, Twitter and Facebook Follow Buttons

Adding the Google+, Twitter and Facebook follow buttons to your Blogger or WordPress blog will make it easy for your blog visitors to easily follow you on those social networks without having to leave your blog.



The Facebook Follow button lets people subscribe to your public updates on Facebook. It is not for Facebook pages.



Below is what the buttons will look like on your blog:

If you want to add the buttons to your blog, copy the code below in HTML/Javacript gadget (if Blogger) or a text widget (if WordPress).

<div class="fb-follow"
data-href="https://www.facebook.com/jideogunsanya1"
data-colorscheme="light" data-layout="button_count"
data-show-faces="false"></div> <p>

                                       
<a href="https://twitter.com/jide_ogunsanya"
class="twitter-follow-button" data-show-screen-name="false">Follow
@jide_ogunsanya</a></p> <p>

<div
class='g-follow' data-annotation='bubble' data-height='24'
data-href='//plus.google.com/100475476355251995300'
data-rel='author'/>

 </div></p>

Replace the Facebook username, Twitter handle and Google+ URL with yours.


NB: If you've not added the Facebook SDK and Twitter script on your blog, the buttons might not display.



I hope this works for you. 

Continue Reading

Awesome Sidebar Feedburner Email Subscription Form For Blogger and Wordpress Blogs

While googling for awesome opt-in-forms yesterday, I stumbled on an attractive Feedburner Email Subscription Form. I copied its code from the blog post, made some changes to the code and embedded it on the sidebar of my blog. I'm loving it and I decided to share it with you.

You can place the Feedburner Email Subscription Form on the sidebar of your Blogger and Wordpress blogs. All you need to do is to edit the code below, copy and paste it in HTML/Javascript gadget of a Blogger blog or Text widget of a Wordpress blog.

<link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,400,300,600,700" rel="stylesheet" type="text/css"></link>

<div id="Subscription">

<div class="heading">

Sign Up in Seconds</div>

Sign up with your email address to receive latest updates straight in your inbox.

<div class="emailsub">

<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify? uri=secretinfos-ogbongeblog', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">

<input name="email" placeholder="Your Email" type="text" /><input name="uri" type="hidden" value="SecretInfos-Ogbongeblog" /><input name="loc" type="hidden" value="en_US" /><input class="button" type="submit" value="Sign Up Now!" />

</form>

</div>

</div>

<style type="text/css">

#Subscription { width: 300px; height: 200px; border: 1px solid #51C0F9; border-radius: 5px 5px 0px 0px; }

#Subscription .heading { padding: 10px 20px; line-height: 20px; font-size: 20px; font-weight: 600; font-family: open sans; color: rgb(38, 38, 38); text-align: center; text-shadow: 0px 1px rgba(255, 255, 255, 0.75); background: none repeat scroll 0% 0% rgb(81, 192, 249); }

#Subscription p { font-family: open sans; font-size: 13px; color: rgb(12, 12, 12); line-height: 25px; padding: 5px 15px 0 15px; margin: 0; }

#Subscription .emailsub { padding: 0px 20px 10px 20px; }

#Subscription .emailsub input { color: rgb(170, 170, 170); padding: 10px; margin-top: 10px; font-size: 15px; font-family: open sans; width: 92%; border: 1px solid #ccc; border-bottom: 2px solid #ccc; border-radius: 5px; transition:border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s; }

#Subscription .emailsub input:focus { border-color:#F4836A; outline: none; box-shadow: 0 0 2px 1px #F4836A; }

#Subscription .emailsub .button { background: #F4836A; color: white!important; border:none; outline: none; border-bottom: 3px solid #B3614E; transition:background .4s linear; width: 90%; margin-right: 5%; margin-left: 5%; font-weight: 600; cursor:pointer; }

#Subscription .emailsub .button:hover{background: #DD7761;}

#credit {margin: -5px 0 0px 15px!important;text-shadow:none; opacity:.6;}

</style>

You can customize as desired if you have basic knowledge of html and css.



Ensure you carefully REPLACE the "secretinfos-ogbongeblog" in the code with your blog feedburner ID. You can get it via feedburner.com. Click on your feed, then click on "edit feed details". It will be displayed as seen in the screenshot below:

Do you like the email subscription form?

Continue Reading

How To Create a Blog on Blogger For Testing Templates and Codes

I recommend you create a blog on Blogger for testing templates and codes before making changes to your live blogspot blog. By doing this, you won't mess up with your blog by uploading a corrupt template. I always use test blogs when testing templates, scripts and other hacks before implementing the changes on my blog.



Since text blogs are used only for experimental reasons, I set them up in a way different from the way I set up my main blogs. First of all, I ensure that they are not listed in public listing of blogger, not visible to search engines; not appear in my Google+ or blogger profile page. Atimes, I also set them up in a way that no one else can view it except me.



Luckily, Blogger allows us to set up any number of blogs for FREE and also makes it easy to create a Blog on Blogger with the settings highlighted above.



How To Get Started



==> Go to www.blogger.com and sign in with your Google account details.

==> Choose a name for your test blog e.g My Test Blog 1

==> Next you will need to choose your blog address (something.blogspot.com). Try to use an address which is unlikely to be used by other Bloggers

==> Choose one of the default templates and create your blog.



The next screen invites you to make your first post. This is actually quite important as having a few posts in your test blog will be of great benefit in seeing how your experiments will work when you try them out.



I recommend you change a few settings as explained below, before adding posts to your test blog.



1. Go to Settings tab.

2. Go to Basic sub-tab.

3. Add description for the test blog eg a test blog for testing templates and scripts.

4. Via "Privacy", Set 'No' for Add your blog to our listings? option and also Set 'No' for Let search engines find your blog? option as seen in the screenshot below:

After configuring these settings, neither your test blog will be indexed by search engines, nor it will be displayed in public search listings of blogger blogs.

How To Restrict Readers From Viewing the Test Blog

1. Go to Settings tab.

2. Go to Basic sub-tab.

2. Scroll down to Permissions.

3. In Blog Readers section, select the "Private - Only blog authors" option.

After configuring this option, no one can view your blog except you.

Disconnecting Test Blog From Google+ Profile

If you've linked your Google+ profile with your Blogger account, you can follow the steps below to disconnect your test blog from auto-sharing the posts on your test blog on Google+ :



==> Go to Google+ tab of your test blog

==> Scroll down and click on "Disable Google+ Link"

If you're still using Blogger Profile instead of Google+ profile, go to your dashboard, click "edit profile", select blogs to display and uncheck your test blog from the listing.

So, How Do I Add Posts To My Test Blog?

For posts in your first test blog, you can copy some individual posts (eg 10 posts) from your main blog making sure each post has at least an image in it. Also ensure you add at least one label to each post. The images and labels will be useful when testing templates with featured images and label widgets.



When creating more test blogs, you can simply import posts from your first test blog to the new test blogs.



You can also easily generate a paragraph or two of dummy text using the Lorem Ipsum generator but ensure you add images and labels to the posts.



Now you can use your test blog for whatever experiments you choose! You can upload your existing template to test new modifications, try out your scripts or codes, or even try a new Blogger template you've downloaded somewhere!



When you have finished using your test blog, you can easily delete it by going to Settings > Other and choosing the "Delete blog" option. Once you do this, the blog will be deleted forever. Also the blog url will be released and available for others to use instead.



Do you use test blogs ? If not, how do you manage the modifications done on your Blogger blog?

Continue Reading