How to post a clickable link with preview image on twitter ٹوئیٹر پر لنک کو تصویر کے ساتھ کیسے پوسٹ کریں

how to post clickable link with preview in twitter
 
 

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 clickable post link without a preview image on twitter.

tweet button
 
 
compose new tweet on twitter
 
 
copy URL of site
 
 
paste URL of site
 
 
link posted without image on twitter

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

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 @InfoMehfil
  • Change www.yoursite.com to your site URL, For example www.infomehfil.com
  • 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.

 
 
 
bloggers dashboard
bloggers theme
 
 
backup theme
 
 
download theme
edit HTML
 
click inside edit HTML box
 
search box
 
write <b:includable id='post' var='post'>
 
copy twitter card code
 
paste twitter card code
 
write your twitter account name
 
write your site URL
save bloggers theme
 
go to twitter card validator site
 
now tweet URL again
 
link with preview image on twitter

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

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

ہم اپنے دوستوں یا لوگوں سے رابطہ کرنے کے لیے ٹوئیٹر کا استعمال کرتے ہیں تاکہ ہم آپس میں باہم دلچسپی والی چیزیں شیئر کر سکیں۔ اگر ہم اپنے بلاگ سے کوئی لنک ٹوئیٹر پر شیئر کرنا چاہتے ہیں تو ہم اپنے ٹوئیٹر اکاونٹ پر دائیں طرف اوپر کونے پر موجود 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 کریں.
 

<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’/>

 
  • آخر میں [email protected] کو اپنے Twitter account کے نام سے بدل دیں۔ مثلاً InfoMehfil@
  • اور www.yoursite.com کو اپنی site url سے بدل دیں۔ مثلاً www.infomehfil.com  
  • اس کے بعد save theme پر کلک کریں۔
  • اب آپ https://cards-dev.twitter.com/validator پرجائیں.
  • آپ اپنی site URL کو Card Validator box  میں لکھیں اور Preview card کو کلک کریں.
  • اب اپنی لنک کو Twitter پر Tweet کریں اس بار آپ کی لنک Preview image کے ساتھ post ہو جائے گی۔
خوش ہو جائیں اور شیئر کریں۔
بلوگرز ڈیش بورڈ
    تھیم کلک کریں
  بیک اپ تھیم
      تھیم ڈاون لوڈایڈٹ

کلک

سرچ

سرچ باکس

کوڈز

پیسٹ

اکاوئنٹ

ایڈریس

تھیم

پری ویو

ٹوئیٹر

لنک تصویر