• Login
  • Our WordPress Plugin
  • Blog Posting Services
  • In Twitter
  • In LinkedIn
J
HARAPHULA
OneStop Shop of Information

Updates

  • An Email Marketing Strategy that Works for B2B
    •
  • How can eCommerce Strategies improve Customer Relationships?
    •
  • What are the best Strategies for Social Media Marketing?
    •
  • Everything you Should know about Hiring an Online Printing Service
    •
  • Plagiarism Checkers are Solution for Learning in Universities
    •
  • 10 Must-Have Apps for Entrepreneurs to Stay Organized
    •
  • 4 ways Learning Management System Can Transform your Business
    •
  • Why you Should Consider Hiring an Advertising Agency for your Business?
    •
  • How to make a Simple Iphone App and upload it in the App Store?
    •
  • Data Visualization’s Positive impression on Decision Making
    •
  • Everything you need to know related to Mail Forwarding Service
    •
  • Use of Etiquette to Short Sentences your Guide to Email Writing
    •
  • Why are Content Writing Services top Trending Now?
    •
  • Useful Tips Wrap Up your Blog with an effective Conclusion
    •
  • 4 Pros and 4 Cons of hiring Technical Writing Services
    •

Script to Add Custom Social Sharing buttons using JQuery?

Blogging Techniques
May 8, 2017
2.6 (34 votes)
Script to Add Custom Social Sharing buttons using JQuery? Script to Add Custom Social Sharing buttons using JQuery?
3 5 97
Tricks to Spy on your Friends WhatsApp Messages

Today Social Media’s are the best ways to bring free real human traffic to your Blog. As you know Google hates artificial backlinks. It is more fruitful for your portal if visitors will start sharing. This practice helps to gain popularity and ranking. Assume you have your blog related to Fashion industry. Every day nearly 200 readers redirects to your blog through Search engines. Here if your portal provides share option, it may 10 readers like your content and share the link in their network. Which will directly helps to bring referral traffic. It was noticed referral traffic helps to generate better Return on Investments.

With this idea recently we introduced Social media Sharing buttons in our blog. My blog is designed using WordPress. While I searched for Social Sharing buttons plugin in WordPress, I got many. But refer to my requirements in my blog I want Custom Social Sharing buttons. I have icon files for Facebook, Twitter and LinkedIn. What more I want is while users will click on these icon files a centered aligned Popup will open. Where my visitors can easily share the link without wasting much of their quality time.

To achieve the same did start with the implementation. Downloaded 3D social media icon images from iconfinder.com. Placed them in side my HTML file using a UL element as below.

Adding Social Sharing icons

<ul class="ulstyle">
<li class="listyle">
<a class="fb-share" target="_blank">
<img src="https://jharaphula.com/wp-content/uploads/2016/05/ico-facebook.png" alt="Facebook" title="Facebook" />
</a>
</li>
<li class="listyle">
<a class="tw-share" target="_blank">
<img src="https://jharaphula.com/wp-content/uploads/2016/05/ico-twitter.png" alt="Twitter" title="Twitter" />
</a>
</li>
<li class="listyle">
<a class="gp-share" target="_blank">
<img src="https://jharaphula.com/wp-content/uploads/2016/05/ico-google_plus.png" alt="Google Plus" title="Google Plus" />
</a>
</li>
<li>
<a class="ln-share" target="_blank">
<img src="https://jharaphula.com/wp-content/uploads/2016/05/ico-linkedin.png" alt="LinkedIn" title="LinkedIn" />
</a>
</li>
</ul>

CSS Styles

.ulstyle {
list-style: outside none none; 
overflow: hidden; 
width: 247px; 
margin: auto;
}
.listyle {
float: left; 
padding-right: 18px;
cursor: pointer;
}
.ln-share {
cursor: pointer;
}

Now what more remain? Yes, to make Social Sharing Functional I have to post parameters like URL or page Title to Social media Sharing APIs. In this scenario I required 4 top Social Medias Facebook, Twitter, Google Plus and LinkedIn. The Social Sharing API’s for these 4 popular Social networking sites are as below.

Facebook – http://www.facebook.com/share.php?u=[URL]&title=[TITLE]
Twitter – http://twitter.com/intent/tweet?status=[TITLE]+[URL]
Google Plus – https://plus.google.com/share?url=[URL]
LinkedIn – http://www.linkedin.com/shareArticle?mini=true&url=[URL]&title=[TITLE]&source=[SOURCE/DOMAIN]

Here to achieve Social Sharing Pop-up’s on click of icon images I did write 4 jquery functions inside document.ready method. These functions are called over the click event of icon images. To open a popup with Social Sharing API’s here I am using the traditional JS window.open method. Using simple calculation aligning these pop-up’s to center. Look at the Script below.

$('.fb-share').click(function(e) {
e.preventDefault();
window.open('https://www.facebook.com/sharer/sharer.php?u=' + location.href + '', 'fbShareWindow', 'height=396, width=630, top=' + (jQuery(window).height() / 2 - 198) + ', left=' + (jQuery(window).width() / 2 - 315) + ', toolbar=0, location=0, menubar=0, directories=0, scrollbars=0');
return false;
});

$('.tw-share').click(function(e) {
e.preventDefault();
window.open('http://twitter.com/intent/tweet?status=<?php the_title(); ?>' + ' ' + '' + location.href + '', 'twShareWindow', 'height=396, width=630, top=' + (jQuery(window).height() / 2 - 198) + ', left=' + (jQuery(window).width() / 2 - 315) + ', toolbar=0, location=0, menubar=0, directories=0, scrollbars=0');
return false;
});

$('.gp-share').click(function(e) {
e.preventDefault();
window.open('https://plus.google.com/share?url=' + location.href + '', 'gpShareWindow', 'height=556, width=404, top=' + (jQuery(window).height() / 2 - 278) + ', left=' + (jQuery(window).width() / 2 - 202) + ', toolbar=0, location=0, menubar=0, directories=0, scrollbars=0');
return false;
});

$('.ln-share').click(function(e) {
e.preventDefault();
window.open('http://www.linkedin.com/shareArticle?mini=true&url=' + location.href + '&title=<?php the_title(); ?>&source=https://jharaphula.com', 'lnShareWindow', 'height=580, width=630, top=' + (jQuery(window).height() / 2 - 290) + ', left=' + (jQuery(window).width() / 2 - 315) + ', toolbar=0, location=0, menubar=0, directories=0, scrollbars=0');
return false;
});

In the above Script thing to notice is in place of URL I am passing location.href. Which results the current page URL to share.

Tags:Advantages using Jquery, Custom Social Sharing buttons, Sharing buttons using JQuery, Utilize Social Media
6 Crucial WordPress Skills to Manage your Blog
5 Devices to Fix Wi-Fi Deadspots from Netgear Universal and Cisco

Related Posts

  • White hat SEO tricks to increase Organic Traffic for…
  • Techniques behind successful Link building strategies
  • Tricks for free Internet traffic for your Site…
  • Facebook for Business to drive massive visitors to your Blog
  • Basic SEO Interview Questions & Answers for Freshers
  • Off Page Optimization Activities those Affects…
  • How to increase Site traffic using Organic Search?
  • Free Backlinks Submitter tools to generate 2000+…
  • Why I will Choose Link Insertion in place of fresh…
  • Tips to Write a Comment with list of Blog Commenting Sites
  • Top High PR Social Media & Social Bookmarking Sites
  • How Guest Posting Services useful for SEO Backlinks…
  • How Competitor Analysis & Keyword Research helps in SEO?
  • How paid Guest Posting Services helps Businesses to…
  • 5 Proved Ways for E-Commerce Stores to Drive Organic…
  • Tips for Google Penalty Recovery from Penguin Updates
  • Low Price Guest Posting Services with Contextual…
  • Google Recovery Penalty removal Tricks for Bloggers
  • Paid Guest Posting Service with multi-niche based…
  • How Google Analytics reports help in Business Growth?
  • How your Blog Can help you to Create Brand Personality?
  • Ways to make Money Online - Tips to increase Google…
  • Basic and Easy Tips for Creating an SEO Friendly Blog Posts
  • On-page Optimization tricks to reduce Google…
  • Types of Website Traffic Sources to Generate Leads…
On-page SEO booster,
Google Friendly,
XML based
PHP/WP Sidebar
FREE Widgets
demo

Popular Categories

  • Miscellaneous591
  • Digitalization298
  • Career Guide243
  • Indian Blog207
  • Business Book177
  • Health & Wellness165
  • Travel & Tourism132
  • Your Financial Advisor116
  • Real Estate Consulting110
  • Shopping97
  • Blogging Techniques75
  • Digital Marketing70
  • Home Remedies70
  • SEO Techniques67
  • Programming62
  • Automobiles57

i20 Sidebar Widgets

Tourist Guide for blissfulness of nature Goechala Trek
Tourist Guide for blissfulness of nature Goechala Trek
The Goechala Trek is located at a height of 16207 feet and it is an important trek settled at Sikkim. It contains a large collection...
All about the Snowplace of India - Kedarkantha Trek
All about the Snowplace of India – Kedarkantha Trek
Kedarkantha – when we became more acquainted with this trek, we headed out to see the wandering upper Himalayan Ranges experiencing snowfall on the extremely...
Music to Online Games how to entertain during a Long Trip
Music to Online Games how to entertain during a Long Trip
Sometimes reaching your travel destination can take a long time regardless if you’re traveling through the endless India or somewhere abroad. You might end up...
Scuba Diving in Andaman in Havelock Island or Marine Marvels
Scuba Diving in Andaman from Havelock Island or Marine Marvels
When it comes to seeking the ultimate adventure that combines excitement, exploration, and natural beauty, scuba diving in Andaman emerges as the best choice. The...
Explore Mountains with Bike and Nightlife during you visit Coorg
Explore Mountains with Bike and Nightlife during you visit Coorg
Do you wish to travel to foreign destinations? What if we told you you could enjoy the same whilst being in India. Wondering how? Let’s...
Dubai Yacht Rentals and Marina Services make the Vacation better
Dubai Yacht Rentals and Marina Services make the Vacation better
When thinking of visiting the United Arab Emirates or Dubai specifically, many think of the shopping, glorious architecture, and images of lush spaces atop sand....
3 Factors how Traveling is Good for your Healthy Living
3 Factors how Traveling is Good for your Healthy Living
Travel is one of the most popular leisure activities in the twenty-first century, and there are some very good reasons why. For one thing, it’s...
6 Tips on How to Get Your Car in Shape before a Road trip
6 Tips on How to Get your Car in Shape before a Road trip
You have spent a lot of time planning and looking forward to this trip. Do not let it be ruined by technical issues of any...
How to do Online Train Ticket booking? - Indian Railway Reservation
How to do Online Train Ticket booking? – Indian Railway Reservation
With the rush of growing population today railway ticket booking is not an easy job. If you are looking for a ticket with Indian Railway...
Music Week to Boat Show 12 Toronto Events for every Month
Music Week to Boat Show 12 Toronto Events for every Month
JANUARY – Toronto International Boat Show Shake off winterish doldrums at the summer preview event. Toronto International Boat Show offers over 250 seminars and workshops,...

New Releases

The biggest Real Estate Investing Mistakes and How to Avoid them?
April 15, 2025

The biggest Real Estate Investing Mistakes and How to Avoid them?

Have you ever wondered if real estate investing is as straightforward as it sounds? Does the promise of steady rental income and rising property values…

Grow your Brand Empire with Elegant Custom Favor Boxes
April 11, 2025
Grow your Brand Empire with Elegant Custom Favor Boxes
How to Buy Facebook Likes and boost your Reach?
March 29, 2025
How to Buy Facebook Likes and boost your Reach?
Strategies for Reducing Pores - A Comprehensive Guide
March 28, 2025
Strategies for Reducing Pores – A Comprehensive Guide
The Ultimate Guide to Choosing the best Health Checkup Package for you
March 26, 2025
The Ultimate Guide to Choosing the best Health Checkup Package for you
Why my Organization or Our Products and Services need Guest Posting?
March 26, 2025
How paid Guest Posting Services helps Businesses to boost Sales?
How to use Multani Mitti? - Tips and Tricks for maximum Benefits
March 26, 2025
How to use Multani Mitti? – Tips and Tricks for maximum Benefits
Transform your Guest Room with a Multi-Functional Sofa Cum Bed
March 26, 2025
Transform your Guest Room with a Multi-Functional Sofa Cum Bed
CNC Machining in Model Making Dubai for Prototypes
March 21, 2025
CNC Machining in Model Making Dubai for Prototypes
How to Choose the Right Generator for your Home?
March 21, 2025
How to Choose the Right Generator for your Home?
How to Prepare for a Tummy Tuck in Islamabad?
March 19, 2025
How to Prepare for a Tummy Tuck in Islamabad?
Trump Towers 2 - Experience the Pinnacle of Luxury Living
March 15, 2025
Trump Towers 2 – Experience the Pinnacle of Luxury Living
Why Eye Cleaning is essential for your Health?
March 14, 2025
Why Eye Cleaning is essential for your Health?
From Local to Global - Digital Growth Strategies for Indian Brands
March 10, 2025
From Local to Global – Digital Growth Strategies for Indian Brands
Tattoo Booking App - Revolutionizing the Tattoo Industry
March 10, 2025
Tattoo Booking App – Revolutionizing the Tattoo Industry
Human Behavior in Men and Women Aged 18 to 35
March 10, 2025
Human Behavior in Men and Women Aged 18 to 35
explore us...

OUR FACILITIES

  • Login
  • Our Background
  • Privacy
  • WordPress.org

CONTACT INFO

  • Do WhatsApp
  • Reach us

SEO GUEST POSTING

Do you like to publish your Stories near Quality Audiences? If so, “OneStop Shop” is the best platform for you. We are one among the vastly growing Indian Blog. Reach us to publish your Stories with lifelong No-Follow links.

WHY ONESTOP?

We are here to bring high Quality Information. As a multi-niche platform we have spend several years for Collecting various useful Stories. Dream to establish a domain where from you can get all your day today required information. We covers Animals to Zoology.
©2014-2025 JHARAPHULA, ALL RIGHTS RESERVED.
Show Buttons