Tag Archives: wordpress

Adding Pinterest to your WordPress Site, the easy way

Adding Pinterest to your WordPress Site, the easy way

Pinterest is one big thing that everybody is targeting to gain traffic and visibility across varied platforms, beat it your website, mobile apps, or even all of us who target social media for big time conversion opportunity. The purpose for me to write this post comes into action, as I felt that many websites have mentioned complex ways to add Pinterest to WordPress powered blogs or sites, which include a bit of code to fumble around with, while most of us would not be at ease or would not like to give it a try. Before straightaway coming to the point as to how we integrate or add Pinterest, I would like to inform that “Pinterest” as a platform has massive potential for growth and everybody wants to target it as a platter of self publicity. I have gone through many success stories and I am still aiming to get the most out of the wonderful photo blog.

“My Point: No Coding and Easy Integration”

•    Pinterest Floating Style Integration

So for all the newbies or folks who don’t like to code or like managing everything in a way simple manner, I would suggest you people to use two plugins. The first plugin adds the “Pin It” in the form of a scrolling or floating share, the same plugin can be seen towards your left. It pins the featured image of your blog post on the fly to the Pinterest site. To make you remember, the floating share style is originally inherited from Mashable and has now become the most common phenomena across all sites. Beyond the “Pin It” option, you get standard features like Facebook Likes, Tweets, Google + 1’s, Digg, Stumble, Linkedin and more, which again depends on what all you want to add-on.

-> Download Floating Style Pinterest Add-on Plugin: Slick Social Share Buttons

-> Plugin Author Site: Design Chemical

•    Pinterest Button Above or Below Posts

The next plugin I share with you  is an interesting share as well, the reason why I am keeping it as backup or standby option is due to sole reason that most of us add the Facebook Like, Tweet, and Google+ 1 button with posts, when we simultaneously add the Pintrest “Pin It” button above or below posts it might spoil the appearance or layout of your respective WordPress sites.  It might also require you to work over the theme style sheet or CSS file to ensure proper and correct placement of the button.

I suggest two plugins that you may try, I have tried both but liked the floating variant personally and hence finalized on the same.

-> Pinterest “Pin It” Button By Phil Derksen (option to add the button at the top or below a post) : Download

-> Plugin Author Site: Phil Derksen

-> Pin It On Pinterest by Flaunt Your Site (option to add the button below a post): Download

-> Plugin Author Site: Flaunt Your Site

I hope that my post would help you achieve the goal and the momentum that “Pinterest” provides via huge audience and hence increasing visitors to the site as well the publicity gig over social networks. If you face any issues please leave a comment and I would get back to you at the earliest. You can also reach me if you need any Pinterest invitations. Enjoy ! 🙂

Integrating Facebook Social Plugins to your WordPress Blog [How-to]

WordPress is among the worlds best blogging tools, allowing users with a fully customizable environment and an easeful backend interface for content administration and management.

While building a blog or a website on WordPress the user has many options to integrate social features into one’s site which might include leading platforms like Google +, Facebook, Twitter and so on.

We discuss integration of Facebook Social Plugins, which will allow the site to indulge more with its users allowing them to comment, discuss and share what they like in a user-friendly manner. One can come across various plugins available across wordpress.org plugin directory or one can even directly integrate the WordPress Theme as well.  Depending on what you find easy you can implement the same.

Facebook Social Plugins

Social Plugins can allow your site users to comment on posts, like and share them on Facebook. The ones that are majorly used include:

  • Comments
  • Like Box
  • Like Button

Facebook Application Creation

To use these plugins we will first require the creating of a Facebook application that would allow cross platform communication between Facebook and our website. To create an application we go to: https://developers.facebook.com/apps. Choose the option on right corner “Create New App”, upon pressing the button a pop-up window appears that allows the creating on a new application.

As shown in the image above we choose a Display Name for the application this can be your Website Name. App Namespace defines how the application would be known internally within Facebook, once done with the creation of the application you will have to adjust some application settings. The user is automatically directed to a summary page for the application. The summary page has various sections out on which will be currently just two of them.

Under basic info section change we change the App Domain value to www.Your-Website.com, going further we tell Facebook as how our application works with Facebook. We do so by highlighting the Option Website and then again entering our website address, once all done we press save changes.

Social Plugin Implementation

From the above plugins lets consider the Comments Plugin to be integrated as a part of your themes code.  Go to: https://developers.facebook.com/docs/reference/plugins/comments/

When the page opens you will see a box which would be identical to the image above, fill in the required fields include your website address, posts to display and color type you would like and click on Get Code. This generates a code that can be implemented within various pages of your site.

Now we are close to the implementation of the plugin, to finalize the implementation we need to follow a two-step process and we are done.

First we need to implement JavaScript SDK into the theme body tags, body tags can be found both in header.php and footer.php file of your WordPress Themes. The ideal placement area lies just after opening body tag. The JavaScript SDK Code is as below:

<div id=”fb-root”></div>

<script>

window.fbAsyncInit = function() {

FB.init({

appId      : ‘YOUR_APP_ID’, // App ID

channelURL : ‘//WWW.YOUR_DOMAIN.COM/channel.html’, // Channel File

status     : true, // check login status

cookie     : true, // enable cookies to allow the server to access the session

oauth      : true, // enable OAuth 2.0

xfbml      : true  // parse XFBML

});

// Additional initialization code here

};

// Load the SDK Asynchronously

(function(d){

var js, id = ‘facebook-jssdk’; if (d.getElementById(id)) {return;}

js = d.createElement(‘script’); js.id = id; js.async = true;

js.src = “//connect.facebook.net/en_US/all.js”;

d.getElementsByTagName(‘head’)[0].appendChild(js);

}(document));

</script>

In the above-mentioned code we will replace YOUR_APP_ID with the App ID generated in the comments code, for those of you who not aware of what App ID, check the highlighted part in the code below.

<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&appId=119352884837162“;

fjs.parentNode.insertBefore(js, fjs);

}(document, ‘script’, ‘facebook-jssdk’));</script>

The second element to be changed from the JavaScript SDK is WWW.YOUR_DOMAIN.COM/channel.html, here we create an html file named as channel.html, and the purpose of creation of this file is to resolve cross-domain communication issue with certain browsers. The code that goes into the file is just one single line, which is described below.

<script src=”//connect.facebook.net/en_US/all.js”></script>

One the file is created upload to the root directory of your webhosting and change the value in the JavaScript SDK.

The Last step to complete the implementation is to edit the comments.php file of your WordPress theme and paste the code mentioned below.

<div class=”fb-comments” data-href=”YOUR-WEBSITE.COM” data-num-posts=”2″ data-width=”500″></div>

Just replace “YOUR-WEBSITE.COM” by your Website URL and you are done.

Alternatively if you are a newbie and don’t want to code or get confused with the same you can try popular WordPress Plugins Like DISQUS, Intense Debate Etc.