We use twitter to connect with our friends or people to share the content of same interest. If we want to share a link from our blog, we just click on the Tweet button present at the top right corner of our twitter account. A new page will open with title compose new Tweet. we copy the blog link from our blogger and paste it in the compose new Tweet, then click tweet button. But it will be annoying to see that posted link with out a preview image.

But by using twitter cards, we can post our blog link on twitter with a preview image, title and description.

Don't know what are twitter cards?

Twitter cards are some simple HTML codes. You have to copy that HTML codes and paste them in your blogger. Don't worry, its very easy.

Lets start .....

First of all, go to your dashboard of your blogger.
Then click on Theme.
Click on Backup/Restore, located at the top right corner.
Backup your theme. So that, if there will be any error, you have a copy of your theme.
After saving your theme, Go again to dashboard >>Theme>>Edit HTML.
Now click inside the HTML box and Press Control+F , a search box will open. in the search box
Write <b:includable id='post' var='post'> in the search box.
Now you will have the above code as highlighted.
Just click immediately after the above code.
Press Enter to go to the next line and paste the following code.

<meta content='summary_large_image' name='twitter:card'/>

<meta content='@yourname' name='twitter:site'/>

<meta content='@yourname' name='twitter:creator'/>

<meta content='www.yoursite.com' name='twitter:domain'/>

<meta expr:content='data:post.firstImageUrl' name='twitter:image:src'/>

<meta expr:content='data:post.title' name='twitter:title'/>

<b:if cond='data:blog.metaDescription'>

<meta expr:content='data:blog.metaDescription' name='twitter:description'/>

<b:else/>

<meta expr:content='data:post.snippet' name='twitter:description'/>

</b:if>

<meta expr:content='data:post.sharePostUrl' name='twitter:url'/>

At the end, change the @yourname to your twitter account name, For example @HelpReady3
Change www.yoursite.com to your site URL, For example www.helpready.tk
Click Save Theme.
Now go to https://cards-dev.twitter.com/validator
Enter your site URL in Card Validator box and click on Preview card.
Its Done!
Now tweet your link on twitter, this time it will be posted with image preview.

Be happy and keep sharing.

write <b:includable id='post' var='post'>

ٹوئیٹر پر لنک کو تصویر کے ساتھ کیسے پوسٹ کریں

ہم اپنے دوستوں یا لوگوں سے رابطہ کرنے کے لیے ٹوئیٹر کا استعمال کرتے ہیں تاکہ ہم آپس میں باہم دلچسپی والی چیزیں شیئر کر سکیں۔ اگر ہم اپنے بلاگ سے کوئی لنک ٹوئیٹر پر شیئر کرنا چاہتے ہیں تو ہم اپنے ٹوئیٹر اکاونٹ پر دائیں طرف اوپر کونے پر موجود Tweet بٹن کو کلک کرتے ہیں۔ ایک نیا پیج کھل جائے گا جس پر compose a new Tweet لکھا ہو گا۔ اب ہم اپنے بلاگ سے لنک کو copy کر کے compose a new Tweet کے box میں paste کر دیتے ہیں اور Tweet بٹن کو کلک کرتے ہیں۔ لیکن جب ہم اپنے لنک کو بغیر image کے دیکھتے ہیں تو ہم پریشان ہو جاتے ہیں۔
مگر ہم Twitter cards کو استعمال کر کے اپنے لنک کو Twitter پر اس کی image, title اور description کے ساتھ پوسٹ کر سکتے ہیں۔

کیا آپ Twitter cards کے بارے میں نہیں جانتے ؟

Twitter cards کچھ سادہ سے HTML codes ہیں۔ آپ کو ان HTML codes کو copy کر کے اپنے بلاگ میں paste کرنا ہے۔ یہ بہت آسان ہے لہذا پریشان ہونے کی ضرورت نہیں ہے۔

چلیں شروع کرتے ہیں ۔۔۔۔۔۔

سب سے پہلے اپنے bloggers کے dashboard پر جائیں
پھر Theme پر کلک کریں
دائیں جانب اوپر کی طرف Backup/Restore پر کلک کریں۔
اپنے Theme کو backup کر لیں تاکہ اگر کوئی error آ جائے تو آپ کے پاس Theme کی copy موجود ہو۔
جب آپ اپنے Theme کو backup کرلیں تو آپ اس کے بعد دوبارہ EditHTML << Theme << dashboard پر آ جائیں۔
اب HTML box کے اندر کلک کریں اور اپنے keyboard سے control +F دبائیں ۔ ایک search box کھل جائے گا۔
اس search box میں <b:includable id='post' var='post'> لکھیں ۔
اب اوپر والا code آپ کے سامنے highlighted ہو کر آئے گا۔
اس code کے فوراً بعد کلک کریں۔
نئی لائن پر جانے کے لیے Enter کو دبائیں اور مندرجہ ذیل کوڈ کو Paste کریں.