How to set default image for Facebook sharing in WordPress blog posts ?

A picture equals to many words. Facebook can be the biggest traffic source for your website, web 2.0 is social web. It may happen that your article is very catchy, get shared many times on Facebook but many of them don’t click the link. Attaching certain picture may increase click rate of Facebook news feed.

Increase of click rate means increased visitors, increased social sharing. To select certain image for a post you need to add some meta tags in header. Its obvious that we need different meta tags for each post. Static meta tags won’t do.

We will add a custom field and then fetch it in header file.

Add a custom field named “fbimage”. On post edit page under “Custom Fields” click enter new. Type “fbimage” and under value type image name you want to select for that post. ( Upload the image to wp-content/uploads)

( Note that you need to add new custom field only once, next time you just need to enter only value selecting field name from dropdown )

Update the post.

Now edit your theme from Appearance –> Editor. Select header.php.

Anywhere between <head> to </head> add below code.

<?php if(is_single()){ $values = get_post_custom_values(‘fbimage’,$post->ID); if($values[0]!=”){?>
<meta property=”og:image” content=”http://www.example.com/wp-content/uploads/<?php $values = get_post_custom_values(‘fbimage’,$post->ID); echo $values[0]; ?>”/>
<link rel=”image_src” href=”http://www.example.com/wp-content/uploads/<?php $values = get_post_custom_values(‘fbimage’,$post->ID); echo $values[0]; ?>” / >
<?php
}}
?>

Update the file and you’re done.

From next time you write a post, add value to “fbimage” custom field and enjoy increased click rate.

 

Festive Offer

Festive Offer

Festive Offer:: make Your Website $100/once
1. WordPress CMS World’s Most user frendly cms system
2. Domain Hosting for 1 year after 1 year you can renew the hosting.
3. Homepage + Unlimited Innerpages custom layout designing as per your requirement.
4. WordPress CMS systems manage your site with most popular open source CMS.
5. 10 Email id from your domain (GMail Integrate)
6. No Monthly cost

Email: krushna.c@gmail.com

Jquery Navigation Menu For Your Web Projects

A navigation menu helps visitors to interact with other pages and let them navigate through navigation menus to different pages of a particular website. A simple, neat minimalistic design always gain the attention of visitors, navigation menu plays a vital role in over all look and feel of a website that’s why designers should not ignore the navigation needs of a website. Designers use different types of navigation menus for different purposes such as image sliders menus, text effect menus, photo galleries and many more.Check Out these 12 jQuery Navigation Menu

1 Animated Content Menu With jQuery

Demo | Tutorial

2 Expanding Image Menu With jQuery

Demo | Tutorial

3 Portfolio Image Navigation With jQuery

Demo | Tutorial

4 Jquery One Page Navigation

Demo | Tutorial

5 Wander wall

Demo | Tutorial

6 Elastic Thumbnail Menu

Demo | Tutorial

7 Halftone Navigation Menu

Demo | Tutorial

8 Overlay Effect Menu

Demo | Tutorial

9 Sliding Boxes and Caption With jQuery

Demo | Tutorial

10 Rocking and Rolling Round Menu

Demo | Tutorial

11 How to Create A Cool Navigation Menu

Demo | Tutorial

12 Animated Text and Icon Menu With Jquery

Demo | Tutorial

How to use @font-face

Firstly, you’ll need to find a nice-free font in order to use it on your web page. Graublau Sans Web by Georg Seifert is a perfect font for our example since it’s free and supports many languages. Download the font on your drive and continue…

In order to support as many as possible browsers and devices, we need to first create and then use different formats of our font (.ttf/.otf, .eot, .woff, .svg etc.). There are numerous tools to convert fonts but the best I’ve come across is FontSquirrel @font-face Generator. A free and pretty fast online tool with many options and features that generates all necessary formats from a single font.

After you convert the font in all formats, create a directory named “fonts” and copy all the fonts formats inside it. Create a new html document in the root directory of your web site (on the same level where the fonts folder resides) and insert the following CSS:

@font-face {
    font-family: 'graublauweb-webfont';
    src: url('fonts/graublauweb-webfont.eot');
    src: local('☺'), url('fonts/graublauweb-webfont.woff') format('woff'), url('fonts/graublauweb-webfont.ttf') format('truetype'), url('fonts/graublauweb-webfont.svg#webfont8xigBfG2') format('svg');
}
h1 {
    font-family:"graublauweb-webfont", Helvetica, Arial, sans-serif;
    font-size:48px;
}

@font-face loads all necessary formats and we set the font-family the same way we would do normally.

Next we insert our simple markup:

<h1>This is a heading with some custom font.</h1>

That’s about it! Test the page in a browser to see the results.

Jigoshop -Free WordPress eCommerce Plugin

Jigoshop is an eCommerce plugin for WordPress developed by professionals with years of experience delivering online shops for global brands.

Set up shop in minutes with physical and downloadable products or even services. Jigoshop provides you with the features necessary to set up an eCommerce web site lickety-split.

With the option to create a multitude of product types and apply detailed attributes customers can easily refine your catalog, ensuring they find what they’re looking for in just a couple of clicks.

There are integrated worldwide payment and shipping options to cater for a global audience.

Inside the custom dashboard you get sortable sales graphs, incoming order / review notifications as well as stats on your stores performance.

Manage your stock levels and customer orders easily. Jigoshop has been engineered to make the boring parts of eCommerce, well, less boring!

Built upon the WordPress core you get all the benefits of this global leading platform: free, easy to use, secure, highly customisable and with a great support community to hold your hand.

Find out more on the official Jigoshop web site.

Download here

WordPress Plugin – 1-Click Retweet/Share/Like

Features

Social Buttons: Shows following 9 buttons on your blog posts
  1. Facebook Like
  2. Facebook Share
  3. Twitter button
  4. Google +1
  5. Google Buzz
  6. LinkedIn Share
  7. StumbleUpon
  8. Digg
  9. Email
Automatically Publish: Publish your Blog Posts to 30 Social Networks
  1. Facebook Profile/Wall
  2. Facebook Pages
  3. Facebook Application Page
  4. Facebook Events
  5. Facebook Groups
  6. Twitter
  7. LinkedIn
  8. MySpace
  9. Yammer
  10. Yahoo
  11. Identi.ca
  12. Status.net
  13. Google Buzz
  14. Socialcast
  15. Plurk
  16. Sonico
  17. Delicious
  18. Diigo
  19. Foursquare
  20. Gowalla
  21. Brightkite
  22. WordPress.com Blog
  23. WordPress.org Blog
  24. Blogger
  25. Tumblr
  26. Typepad
  27. Posterous
  28. Yahoo Meme
  29. Basecamp
  30. Backpack
Plugin also supports `Publishing your Blog Posts to Twitter` via `OAuth`.

Grey Box:New Javascript Popup Box

GreyBox logo
A pop-up window that doesn’t suck.

Introduction

GreyBox can be used to display websites, images and other content in a beautiful way.

Why use GreyBox:

  • It does not conflict with pop-up blockers
  • It’s only 22 KB!
  • It’s super easy to setup
  • It’s super easy to use
  • You can easily alter the style as it is controlled through CSS

Where could it be used?

  • Showing external pages
  • AJAX uploading of files
  • Showing internal pages (login, user preference, properties, contact formulas etc.)
  • Showing a video or a flash animation
  • Showing images
  • Showing product information
  • Admin sections

What browsers are supported?

  • Safari
  • Firefox 1.5+
  • Internet Explorer 5.5+
  • Opera 8.5+

Other browsers may also be supported.

Download

Follow

Get every new post delivered to your Inbox.

Join 210 other followers

%d bloggers like this: